CS351
Website Development

Dr. Greg Bernstein

August 6th, 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

Warning

This is a programming course that uses current industry standard tools that you must install and use.

The assignments may seem very simple/easy at the start but expand and build on each other to become quite complex.

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.

Introduction to full stack web development

Full stack web development includes:

  • front end (browser or mobile platform)
  • backend (servers of content and/or data)
  • network (protocols and architectures)

Front-End Objectives 1

Students will be able to create

  • Style Web Pages
  • Web based Graphical User Interfaces (GUIs)
  • Multi-page static sites
  • Front-end only Apps

Front-End Objectives 2

Students will learn to use and understand

  • HTML5 and its Document Object Model (DOM)
  • Cascading Style Sheets (CSS)
  • JavaScript (ES 6)
  • A modern front end framework (library) such as React

Back-End Objectives 1

  • Understanding and applying Web Networking basics including TCP/IP, HTTP(S), URLs, and DNS.
  • Understanding the role and functions of Web servers and server frameworks.
  • The student will able able to create custom web servers using Node.js, Express.js, etc…

Back-End Objectives 2

  • Understanding basic Security concepts, threats and mitigation techniques for web developers
  • Create a multi-user website/app utilizing password based authentication
  • Understand the security issues associated with such a website

Experience Objectives 1

  • Use Procedural, object oriented, and functional programming techniques applied to the client and server in JavaScript.
  • Including at least two asynchronous programming techniques: callbacks and promises.
  • Tools: Markdown, Node.js, NPM, Browser development Tools

Experience Objectives 2

  • Software integration and debugging
  • Across multiple file types and technologies (HTML, CSS, JavaScript, DOM, Server)
  • Network integration and debugging (full stack)

Schedule

The tentative course schedule is in the syllabus and maintained only at https://www.grotto-networking.com/WebsiteDevelopment/WebDevMaterials.html#working-schedule-and-lectures-fall-2020

Technologies and Topics

Which Topics 1

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 2

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.

Required Readings, Computer/Network Resources, and Software

Required Readings

Students are required to review the course slides for each module taught in class and to read the supplemental material indicated in the slides. These form the course readings.

Reading Sources

Mozilla Developer Network will be our main source for readings and reference

Online Course Compute and Networking Requirements

  • Laptop or desktop running modern version of Windows, MacOS, or Linux.

  • Ability to install required Open Source (free) development tools

  • Network connectivity and bandwidth: This course will be using Zoom for online course lectures and office hours.

Required Software

  • This course uses modern industry standard development tools
  • You are responsible for installing these tools on the computer that you will be using for this course.
  • All these tools are free and Open Source.

Your Development Environment

your development environment is your responsibility!

  • I cannot configure your computer for you.

  • I will encourage students to help each other with their development environments.

  • Most problems encountered with computers, software, or networks do not excuse late submissions of assignments or exams.

Web Browsers

  • You will need an up to date version of either Chrome or Firefox

  • The desktop/laptop versions of Chrome and Firefox contain debugging and development tools that are amazing compared to anything we had in the past. These tools are not present in mobile versions of these browsers.

Version Control

  • Every programmer should be using version control for all but the smallest projects. In this class we will use git.

  • We also need a way to privately share many files between student and teacher/grader. For this we will use GitHub classroom.

  • Use is required for all submissions of homework and exams.

Code Editors 1

  • You will need a good code editor for this course.
  • Minimal features should include syntax highlighting, auto-indent, and some form of “auto-completion”
  • Enhanced features include: code beautification (formatting), “linting”, graphical git tools, etc.

Code Editors 2

Very good free editors

Node.js and NPM

You’ll need to install node.js

  • This enables server side JavaScript
  • This comes with the package manager NPM
  • This gives us access to a wide range of open source tools and libraries

Course Assessments and Procedures

Evaluation Criteria 1

All assignment, project, and exam grading is based on the techniques, procedures, and styles taught in class.

Evaluation Criteria 2

Credit may not be given to random solutions obtained via the internet even if they “work”. There will be no debates on this criteria.

Evaluation Criteria 3

If you believe that you have a superior technique for solving a problem discuss it with me prior to using it on an assignment or exam.

Credit for a problem on an assignment does not endorse a technique.

Assignments/Projects (35%)

  • Problems sets will be generally be assigned on a weekly basis and will be posted on the course website with a reminder sent through Blackboard.

  • We will be using GitHub classroom for almost all the work in this class.

  • Assignment submission will consist of a commit/push of programming resources to your private class repository on the properly named branch prior to the deadline.

Assignments/Projects 2

  • No email submissions or Blackboard submissions will be accepted!

  • 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 or all of the problems will be graded for each assignment.

Midterm (15%)

There will be one midterm examination. Approximately 1/3 into the course. This will be a time limited programming assignment, turned in via Git and graded primarily on working functionality.

Code Review/Interview (30%)

In depth review of coding assignment/project during the 2/3 of the course. This includes evaluation of functional/non-functional code against assignment/project requirements and a 30 minute online interview/code walk between the instructor and the student.

Final (15%)

This will be a time limited programming assignment, turned in via Git and graded primarily on working functionality.

Class Participation (5%)

Class participation credit can be earned in a number of ways:

  • Attending Zoom class sessions
  • Responding to in class polls and questions
  • Asking questions or participating in discussions

Class Participation

Outside of class sessions class participation credit can be earned by:

  • Finding and alerting the instructor to mistakes (“bug bounties”) in
    1. Homework assignments
    2. Course materials (broken links)
    3. Course Website and Blackboard posts
  • Suggesting improvements to course materials including
    1. Slides, references,
    2. Supplementary web sites
    3. Programming techniques
    4. Development tools

Grading

35% assignments, 15% midterm, 30% code review/interview, 15% final. No extra credit will be assigned.

The grading scale is as follows: A 92.5%, A- 90.0%, B+ 87.5%, B 82.5%, B- 80.0%, C+ 77.5%, C 72.5%, C- 70.0%, D+ 67.5%, D 60.0%, F lower than 60%

Class Courtesies and Expectations

  • Our primary modes of communication outside of class will be emails and office hours.
  • Appointments outside of normal office can be requested via email and will be accommodated as my schedule permits.
  • If you think an error has been made in grading, Send an brief email explaining the problem.

Zoom Classes and Office Hours

  • Audio and Chat questions are encouraged!!! This is the point of live instruction.
  • Start class with your microphone muted
  • Start office hours with your microphone on
  • Use video when you can and if you feel comfortable, I do like to see you but this is not required.

Office Hours

  • Office hours are shared amongst the many students in my class. Most times demand for my attention is moderate, but when there are many students waiting I will need to limit each students time to try to accommodate as many students as possible.

  • I will be encouraging students to help each other during office hours. Such assistance to your fellow students counts as “class participation”

Email Etiquette 1

  • Keep emails short as possible but no shorter. If you email me about a problem and then find a solution, let me know!
  • It can take a day or two for me to respond to emails though sometimes much quicker.
  • Emails sent for help the evening that assignments are due seldom get answered before the deadline.

Email Etiquette 2

We live in a multi-cultural world! At US universities there are certain customs and protocols that are typically observed.

  • Addressing your professor/instructor: Dr. Last_Name, Prof. Last_Name,
    1. Strictly speaking Dr. is for those with PhDs or MDs. Professor may be limited to those holding tenure track positions
    2. For me: Dr. Bernstein, Professor Bernstein, Dr. B., Prof. B.
  • Many students, many classes, one professor: You need to let me know which class and section you are in. In addition, your NetId makes sure I don’t get you confused with students with similar or identical names and give them credit for your work!

Email Etiquette 3

  • Don’t Addressing your professor/instructor:
    1. By your professors first name. This is considered overly informal and show lack of respect in US culture.
    2. “Sir”: Too formal and somewhat derogatory.
    3. “Respected Professor”: Never used in US culture;

Email Etiquette 4

  • “I have doubts on XYZ” sounds to native English speakers that you may not consider “XYZ” valid or good in some sense.

  • What is typically intended is “I do not understand XYZ”, and even better yet let me know the details of exactly you don’t understand.

General Information

Cheating and Academic dishonesty

Accommodations for students with disabilities

If you have a documented disability and wish to discuss academic accommodations, or if you would need assistance in the event of an emergency evacuation, please contact me as soon as possible. Students with disabilities needing accommodation should speak with the Accessibility Services.

Emergency information

California State University, East Bay is committed to being a safe and caring community. Your appropriate response in the event of an emergency can help save lives. Information on what to do in an emergency situation (earthquake, electrical outage, fire, extreme heat, severe storm, hazardous materials, terrorist attack) may be found at: http://www20.csueastbay.edu/af/departments/risk-management/ehs/emergency-management/index.html Please be familiar with these procedures. Information on this page is updated as required. Please review the information on a regular basis.

A Note on Discrimination, Harassment, and Retaliation (DHR)

Title IX and CSU policy prohibit discrimination, harassment and retaliation, including Sex Discrimination, Sexual Harassment or Sexual Violence. CSUEB encourages anyone experiencing such behavior to report their concerns immediately. CSUEB has both confidential and non-confidential resources and reporting options available to you. Non-confidential resources include faculty and staff, who are required to report all incidents and thus cannot promise confidentiality. Faculty and staff must provide the campus Title IX coordinator and or the DHR Administrator with relevant details such as the names of those involved in an incident. For confidential services, contact the Confidential Advocate at 510-885-3700 or go to the Student Health and Counseling Center. For 24-hour crisis services call the BAWAR hotline at 510-845-7273. For more information about policies and resources or reporting options, please visit the following websites: https://www.csueastbay.edu/riskmanagement/complaint.html, http://www.csueastbay.edu/titleix

Student Conduct

The University is committed to maintaining a safe and healthy living and learning environment for students, faculty, and staff. Each member of the campus community should choose behaviors that contribute toward this end http://www.csueastbay.edu/studentconduct/student-conduct.html.