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.

Outcomes

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

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

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.

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

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

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, or similar)
• Primary and alternate browsers (Firefox, Chrome, Safari, Edge)
• Wireframing tool (XD, Figma, or Sketch)
• Adobe CC applications (Illustrator, Photoshop)
• FTP application (Cyberduck, Filezilla, Transmit, or similar)
• Discord
• Zoom
• Camera and microphone

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
• Assignment: Responsive Homepage
• CSS Grid and Whole-page Layout
• CSS Frameworks
• Contact Form Solutions
• HTML Forms - Design and Best Practices
• Assignment: Landing Page
• Bootstrap Setup and Tips
• Optimizing Images and Video
• Advanced Typography
• Content Management Systems (CMS's)
• Basic SEO Techniques
• SVG and Greensock (GSAP)
• 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

Character Profile

Create a profile page for a fictional character of your choice.

Purpose:

• Practice building a fully responsive layout using vanilla CSS
• Understand file organization conventions and FTP deployment
• Learn best practices for creating clean, intuitive URLs

Responsive Homepage

Create and deploy homepage for your student work.

Purpose:

• Practice building a fully responsive layout using vanilla CSS
• Understand file organization conventions and FTP deployment
• Learn best practices for creating clean, intuitive URLs

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

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. Build or Consume From 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.

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.

Thu 2023-08-31

• Day 1 Introductions, Course Overview
• Discord and VSCode setup
• Assignment: Character Profile

Thu 2023-09-07

• Web 1 Review
• Demo: Flexbox
• Work period

Thu 2023-09-14

• Demo: CSS Grid and whole-page layout
• Work period

Thu 2023-09-21

• Assignment: Character Profile
• Assignment: Responsive Homepage
• Assignment: Landing Page
• Topic: CSS Frameworks
• Demo: Bootstrap Setup and Tips

Thu 2023-09-28

• Assignment: Responsive Homepage
• Topic: Contact Form Solutions
• Topic: HTML Forms - Design and Best Practices
• Work period

Thu 2023-10-05

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

Thu 2023-10-12

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

Thu 2023-10-19

• Work period

Thu 2023-10-26

• Assignment: Animation in the Browser
• Assignment: Final Project - Infographic or Narrative
• Assignment: Final Project - Build or Consume From an API

Thu 2023-11-02

• Demo: Windows Dev Setup Using WSL2

Thu 2023-11-09

• Topic/Demo: Dynamic Websites
• Topic/Demo: APIs and Structured Data
• Topic: HTTP and URL Structure (reading)

Thu 2023-11-16

• Demo: Terminal Configuration
• Topic: What Is the Command Line?
• Demo: Command Line 101

Thu 2023-11-23

Off, Thanksgiving

Thu 2023-11-30

• Topic: Package Managers
• Topic: Separating Data from Application Code
• Topic/Demo: Databases

Thu 2023-12-07

• Topic: Flask Project Setup and Virtual Environments
• Topic: Templates (Jinja2)
• Work Period

Fri 2023-12-15 (5:00-7:50pm)

• Assignment: Final Project - Infographic or Narrative
• Assignment: Final Project - Build or Consume From an API

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.