MEDP 341 Web Programming!

Wed 4:00 - 6:50 PM | Aug 28 - Dec 18, 2024 | Zoom Link
Instructor: Karlie Zhao | Office hours: Wed & Fri 2:00 - 4:00 PM

Assign to others

Syllabus
Stay connected

Github
Powerful search

Software Requirements
Put in a vault

Weekly Schedule
Fast messaging

Resources
Share with others

Student Pages

Course Description

Undergrad Catalog:

"Advanced programming skills for website design. Dynamic content development explored through state of the art programming languages for the creation of interactive web sites. Students will create web pages that utilize the most current techniques in web development. The curriculum in this class emphasizes an integrated and creative approach to web programming, including detailed instruction and practice in the technical aspects. It is designed to give students a basic introduction to the tools and techniques used by web programmers.""



Prerequisite: Students need to have taken Web Production I (MEDP 28500) or demonstrate competency in HTML and CSS to enroll in this course.



  • Front-end: HTML, CSS, Bootstrap, JavaScript, jQuery
  • Libraries: p5.js, D3.js, three.js, RiTa.js, etc.;
  • Techniques: API requests, regex, OOP (JavaScript class), JSON
  • UX/UI design framework: Vue.js/React.js
  • Back-end: PHP

Course objectives

Upon successful completion of this course, students will...

  • Understand front-end and back-end technologies for making interactive websites.
  • Explain modern web application architectures and related concepts.
  • Examine and use popular RESTful web APIs.
  • Utilize major web graphic libraries (P5.js, D3.js OR Three.js).
  • Utilize major SPA user interface design patterns and best practices (React.js).
  • Build and deploy a custom serverless web application.
  • Design and develop integrated, dynamic, and interactive websites for artistic and professional purposes.

Software Requirements

All the required software for this course is free.


GitHub (Mac, Windows, and Linux)

Open a Github account and download Desktop.


Text Editor (Mac, Windows, and Linux)

The code you write will require a text editor. There are many on the market, but Visual Studio Code (open source) is the one we're using.


Observable

Observablehq is a platform where you can collaboratively explore, analyze, visualize, and communicate with data on the web.


Browsers (Mac and Windows)

You may use any brower you're comfortable with in this class, but make sure you have Chrome and Firefox installed.


Command Line Interface

Mac and Linux users do not have to install a Command Line Interface, or CLI, because these operating systems already have The Terminal installed. Windows users, however, might want to install Cygwin.

Weekly Schedule



=> Slides <=

  • Intro to the course
  • Why web programming (in the age of generative AI)?
  • Setting up VS code (or other IDEs)
  • Review HTML, CSS
    • ==== BREAK 15 min ====
  • Setting up Github
  • Hosting static websites with Github


Assignments (Due Wed Sep 4 noon)

  • Fill in this questionnaire by Friday Aug 30
  • Set up your working environment: Visual Studio Code, Github, Github Pages.
  • Viewing + Response - choose at least one from the following:
    Fruitful Presentation by Min Guhong
    ORAL.pub
    CSS Zen Garden

    Response:
    What's interesting to you in this article/work and why?
    Do you agree or disagree with the author, why?
    Other media (writings, images, videos, etc.) this article reminds you of, and how are they related?
    *Do NOT only provide a summary of the reading. You can include one if it helps you understand it.*


  • Practice
    Design and implement a website that contains:
    Your self intro page (index.html)
    Link to a new page => short week 1 reading response
    A go-back link/button
    Achieving these gives you 6 out of 10 points for this assignment.
    Each additional creative feature == + 2 points

    Use github pages to host your website. Then, go to our course repo and submit an issue with your name and link to your site. Feel free to give comments to others' sites!


=>Slides <=

  • Presentation: Web Development in 2024
  • Responsive CSS
  • Week 1 assignment review
    • ==== BREAK 15 min ====
  • JavaScript Review: Variables, Data types, Operators, Numbers, Strings, Booleans, Writing statements, Working with conditional statements, Loops; DOM; JS events and animation; Dynamic rendering.

Assignment

see end of slides.

=> Slides <=

  • Reading response review
  • JS Review: DOM, events
  • Exercise (Templates)+ break 40min
  • Dynamic graphics rendering

Exercise Solutions: #1, #2

Assignment: Coding practice #1

due by noon, Wed, SEP 18.
See end of slides.

=> Slides <=

  • Coding Practice #1 quick review
  • JS Review: in-class quiz
  • JavaScript: Functions and Arrays
    • === break 15min ===
  • Exercises

Assignment: Coding practice #2

Ideation due by noon, Wed, SEP 25. Recreate due by Oct 9.

=> Slides <=

  • Coding practice #2 discussion
  • Coding along exercise
  • JavaScript: Arrays Methods
    • === break 15 min ===
  • Coding along exercise II
  • JavaScript objects
  • Coding Practice #2 Brief
Notes from enlarge exercise: see enlarge.js

Assignment: Coding practice #2 due by Oct 9.

=> Slides <=
=> Midterm project sign-up <=

  • Coding practice # 2 review
  • Review: JavaScript Array methods, JS Objects
    • === Break 15 min ===
  • JavaScript Classes code along -> template, full js file
  • Midterm research project brief

=> Slides <=

  • JS object review, JSON fundamentals: in-class exercise
  • API fundamentals
    • === Break 15 min ===
  • AJAX techniques
  • Midterm research project consultation

=> Slides <=

  • Recap: JSON, AJAX, API
  • Student Presentations
    • == Break 15 min ==
  • Student Presentations
  • [Lecture + exercise] Asynchronous JS: Async functions, Await, Promises, Call back
  • Coding Practice #3 Brief

=> Slides <=

  • Recap: Async JavaScript: Callbacks, Promises, Await, error handling
  • In class-exercise: API call => Weather app; view page source to see the javascript implementation with commented notes
    • == Break 15 min ==
  • Net Art Presentation | Bryana's recreation of the work: old version; modern version
  • JAMStack & Hosting Services
  • Coding practice #3/midterm presentation consultation

=> Slides <=

=> No Class <=

  • Brainstorm final project.
  • Prepare for a project pitch/description for the discussion next week.
  • Consider:
    1. what this website's primary functionality?
    2. How's this website's page hierarchy like?
    3. What frameworks/libraries do you want to use?
    4. Ideas on the aesthetics?
    5. How do you plan your time?

=> Slides <=

  • JavaScript modules
  • Presentation: Web graphics anime.js by Rosselyn
  • Presentation: REACT.js by Vicky
  • JavaScript Runtime Environment: Browser and Node
    • == Break 15min ==
  • Presentation: Cyberfeminism index by Liliko
  • Presentation: Front-end web development by Wai
  • One-on-one discussions on final project ideas

=> Slides <=

  • Awwwards and the Webby Awards
  • TypeScript
  • React: components, react hooks, JSX/TSX
    • == Break 15min ==
  • One-on-one consultation on final projects

=> Slides <=

  • React: props, component life cycle
  • Build tools: Create React App, Next.js, Vite.js, etc.
  • One-on-one consultation on final projects

Final Project

Read this document

Resources



Inspirations


Reading & Learning


Tools