Syllabus

Course Description

This "Web 2" course is a hybrid of IMM230 and AAV355. It is a survey of current tools and practices for building production-ready websites. Extending the foundational skills and concepts of Web 1, this course introduces students to the parts and functions of the "full stack" of a dynamic web application. The course is project based, research focused, and collaboration oriented. Best practices in accessibility and media production are also covered. Due to its constantly evolving nature—an overarching verity of the web—this course is largely about navigating how to learn about web design.

For context:

IMM230 focuses on "back end" development, providing a programmer's perspective understanding of the parts and functions of dynamic web applications. The primary goal is for students to be ready to learn any of the wide variety of technology stacks used in the field.

AAV355 focuses on "front end" development. It is a survey of modern templates, tools, and frameworks, emphasizing practical skills ready to employ in the field. The primary goal is for students to be able to build both static and CMS-based websites for clients.

While designers and developers in the industry specialize in different areas, there is a great deal of shared, requisite, high-level knowledge. It is essential for web designers and developers alike to understand the full stack in order to effectively work in any part of it. This hybrid course aims to give students this broad understanding through the use of practical, modern tools and skills.

Venn diagram comparing the scope if IMM230 and AAV355 in the full stack components of dynamic web applications

Outcomes

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

  • Understand the high level parts and functions of a CMS (and most dynamic web applications)
  • Build and deploy static sites using modern hosting options, including serverless
  • Identify, articulate, and provide clarity on points of confusion or misconceptions
  • Effectively use documentation and online resources to learn and practice new techniques in the field of web design and development
  • Practice optimizing media and animation for performance and user experience

Class Format

Class will be held in person. Scheduled class blocks are highly valuable time for focused productivity. Attendance and engagement are critical to the success of both the individual student and the class as a whole.

Should the need arise, synchronous video meetings will be held during normally scheduled class blocks.

Canvas will be used for the majority of class content, assignments, announcements, and grades. Supplemental feedback on assignments may be sent via individual email.

Discord will be used to facilitate collaboration and discussion, both during and outside of scheduled class blocks.

Google Apps (Drive, Calendar, Email) will be used for file sharing, scheduling, and formal communication.

Materials and Tools

Course materials, resources, and readings will be published and updated on a week-by-week basis.

We will be using a variety of software and websites. Students must have a working computer (Mac or Windows) and internet to effectively use these tools.

  • Text editor (VSCode, BBEdit, Nova, Brackets, Atom, or similar)
  • Primary and alternate browsers (Firefox, Chrome, Safari, Edge)
  • Wireframing tool (XD, Figma, or Sketch)
  • Adobe CC applications (Illustrator, Photoshop)
  • Discord
  • Zoom
  • Camera and microphone
  • FTP application (Cyberduck, Filezilla, Transmit, or similar)

Topics and Assignments

Topics

This course is intentionally designed to adapt based on students' skills, needs, and collective interest. Here is a complete list of potential topics:

  • Web 1 Review
  • Discord and VSCode setup
  • CSS Grid and Whole-page Layout
  • CSS Frameworks
  • Contact Form Solutions
  • HTML Forms - Design and Best Practices
  • Bootstrap Setup and Tips
  • Assignment: Landing Page
  • Optimizing Images and Video
  • Advanced Typography
  • Content Management Systems (CMS's)
  • Basic SEO Techniques
  • SVG and Greensock (GSAP)
  • Assignment: Responsive Homepage
  • Assignment: Animation Videos
  • Animating SVG Using GSAP
  • Assignment: Animation in the Browser
  • Accessibility Tools
  • Assignment: Accessibility Research / Practice
  • Dynamic Web Application Structure
  • CLI 101 and Package Managers
  • APIs and Data Structures (e.g. JSON)
  • Databases
  • Low-code DBMS Alternatives
  • Assignment: APIs
  • Version Control Basics
  • Static Site Generators
  • Servers and Deployment Methods
  • Serverless Deployment
  • Assignment: Final Project

Assignments

Landing Page

Design and construct a landing page for a product or service of your choosing.

Purpose:

  • Understand the marketing terms and design goals surrounding landing pages
  • Practice building a responsive webpage leveraging a CSS framework

Responsive Homepage

Create and deploy homepage for your student work.

Purpose:

  • Additional practice building a fully responsive layout
  • Understand file organization conventions and FTP deployment
  • Learn best practices for creating clean, intuitive URLs

Animation in the Browser

Create a scroll triggered animation using svg shapes and the Greensock javascript library.

Purpose:

  • Practice preparing and exporting SVG
  • Practice embedding SVG content into an HTML layout
  • Learn the basics of Greensock and some of its animation features

Final Project

Students will choose an area of individual focus from the following:

  1. Infographic, Article, or Narrative
    • Practice CSS layout, either vanilla or using a framework
    • Another opportunity to work with animation
    • Practice visual storytelling in the web medium
  2. E-commerce Site
    • Work with a CMS (e.g. Squarespace)
    • Geared toward designers planning to move into freelance work
  3. Consume From or Build an API
    • Research-oriented project
    • Document questions and learning
    • Present on what was learned
    • Work with a backend framework (e.g. Python Flask or Node Express), or a reactive frontend framework (e.g. Vue.js)

Grading

Grading will be on a points based system without weighted categories. Learning activities will be given total point values relative to their requirements and allotted time. Participation and engagement will be incorporated into the grading criteria for each assignment.

Points Value Assignment
100 pts Landing Page
20 pts Responsive Homepage
60 pts Animation in the Browser
100 pts Final Project
5-10 pts Misc. participation prompts and exercises

Goals, detailed instructions, and grading criteria will be included with each assignment's description.

Late work may be accepted solely at the professor's discretion, with a grade reduction depending on the circumstance. It is the student's responsibility to communicate the need and reason for any extension in a timely manner.

Tentative Schedule

Due to both the dynamic nature of this course and the varied knowledge and experience of its students, the schedule will adapt as needed.

Tue 2022-08-30

  • Day 1 Introductions, Course Overview

Tue 2022-09-06

Off, follow Monday schedule

Tue 2022-09-13

  • Web 1 Review
  • Discord and VSCode setup
  • Assignment: Landing Page

Tue 2022-09-20

  • Demo: CSS Grid and whole-page layout
  • Topic: CSS Frameworks

Tue 2022-09-27

  • Topic: Contact Form Solutions
  • Topic: HTML Forms - Design and Best Practices
  • Demo: Bootstrap Setup and Tips
  • Work period

Tue 2022-10-04

  • Assignment: Landing Page
  • Assignment: Responsive Homepage
  • Topic: SVG and Greensock (GSAP)
  • Assignment: Animation Videos
  • Assignment: Animation in the Browser

Tue 2022-10-11

Off, fall break

Tue 2022-10-18

  • Assignment: Responsive Homepage
  • Assignment: Animation Videos
  • Demo: Animating SVG Using GSAP

Tue 2022-10-25

  • Work period

Tue 2022-11-01

  • Assignment: Animation in the Browser

Tue 2022-11-08

  • Topic/Demo: Dynamic Web Application Structure
  • Topic/Demo: CLI 101 and Package Managers
  • Assignment: Final Project

Tue 2022-11-15

  • Topic: APIs and Data Structures (e.g. JSON)
  • Assignment: APIs

Tue 2022-11-22

  • Topic/Demo: Databases
  • Topic: Low-code DBMS Alternatives
  • Assignment: APIs

Tue 2022-11-29

  • Topic: Version Control Basics
  • Topic/Demo: Static Site Generators

Tue 2022-12-06

  • Work period

Fri 2022-12-16

  • Assignment: Final Project

Diversity, Equity, and Inclusion

TCNJ is committed to diversity, equity, inclusion, access, and belonging:

https://diversity.tcnj.edu/campus-diversity-statement/

We commit to treating each other with civility and respect, and working together in a spirit of fairness and cooperation. Our individual commitment to inclusiveness requires that each of us becomes aware of our own assumptions about human behaviors, biases, preconceived notions and personal limitations. Collectively, we will have honest, yet respectful, discussions regarding different points of view pertaining to values and cultural issues. In our individual spheres of influence, we will engage in dialogue, activities, gatherings and conversations to ensure that we live out our commitment to inclusiveness. When we inspire those within our circles of influence to promote the importance of inclusiveness, we are poised to influence not only our campus, but also our local, national, and global communities.