Course Syllabus

Jump to Today

Welcome to online CS290 Web Development!

My name is Luyao Zhang.  It's my great pleasure to be the instructor for this course. We have an experienced and professional TA team working with us to support you on your journey in Web Development. We will do our best to provide you an informative and encouraging course with a great learning experience. If you have any suggestions on this course, you're welcome to contact us at anytime.

Topics

In this course, we will mostly talk about the front end web development skills and a few back end techniques. We will be covering topics like HTML, CSS, JavaScript, Node.js and Mysql. We will spend most of the time talking about JavaScript.

Tools

There are no special tools required in this course. You can use your favorite code editor for the assignment in this course. Some of the most popular editors among students are Sublime Text, JSFiddle, and Visual Studio Code. Eric is personally partial to Emacs. You can develop your code locally and make it work on the flip for us to grade.

Course Structure

Each week's module will be posted ahead of time (Friday) for you to get started early. All the content including the learning goals and requirements, reading materials and lecture videos are put into one session and you will explore them by topics. 

  • Assignment/Activity:

Each week you will have one or two graded assignments/activities that are related to the skills covered in that week's contents and will be due on Monday night. You will learn mostly by writing the code on your own. The more you practice, the better you will learn.

  • Project:

You will do an individual project which is building a simple website from Week 6 to Week 8 (5 to 6 for Summer) using the skills you learn in this course and you have a lot of freedom to determine the theme of the website.

  • Exam:

There is a proctored final exam at the end of the term. The exam will be open from Sunday to Thursday of Week 11 for normal term and Week 8 for the summer term. Please reserve your proctor as early as possible to make sure you can get the time you want.

  • Piazza:

All of the course discussions will happen on Piazza. We will check the forum every day. Sometimes, if the question is not about the assignment requirement, we will hold our answers for a while to involve more students in the discussion. You are always encouraged to post on Piazza and participate in the discussions. Students who make contributions to the discussions on Piazza will potentially earn extra credit at the end of the term.

  • Slack:

We use Slack officially in this course.  We will watch the course Slack channel and answer your questions in a timely way.

  • Resources:

We will post some resources that might be used as supplementing materials in the resources module and we will update this page throughout the term.

  • Code Sharing Page:

After each assignment is graded, we will select some good code examples and post them on the code sharing page for you to review.

  • TA online office hours:

We will have several sessions available from Week 1 to Week 10 (Week 7 for Summer). Office hours are the best time to get instant and detailed feedback on your code. Make good use of them and get most from it. If none of the time slots work for your schedule, let us know and we may be able to make accommodations.

Our Expectations

8 weeks will be very short for learning web development since we have so many things to cover.

It is my expectation that you keep up with your coursework and finish the assignments on time. More importantly, be honest to yourself. No cheating anytime.

Please go over all the content in the "Start Here" module. Read the course policy carefully. Finish the course policy quiz and get full points to unlock week one module. There are some useful links under the resources module. Please check them out as well.

Meet the instructor:

 

Download the syllabus here: syllabus.pdf

Course Name: Web Development

Course Number: CS 290-400

Credits: 4

Terms Offered: Every Term

Course Description

In this course, we will mostly talk about the frontend web development skills and a few backend techniques. We will be covering topics like HTML, CSS, JavaScript, Node.js and Mysql.  We will spend most of the time talking about JavaScript.

Prerequisites: CS 162 or CS 165

Dr. Luyao Zhang, Instructor

Course Topics

This course is divided into three main sections which are largely addressed sequentially:

Layout and Styling
The first portion of the class focuses on the static layout and styling of a web page (HTML/CSS). For some, this may be a review if you have done web publishing in the past. There is quite a bit of information to take in here but the problems to solve are not that intricate.
Client Side Interaction
The second portion of the class focuses on JavaScript and making interactive web pages in the browser. Things like forms that will display an error message if a password is too short or creating a drop down menus are things that will be covered in this portion of the class.
Server Side Interaction
In this portion of the class, we look at using a very simple database to store data between website visits. The technologies we will be using this term are Node.JS and MySQL. In addition, we look at how we can track a user and data from page to page which is a critical first step in designing more complex systems like shopping carts for an online shopping website.

Course Schedule

You can see the assignment due dates on Canvas directly.  You can also download it here: schedule2020summer.pdf

Topics by Weeks

Week

Topic(s)

Due

1

Web Overview and Intro to Tools

HyperText Markup Language and Cascading Style Sheets

HW1 Node.js and Git

HW2 HTML/CSS

Course policies quiz

2

 Introduction to JavaScript

Activity1 JS Environment

Activity2 JS Functions

Activity3 JS Objects

3

 JS Functions and Objects

HW3 Higher-Order Functions and Objects

Activity4 Fixing Closure Loop

4

JavaScript and the DOM

JavaScript and HTTP (forms)

HW4 DOM and Events

Activity5 Ajax Interactions

Project Proposal

5

Intro to Node.js

Sessions and HTTP

HW5 GET and POST checker

Activity6 Practice

6

Database Interaction

Project

7

Wrap up

HW6 Database interactions and UI

Sample quiz

8

Final

Final Exam


Textbooks

Required: Eloquent JavaScript http://eloquentjavascript.net/

Optional: Jon Duckett's "HTML and CSS design and build websites", ISBN-13: 978-1118008188, ISBN-10: 1118008189

 

Assignments

This course has three types of assignments:

HW Assignment:
You will have six assignments this term, each is given one week to finish (except the last one, you will have 12 days).  You will write a website or make some functions using required techniques to meet the constraints.  The assignments will be graded on how well they meet the requirements.
Activity:
The activities are graded as pass/fail (10/0). Generally, if 60%+ of the activity is correct you will get a PASS otherwise it will be a fail. For example, if the activity has two requirements and you don't do one of them you would only have 50% of the activity completed so would receive a 0.
Project (Portfolio Assignment):
This is a research-based project.  You need to build a website based on the knowledge you learn in this course to meet some requirements. This will also be a wonderful piece to add to your student portfolio when applying for jobs or internships.

Syllabus Quiz

After you have gone over all the information in the Start Here module, you need to take the course syllabus quiz and score a 100% before the Week 1 module will unlock: syllabus quiz

 

Exam

This course has one proctored exam -- the final exam.  You can find out more about proctoring at the Ecampus page on exam proctoring (Links to an external site.).

The final exam window will run from the Sunday before the start of finals week through Thursday of finals week. If you are unable to take the exam in that window, you must make arrangements prior to the end of the 2nd week of classes. Beyond this deadline, only emergency situations will be considered for alternate testing times.

Where possible, we suggest using an in-person proctor. Should an issue arise, it is historically a lot easier to get it resolved at a testing center than with other online proctoring service.  If you do use ProctorU and an issue does arise, please document the situation as thoroughly as possible and forward that to the instructor as soon as possible.

 

Grading Policy

Grade letter Percentage floor
A 93
A- 90
B+ 87
B 83
B- 80
C+ 77
C 73
C- 70
D+ 67
D 63
D- 60
F 0

Grading Scale

The final grade will be computed using a weighted average according to the table above and the weighting below.

In general, assignments are not graded such that each piece is worth some fixed amount of credit. If 40% of the program is non-functional, that generally indicates that there is some important concept that has been missed. 

Grade Weighting

  • Activities/Exercise - 25%
  • Homework Assignments - 50%
  • Project - 10%
  • Final Exam - 15%

Maximizing Credit

You should treat me as a client. I will give you a set of requirements. Requirements can be interpreted differently, this is unavoidable. You have to meet my interpretation of the requirements to get an A. If you have any doubt about what a requirement means, you should ask me to clarify.

Accommodations

"Accommodations are collaborative efforts between students, faculty and Disability Access Services (DAS). Students with accommodations approved by DAS are responsible for contacting the faculty member in charge of the course prior to or during the first week of the term to discuss accommodations. Students who believe they are eligible for accommodations but who have not yet obtained approval through DAS should contact DAS immediately at 541-737-4098."

Students with documented disabilities who may need accommodations, who have any emergency medical information the instructor should be aware of, or who need special arrangements in the event of an evacuation, should make an appointment with the instructor as early as possible, and no later than the first week of the term. Class materials will be made available in an accessible format upon request.

If you have a really tough situation that might affect your progress a lot (illness, job duties, family emergency...), you should contact the instructor immediately.  Don't wait until the due date or even past the due date to explain your personal situations and ask for extensions.  If you are not sure whether to ask for it, better do it.

 

Late Policy

Requests for extensions are considered on a case by case basis. Non-emergency requests must be submitted via email at least 72 hours before the due time. (Not having enough time to get the assignment done does not, by itself constitute an emergency, sorry!). If you don't know if you will need an extension but might, you should ask for one.

Time elapsed past due date Penalty Applied (if no extension is granted)
T < 24 hours -10%
T < 48 hours -20%
T < 1 week -30%

Bonus Days

You have 3 bonus days that you can apply to any activities or assignments (except the final assignment).  You can use it all at once for one assignment (if you are late for 3 days), or split it and use one day each for three assignments  (no "half" day).

How to apply the bonus day: leave a comment on Canvas under that assignment submission, saying that you would like to apply x bonus days for this late submission, and you have y bonus days left after that.  When TAs are applying the late penalty, they will look at your submission time and your comments.  If you don't leave a comment there, TAs will directly apply the late penalty.

 

Extra Credit

There is extra credit in some of the assignments.  Try to get them when possible.  At the end of the term,  I will give extra credit (0.5 to 2 maximum points) to those who are active on Piazza answering questions and sharing notes with others.

 

Code Sharing

You will not get in trouble for sharing code with your classmates in order to solve problems. The communication guide actually mandates that you share portions of your code if you want to ask a good question. If you are worried that you are posting too much code, mark it private and ask the instructor to review it. Note that this is a more permissive policy than the standard policy for the program (Links to an external site.).

You will get a great deal of trouble if you copy code without citing it. See the policy on plagiarism (Links to an external site.). Code from lectures is not your own, code from StackOverflow is not your own, code from the Mozilla documentation is not your own. If it is not your code,  you must cite it. If you cite it, you must provide documentation in very great detail of what it is doing so that I know you understand the code you are using.

Academic Misconduct

The Code of Student Conduct prohibits Academic Misconduct and defines it as:

Any action that misrepresents a student or group’s work, knowledge, or achievement, provides a potential or actual inequitable advantage, or compromises the integrity of the educational process.

To support understanding of what can be included in this definition, the Code further classifies and describes examples of Academic Misconduct, including cheating, plagiarism, assisting and others. See the Code of Student Conduct for details.

You are expected to do your own work and demonstrate academic integrity in every aspect of this course. Familiarize yourself with the standards set forth in the OSU Code of Student Conduct Section 4.2. You must only access sources and resources authorized by the instructor. You may not show your work to any other current or future students without the instructor’s authorization. Violations of these expectations or the Code of Student Conduct will be reported to the Office of Student Conduct and Community Standards. If there is any question about whether an act constitutes academic misconduct, it is your responsibility to seek clarification and approval from the instructor prior to acting.

Code Style

In this course, we follow the Google style guide for the HTML/CSS/JS code:

https://google.github.io/styleguide/htmlcssguide.html (Links to an external site.)

https://google.github.io/styleguide/jsguide.html

 

Dr. Luyao Zhang, Instructor

Communication Policy

  • Always use your OSU email to contact us.  The Canvas mailbox doesn't work very well. 
  • When you send me an email, you must include the tag "[CS 290]" in your email subject.

You should expect a response to emails within 48 hours. Emails sent over the weekend sometimes take longer to respond to.

Post all course-related questions on the Piazza board so the whole class may benefit from our conversation.  Please sign up yourself on Piazza sign up. You can use the course Slack channel to ask questions as well.  

For grading questions, please post a private Piazza message to the "instructors"; do not email directly for grading questions.  To help with response time, please also tag your grading TA in the Piazza thread using the @ symbol. You should expect your grade to be posted after one week of the due time.  If you submit the assignment late, it may take longer for your grade to be released.

The instructional team will be using the class mailing list extensively to communicate with you. We will also frequently post information on Piazza. It is your responsibility to keep up-to-date with these communiques and they are considered part of the required learning material.

  • Resources:

We will post some resources that might be used as supplementing materials in the resources page and we will update this page throughout the term.

  • Code Sharing Page:

After each assignment is graded, we will select some good code examples and post them on the code sharing page for you to review.

  • TA online office hours:

We will have several sessions available each week from Week 1 to Week 10.  Office hour is the best time to get instant and detailed feedback on your code. Make good use of them and get most from it.  If none of the time slots work for your schedule, let us know and we can make accommodations. For TAs' email address, office hour time and link, please check the "Instructor & TAs Communication Policy and Information" in the Start Here module. 

  • Piazza:

All of the course discussions will happen on Piazza.  We are watching the forum every day.  Sometimes, if the question is not about the assignment requirements, we will hold our answers for a while to involve more students in the discussion.  You are always encouraged to post on Piazza and participate in the discussions. Students who make contributions to the discussions on Piazza will get extra credit at the end of the term.  Please sign yourself on the Piazza forum.

  • Slack:

We will use Slack officially in this course as well.  We will be watching the course Slack channel and answer your questions in a timely way.  The workspace of this course on Slack is class-cs290-400-su20. For more information about Slack, please check Slack-How to in the start here module.

 

In this course, JavaScript will be used for both the front end and the back end (with Node.JS), so this will end up being the primary focus of the class.

The book we will be using for JavaScript is Eloquent JavaScript and a free online edition is here (http://eloquentjavascript.net/ ).

Physical copies exist if you prefer and can be ordered from Amazon. There will be required reading from this book along with programming exercises.

Students in the previous terms also suggested this book for JavaScript: You don't know JS . It would be a great book to read if you are new to JavaScript.

HTML/CSS is another component to this class. Currently the books on the subject are a bit of a mess. The transition to HTML5 is pretty much done but there is a delay between a technology being adopted and publishers actually getting books on the topic to market. In addition it is a less complex topic than many other programming languages.  So I am not requiring any books on the subject, instead I will offer several online resources.  If you really want a book, I would suggest Jon Duckett's "HTML and CSS design and build websites". It does not have great HTML5 coverage, but is very visual in its presentation of material which can be a big benefit.

Node.JS is a very modular system so books are either too narrow or too broad in scope either missing the modules used in the class or covering them in very minimal detail. A solid understand of JavaScript should alleviate the need for a book here.  However, if you would like to read a book on this part, I will suggest this book to read: Web Development with Node and Express: Leveraging the JavaScript Stack 1st Edition by Ethan Brown.

Besides the textbooks listed here, we also have a resource page on Canvas: Useful links

There are many useful links organized in this page.  I add links that students find to be useful and post on Piazza to this list every term.  You should check this list for more resources.

 

Reading List

Here is the reading list of the whole term if you want to read ahead:

 Eloquent JavaScript Chapter 13

Mozilla's HTML Intro  

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction

Mozilla's CSS Intro https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

 Eloquent JavaScript Chapters 1-4

Eloquent JavaScript Chapters 5 and 6

Eloquent JavaScript Chapters 13, 14, 15

Eloquent JavaScript Chapter 18

http://expressjs.com/

https://github.com/ericf/express-handlebars

http://handlebarsjs.com/

https://github.com/expressjs/session

https://github.com/request/request

The official documentation for Node's MySQL module.

https://github.com/felixge/node-mysql

W3Schools SQL http://www.w3schools.com/sql/default.asp

 

NOTE: Some links on this page may only be accessible to registered students.

Course Summary:

Date Details Due