About the Instructor

Pam Van Londen
541-737-8627
1105 Kelly Engineering Center
Corvallis, OR 97331, USA
Email via Canvas Inbox

Introduction

Credits: 4.

Contact Hours: Online only, for 11 weeks (8 weeks during Summer Session).

Prerequisites: CS 162 or CS 165.

Catalog Description: How to design and implement a multi-tier application using web technologies: Creation of extensive custom client- and server-side code, consistent with achieving a high-quality software architecture.

Categorization: Required for some programs.

Instructor: Pam Van Londen, Sr. Instructor, OSU

In this 11-week course (8 weeks during Summer Session), we will cover the frontend and backend of web development. You'll learn about the browser, using VS Code and its built-in terminal, and many languages and libraries, such as HTML, CSS, JavaScript, Node, Express, React, Mongoose, MongoDB, and REST. Your attention will be needed several days per week so that you may deliver assignments on time with high proficiency. Instead of a final exam, you'll take weekly quizzes to help you focus on the most important concepts.

Help and Communication Policy

Help Sessions are posted on Canvas Home. They are updated frequently. Questions sent via Gmail or Outlook Inbox may end up in the spam folder. :-(

Seek help by following this sequence of options:

  1. 1. Content Questions

    Ed Discussion Ed Discussion Search for and read posts related to your content questions (24/7). Assignment Tips will be pinned at the top of the feed. If your question has not already been answered, then post it (anonymously, if you like), and we'll answer within 24 hours (usually).

    Response time is usually 1 day.
  2. 2. Scheduled Help Sessions

    MS Teams MS Teams Chat Work privately with a TA for help with coding and concepts.

    Zoom Zoom A group of students can watch a quick demo, ask content/code questions, and help troubleshoot.
  3. 3. Quiz & Assignment Questions

    Canvas Comment box Canvas > Grades > Assignment > Comment Box. If you would like more information about your Quiz responses, or if your score seems inaccurate, ask politely for the instructor to review it.

    Response time is usually 3 days.
  4. 4. Personal Questions

    Canvas Inbox Canvas Inbox Contact the Instructor if you have an emergency and need more time.

    Questions sent via Gmail Inbox may end up in the spam folder. :-(

    Response time is usually 1 day.
  5. 5. Surveys

    Canvas Canvas Surveys Let the instructor know how you felt about the content of the Explorations.

    Response time is usually 1 week.

Course Learning Outcomes (CLOs)

Upon completion of this course, students will be able to:

  1. Describe the architectural elements of effective web applications, as well as key threats to relevant architectural quality attributes.
  2. Demonstrate implementation of extensive custom functionality across multiple tiers.
  3. Evaluate which architectural strategies to apply, and in what manner, to address a given set of quality requirements, with particular emphasis on… 1) Scalability, 2) Usability, 3) Security.
Learning Outcomes Objectives (Assignments and Quizzes)
Describe the architectural elements of effective web applications, as well as key threats to relevant architectural quality attributes.
  • HTTP and URL quiz, FTP assignment.
  • Frontend design, usability, and HTML quiz, page layout assignment.
  • Images, color, Favicon, and CSS quizzes.
  • Node, Express, and security quiz.
  • JavaScript, DOM, and Async quizzes.
  • MongoDB and scalability quiz.
  • React and Full Stack MERN Quizzes.
Demonstrate implementation of extensive custom functionality across multiple tiers.
  • Assignment 1: Transfer a file to a web server, which uses SSH and browser Web Dev Tools.
  • Assignment 2: Add semantic HTML page layout and navigation, which builds on the previous assignment.
  • Assignment 3: Add images and a favicon, which provides visual content for the previous assignment.
  • Assignment 4: Add style, which improves the user experience for the previous assignment.
  • Assignment 5: Add a contact form, which incorporates Node and Express to send data input.
  • Assignment 6: Add an order form, which incorporates JavaScript to respond with order data.
  • Assignment 7: Portfolio backend, which performs CRUD (create, review, update, and delete) on student's chosen data topic, using Express, MongoDB, Mongoose, and REST.
  • Assignment 8: Portfolio frontend full-stack MERN app, which converts the previous static website into a React frontend and becomes the user interface for CRUD performed on the existing backend.
Evaluate which architectural strategies to apply, and in what manner, to address a given set of quality requirements, with particular emphasis on… 1) Scalability, 2) Usability, 3) Security.
  • Assignment 8: Portfolio frontend full-stack MERN app, which converts the previous static website into a React frontend and becomes the user interface for CRUD performed on the existing backend.
  • Frontend design, usability, and HTML quizzes, page layout assignment.
  • Node, Express, and security quiz.
  • MongoDB and scalability quiz.
Bloom's New Taxonomy for 2024 includes a comparison between AI and Human skills, as well as to the assignments in CS 290

Course Schedule of Modules

OSU's definitions and guidelines for quarter credits 120 hours of your time will be needed to read and understand the Explorations, participate in exercises, take quizzes, and complete assignments for this 4-credit course (that's 12 hours per week) for the first 10 weeks.

In the Summer Session 8-week intensive sections, expect to spend more time per week to finish up in the compressed timeframe.

Due dates are listed in the Modules, Course Stream, Calendar, and Grades areas of the Canvas course.

Weekly Objectives and Total Points
Week Objectives Points
1
  1. Syllabus
  2. Syllabus Quiz. (5pts)
  3. Set up software.
  4. Module 1 Explorations and Exercises ~ Intro to Web Dev, HTTP Requests, Responses, and the URL.
  5. Module 1 Quiz. (10pts)
  6. Assignment 1 due ~ Transfer a file to a web server (14pts)
  7. Module Survey
29 points
2
  1. Module 2 Explorations and Exercises ~ Frontend Design and HTML
  2. Module 2 Quiz. (10pts)
  3. Assignment 2 Due ~ Add Page Layout and Navigation (20pts)
  4. Module Survey
30 points
3
  1. Module 3 Explorations and Exercises ~ Images, Color, and Favicons
  2. Module 3 Quiz. (10pts)
  3. Assignment 3 due ~ Add Images and Favicons (35pts)
  4. Module Survey
45 points
4
  1. Module 4 Explorations and Exercises ~ CSS
  2. Module 4 Quiz. (10pts)
  3. Assignment 4 due ~ Add Style (25pts)
  4. Extra Credit Writing (3pts)
  5. Module Survey
35/38 points
5
  1. Module 5 Explorations and Exercises ~ Node, Express, and Forms
  2. Module 5 Quiz. (10pts)
  3. Assignment 5 Due ~ Process Contact Form Data (26pts)
  4. Extra Credit Writing (3pts)
  5. Extra Credit NodeMailer (5pts)
  6. Module Survey
36/44 points
6
  1. Module 6 Explorations and Exercises ~ Intro to JavaScript
  2. Module 6 Quiz. (10pts)
  3. Assignment 6 due ~ Process Order Form data (25pts)
  4. Extra Credit Writing (5pts)
  5. Module Survey
35/40 points
7
  1. Module 7 Explorations and Exercises ~ DOM, Asynchronous Programming
  2. Module 7 Quiz. (10pts)
  3. Extra Credit ~ Manipulate the DOM with a Dataset API (17 points)
  4. Module Survey
10/27 points
8
  1. Module 8 Explorations and Exercises ~ MongoDB, Mongoose, REST
  2. Module 8 Quiz. (10pts)
  3. Assignment 7 due ~ Required Portfolio Backend (14pts)
  4. Module Survey
24 points
9
  1. Module 9 Explorations and Exercises ~ React and Full Stack MERN
  2. Assignment 8 Starts ~ Required Portfolio Frontend for CRUD (MERN)
  3. Student Learning Experience (SLE) Survey Due
0 points
10/11
  1. Assignment 8 Due ~ Required Portfolio Frontend and Backend (MERN) (40pts)
  2. Extra Credit options (15 pts)
  3. Contribute to the Ed Discussion Gallery (0ptional)
  4. Module Survey
40/55 points
294/330 Total Points

Evaluation of Student Performance

Late assignments

Each assignment must be submitted before the Due date and time as specified on the Modules list. The Available Until date and time constitutes a grace period, which can be used in an emergency, or if you are ill (it cannot be used for every assignment or for vacations). Students who submit using the Available Until date will incur a score reduction of 5% per day late.

If you need an extension due to extenuating circumstances, please request it in writing via the Canvas Inbox before the Due date.

Notify your instructors right away when there is a personal crisis. Some of us will waive the late penalties when students check in before Due dates. When they come afterword, however, we are less sympathetic. Just like with any employment, you'll be expected to check in immediately when a personal crisis will require a deadline extension.

Students with a DAS Flexibility Contract will have 72 hours to submit their work via file attachment in the event of a medical issue.

Academic Integrity ~ Avoid Cheating

This course will require you to submit coded assignments. Here is a list of things you may copy and those you may not:

➕ You may copy this ↓ ❌ But not this ↓
Comments from starter code. Comments exactly like the Help Session/Office Hours demonstrations. Add your own comments, using your native language, to help you understand what the code is doing.
Code snippets and functions from the written Explorations, videos, and Ed Discussion. Rename functions to aid your understanding. Avoid copying demo videos exactly. Code snippets found in websites that are not listed in the Explorations or Ed Discussion. Unsure? Ask the instructor.
Code Snippets from standard library references. Code snippets from other people's completed projects. Code Snippets for AI Chat. Do your own work. Unsure? Ask the instructor.
Stylesheet selectors and property names. Stylesheet property values, such as colors, fonts, sizes, and spacing. Always experiment and choose your own designs.

Templating systems such as Bootstrap, Materials Design, etc. Demonstrate that you can write CSS rules yourself.

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, as follows.

Prohibited behaviors include, but are not limited to doing or attempting the following actions:

Incompletes

Incomplete (I) grades may be granted only in emergency cases (usually only for a death in the family, major illness or injury, or birth of your child), and if the student has turned in 80% of the points possible (in other words, usually everything but the final project). If you are having any difficulty that might prevent you from completing the coursework, please don’t wait until the end of the term to communicate with the instructor; let them know right away.

Materials & Tools

Textbook and Resources

Optional free online textbooks:

JavaScript for impatient programmers.
Dr. Axel Rauschmayer. 2022 edition
Eloquent JavaScript.
Marijn Haverbeke. No Starch Press. 2018. ISBN-13: 9781593279509

Applications

Install and/or sign-in to these applications:

References

Add these supporting websites to separate TABS in your browser, as needed:

Internet Service

Learn more about internet service for different situations:

OSU no longer requires/recommends Virtual Private Network (VPN) when using a public Wi-Fi connection to access Canvas. If you are handling sensitive or confidential data, use of the VPN from off-campus is required to secure your connection and protect the data you access.

Read about why you might need it, then direct all technical difficulties to the OSU Service Desk.

OSU Accounts

The following accounts must be set up and running before class begins:

  1. DUO 2-factor authentication access.
  2. Canvas.
    Access Canvas using this URL: canvas.oregonstate.edu. (Requires DUO 2-factor authentication.)
  3. Zoom will be used for group Help Sessions.
  4. Ed Discussion is available via your Canvas course login.
  5. MS Teams is available via your Canvas course login.
  6. Engineering Account (to access the web server).

Back up your working files every time you finish a session by Zip/archiving the current chapter's assignment folder and dragging it to one of the OSU cloud drives. Login to a cloud drive with your OSU ONID credentials.

If your internet service goes down, you can submit assignments using the Canvas phone app (iOS or Android), your phone's hotspot capability, and a backup .zip archive, which you've placed on one or more cloud drive:

Failure to back up your work will not be a valid excuse for delivering assignments late.

Hardware

A laptop or desktop computer is needed (MacOS, Windows, or Linux). Tablet and Chromebook computers will probably not suffice for any of the learning activities. Consult the OSU Library if you need to borrow a laptop.

 

Style Guide

Writing | Coding | Visual

Writing Style

Last updated on 06/8/2023

Assume all writing for this course will be shared with your future employers, who are expecting excellent, concise but detailed, and accurate writing.

Remember:

Coding Style

In this course, we recommend these coding conventions:

Visual Design Style

You will not be judged on your visual design style. However, if we cannot read the text or images of your website projects, then instructional feedback and score markdowns will be provided in the Rubrics.

Visual materials should reflect your personality but remain professional...what would you want to show a future employer?

Methods for achieving decent style are provided in the Explorations, but you must customize the values of most of the properties to experiment and not copy exactly what is presented.

Illegible text on a busy background is illegible, but proper color contrast behind the text will improve readability.

Statements of Expectations

Land Acknowledgement

Oregon State University in Corvallis, Oregon, is located within the traditional homelands of the Mary’s River or Ampinefu Band of Kalapuya. Following the Willamette Valley Treaty of 1855, Kalapuya people were forcibly removed to reservations in Western Oregon. Today, living descendants of these people are a part of the Confederated Tribes of Grand Ronde Community of Oregon (grandronde.org) and the Confederated Tribes of the Siletz Indians (ctsi.nsn.us).

Establishing a Positive Community

It is important you feel safe and welcome in this course. If somebody is making discriminatory comments against you, sexually harassing you, or excluding you in other ways, contact the instructor, your academic advisor, and/or report what happened at Student Conduct Reporting, so we can connect you with resources.

Remember that when you communicate online, you cannot provide eye contact and body language to help explain yourself, so your message may be misunderstood. Sometimes the thread of a message is lost, making readers rely on memory (which is often faulty). And if you need the reader to act on your request, good manners will help you be successful. Use the following to ensure you communicate professionally.

Emotional & Cultural Intelligence

The following is adapted from Dr. Susan Shaw, Oregon State University

Student Conduct: This manual provides the purpose, definitions, jurisdiction, responsibilities, prohibited conduct, process and procedures, sanctions, authorities, and appeals students must know in order to succeed at OSU.

Cyberbullying on the College Campus: Understand the different types of cyberbullying and how to avoid them.

Student Bill of Rights: OSU has twelve established student rights. They include due process in all university disciplinary processes, an equal opportunity to learn, and grading in accordance with the course syllabus.

Religious Accommodation Process: Oregon State University is required to provide reasonable accommodations for employee and student sincerely-held religious beliefs. It is incumbent on the student making the request to make the faculty member aware of the request as soon as possible prior to the need for the accommodation. See the for Students.

Services

Students with Disabilities:
Accommodations for students with disabilities are determined and approved by Disability Access Services (DAS). If you, as a student, believe you are eligible for accommodations but have not obtained approval please contact DAS immediately at 541-737-4098 or at http://ds.oregonstate.edu. DAS notifies students and faculty members of approved academic accommodations and coordinates implementation of those accommodations. While not required, students and faculty members are encouraged to discuss details of the implementation of individual accommodations.

CoE Wellness Resources:
Anytime Anywhere: MySSP @ OSU App. My Student Support Program is a phone app that gives all OSU students, including Ecampus students, 24/7 access by text or phone with a licensed mental health counselor. Schedule short-term counseling appointments with the same ongoing counselor and read educational materials. Students can communicate with a counselor in five different languages (Mandarin, Cantonese, French, Spanish or English); additional language options are available upon request.

Reach Out for Success (on-campus students): University students encounter setbacks from time to time. If you encounter difficulties and need assistance, it’s important to reach out. Consider discussing the situation with an instructor or academic advisor. Learn about resources that assist with wellness and academic success at oregonstate.edu/ReachOut. If you are in immediate crisis, please contact the Crisis Text Line by texting OREGON to 741-741 or call the National Suicide Prevention Lifeline at 1-800-273-TALK (8255).

Reach Out for Success (online students): University students encounter setbacks from time to time. If you encounter difficulties and need assistance, it’s important to reach out. Consider discussing the situation with an instructor or academic advisor. Learn about resources that assist with wellness and academic success. Ecampus students are always encouraged to discuss issues that impact your academic success with the Ecampus Success Team. Email ecampus.success@oregonstate.edu to identify strategies and resources that can support you in your educational goals.
Tutoring Assistance
On-campus students can utilize the OSU College of Engineering Tutoring Center when they need programming assistance.
Online students can utilize the Canvas > TutorMe option.

Technical Assistance: OSU Service Desk and Accounts:
Get help and learn more about your OSU technologies. If you experience any errors or problems while in your online course, contact 24-7 Canvas Support through the Help link within Canvas. If you experience computer difficulties, need help downloading a browser or plug-in, or need assistance logging into a course, contact the IS Service Desk for assistance. You can call (541) 737-8787 or visit the IS Service Desk online.

Academic Calendar
All students are subject to the registration and refund deadlines as stated in the Academic Calendar.

Student Learning Experiences Survey:
During Fall, Winter, and Spring term the online Student Learning Experience surveys open to students the Wednesday of week 9 and close the Sunday before Finals Week. Students will receive notification, instructions, and the link through their ONID email. They may also log into the survey via MyOregonState or directly. Survey results are extremely important and are used to help improve courses and the learning experience of future students. Responses are anonymous (unless a student chooses to “sign” their comments, agreeing to relinquish anonymity of written comments) and are not available to instructors until after grades have been posted. The results of scaled questions and signed comments go to both the instructor and their unit head/supervisor. Anonymous (unsigned) comments go to the instructor only.