Web Project Design and Development

Home

Welcome to Web Project Design and Development

Fall 2021, ISS 241 / VMS 257 / ISS/CMAC 741

Instructor and Office Hours

Instructor: Max Symuleski, Ph.D. (CMAC @ Duke, 2021)

Contact: max.symuleski@duke.edu

Office hours by appointment, please email.

Explore Student Websites

Overview

This course covers the design and development of user-centered and interactive projects for the web using HTML, CSS, and JavaScript. It builds on the material introduced in Fundamentals of Web-Based Multimedia Communications, and students should have prior experience with HTML/CSS.

JavaScript is the language for scripting user interaction in the web browser, from animating client-site UI components to full-stack apps built on Express/Node.js, and we will cover much of the ground between these. The first two weeks of the course will focus on a review of HTML/CSS and we will begin building toward the Midterm Project, a personal website with styling, layout, and one or two JS-enabled UI components. We’ll also create wireframes and cover the basics of UX research and user-centered design. Then, we’ll introduce JavaScript and work briefly with syntax and understanding the parts of the language before setting out to develop interactive final projects supported by JavaScript Libraries, Browser and Third-Party APIs, and FrameWorks like Node JS and React to build lightweight, scalable, and dynamic UIs for the web.

Expectations

The first secret of coding for the web is that you can teach yourself how to code for the web, on the web. In this course you’ll often be expected to help yourself by reading documentation, watching tutorials, consulting references, searching forums like Stack Overflow, and doing some plain old googling. In class, we will work together in a demo format and you will be expected to follow along on your own machine and learn by doing.

This is also a course in visual and media studies so we will be engaging in critical looking and critical making. Technical exercises for learning and building with HTML/CSS and JavaScript will be supplemented by readings on user-centered design and critical technical practice. You’ll be asked to notice the designed world around you in many exercises and activities, both on the web and off, and engage in constructive analysis and criticism of your own and your colleagues’ designs in the classroom.

While we will be taking snippets and other code from the web and using it in our own projects, you will be expected to keep track of what you borrow and take ownership over your own work. If you find a substantial amount of code elsewhere to integrate into your own work, unchanged, please cite your sources. You will be held to the Duke Code of Conduct for plagiarism.

Finally, if I could pick another title for this course I would have called it Super-User because of the ways in which you will be re-oriented to your computer and software you have probably used daily, at a higher level. Ultimately, this course is designed to provide you with the skills to be a critical consumer and producer of web-based technologies and inspire you to keep building.

Requirements

Technical Requirements
- A Personal Laptop computer
- Software
  - Visual Studio Code (free download), a code editor for creating and editing .html, .css, and .js files
  - Filezilla, a free FTP client for uploading/downloading content from a web server
  - Google Chrome or Firefox with Developer tools
  - Cisco AnyConnect, the Duke VPN software for logging into the Duke CIFS servers remotely
  - Adobe XD - this is available through the Duke Adobe Cloud
Computer / Server Set-up
- For the most part, we will be using the Duke CIFS server space to serve static web content. Set up your CIFS space with these instructions.
- We will also be making extended use of the Terminal Application (Mac), or the Windows Command Prompt (PC). This is a way of navigating files (and doing a bunch of other things) in your computer by text command, without the graphical user interface (GUI). In a way, Terminal is it’s own GUI, with text input instead of mousing around and clicking on icons. We will spend some time in class getting used to Terminal/Command Prompt, but to start you may want to check out these guides.
  - On PC use this guide for Command Line
  - On Mac use this guide for Terminal
User Accouts. This course involves some 3rd-party platforms for hosting our content on the web and hooking into APIs (Application Programming Interfaces). You may want to go ahead now and sign up for user accounts on the following if you do not have them already.
- Github. Github is a version control platform that also does other things, and hey, it’s what this website is hosted on! (secret: you can make a pretty decent website without writing one line of HTML/CSS or JS in Github pages). I’ll post all of the demo files from class on Git in the gh-pages branch of this repository.
  - You might also find the Github desktop a helpful way to upload and keep track of files on Git so you don’t have to do it in the Command Line.
  - LinkedIn Learning offers a good github tutorial for practice getting used to the interface. I’ll be using it a lot in demo as well.
- Google/Google Analytics. Analytics allows you a simple tool to plant a tiny bit of code in your website so it can be tracked. We’ll set this up in the first week or two.
- Twitter This one isn’t necessary, but the Twitter API is easy to use and a rich source of information. We’ll be looking at libraries and tools that allow you to pull data from twitter and post it / do things with it.

Assignments and Exercises

This class includes readings, a few technical assignments for which you’ll be asked to write styled html web pages and JavaScript, exercises with brief written responses, and some sketching/wireframing/and mockup work. In addition, you will be required to build two completed projects: a midterm website where you will also post content throughout the class, and a final project. We will be developing together through the course, and many of your homework assignments will involve sketching and building out components of these digital artifacts.

You will submit the majority of your assignments to your Duke CIFS server space, which we will spend some time setting up in the first class (if you have not already done so). You will be expected to maintain your Duke CIFS space, or a directory within it, populated with correctly linked .html web pages and links to your completed assignments. Later in the course, we’ll learn a few more deployment methods for full-stack applications.

You can find detailed descriptions on the assignments page.

Student Websites

Check out your colleages’ work