Final Class Meeting

We will review the work you created in this class.

Lecture

Where to go from here

Project Landing Page

Create a small project with one page that links to all five projects. Publish it at:

• ixp2.yourdomain.com

At a minimum, the page should include your name, the class title, the semester (spring 2026), and links to the projects.

The design of this page is up to you. Make it nice but keep it simple.

Each project should be accessible via the paths

• project1.ixp2.yourdomain.com
• project2.ixp2.yourdomain.com
• project3.ixp2.yourdomain.com
• project4.ixp2.yourdomain.com
• project5.ixp2.yourdomain.com

Show & Tell for Next Class

Ray: Post your discovery of the week in the #show-and-tell Slack channel.

In Class

I will lecture about JavaScript Basics and Copilot.

You’ll work on class on your final project.

Lecture

JavaScript Basics

Due Next Class (April 16)

Your project should be almost complete. Next week is the last critique before the final is due.

Remote Class Next Week!

You will meet with me and Maitreyi to discuss your work-in-progress.
Sign up for a meeting time.

Use the rest of class time to focus on finishing your final project.

In Class

We will look at project #4 and then critique the visual design of your final project.

Maitreyi will give a lecture about images on the web.

Due Next Class (April 9)

Final Project

Finalize your design and start coding.

Important:

• Start your coding with the starter kit.
• Code mobile first! The site must be responsive.

Show & Tell for Next Class

Isabell and Shana: Post your discovery of the week in the #show-and-tell Slack channel.

In Class

You will continue working on project 4 in class. I’ll talk to you individually.

Due Next Class (April 2):

Project 4

Finalize project 4. It is due in the beginning of next class.

• Get content for your second interview from a class mate
• Implement the second interview
• Revise and improve your code based on in-class feedback

Delivery

• Publish on Github pages: https://project4.ixp2.yourdomain.com

Final Project

To refresh your memory, here is the project brief.

Based on your idea from a few weeks ago, you should now have your content ready. The next step is to design a website using that content. Consider the overall structure: How will your content flow? How many pages do you need? How do they connect?

Your final project should showcase everything you have learned this semester. Most of all, create a personal and interesting site. Stay away from generic content, generic writing, and generic design.

For next class, create the visual design and a clickable prototype in Figma.

We will critique your designs at the end of next class.

Also begin thinking about how your site will be coded. Don’t design something that will be way to difficult to build. However, at this point, you are allowed to use AI to support you. But you must be in control of the code and understand what you’re making!

Apply for GitHub Education Plan

As a student you can use Copilot for free. Copilot allows you to use LLMs (like Claude) directly in VS Code. I’ll introduce this next class.

Sign up here:
https://github.com/education/students

Show & Tell for Next Class

Matina and Kayley: Post your discovery of the week in the #show-and-tell Slack channel.

In Class

We will look at your Figma designs for Interview Project.

You will start coding.

In-Class Demo

I will give a demo on Dark Mode, Accessibility, and Typographic Scale.

Reading

Full-Bleed Layout Using CSS Grid by Josh Comeau
An interesting way of coding a layout that includes full-bleed images.

Next Week’s Class Canceled

I will not be here next class (I’m leading an ArtCenter Design Storm).

Take a rest and make progress on project 4!

If you run into problems, commit to github pages and send a link and error description to the #general slack channel.

Project 4

Due in two weeks (March 26):

Code the HTML and CSS for one of your interviews.

• Utilize proper HTML markup (with a proper document outline) and responsive, mobile-first CSS
• Implement the dark mode
• Design and code your landing page

Delivery

Commit your in-progress work to github pages: project4.ixp2.yourdomain.com

In Class

We will review Project 3.

You’ll also take a mid-term quiz.

And I will introduce Project 4.

Project 4

Brief: Interview

Due Next Class (March 12)

1. Make sure you have your content for your interview.
2. Mock up the design for one entire page in Figma.
   • Create a mobile version (375px width) and a desktop version (1024px width). Make the height as tall as it needs to be.
   • Make sure the typefaces you choose can be used on the web (i.e., use Google Fonts or Adobe Fonts or something freely available).
   • Make sure all of your colors pass at least the AA accessibility check. Use the A11y – Color Contrast Checker plugin for Figma.
   • Don’t worry about designing the dark mode color palette yet. But add a color-mode toggle button in your design.
     (Check here for a fun example of a dark mode switch.)

Delivery

Post your Figma file’s “Share Prototype” link in the #general Slack channel.

In Class

Project 2 Wrap-Up: Mobile Menu (40 min)

I will give a demo on the transform, transition, and animation properties.

We will also review your final project ideas.

Project 3

This is a fun, quick one. See the Project 3 Brief.

Starter Kit

Download this starterkit folder and use it for Project 3.

The folder includes a basic setup of the files and folder you need to start a website project.

🚨 Use it as the starting point for every project this class. 🚨

Over time, you might adjust it to make it your very own starter kit.

Due Next Week

1. Complete Project 3.
2. Make sure you know what you are doing for your final project. Make a plan and get started on your experience, especially if your idea requires a long time frame.
3. There will be a midterm quiz next week. Refer to the midterm study guide.

Lectures

Project 2 Demo – Desktop CSS (62 min)

Reading

CSS Naming Conventions that Will Save You Hours of Debugging by Emmanuel Ohans

I already introduced the BEM naming convention. Here’s a great article reiterating why it’s such a great framework. (You can stop reading at the section “CSS Names with JavaScript Hooks.”)

Midterm Quiz Study Guide

The midterm is two weeks from today. Here is the study guide so you can prepare.

Due Next Week

Project 2

• Last round of Washoe! 🥲
• After watching the demo lecture (see above):
  • Re-write your desktop CSS code from scratch starting with these files
• Some added creativity:
  • Come up with your own color scheme for the page
  • Add hover effects for all links
• Challenge:
  • I included JavaScript code for the hamburger menu button. When the button is clicked, the class show-menu is added to the <body> tag. When the button is clicked again, the class is removed.
  • Based on this setup, write CSS that shows and hides the mobile menu! (Tip: You’ll have to use a descendant selector.)

Delivery: Publish on Github

• Make sure you created a local Git repository and committed all changes.
• On the GitHub website, create your remote repository. It should be called project2.ixp2.
• In VS Code, push all changes from your local repository to your remote repository on GitHub.
• Use GitHub Pages to host your repository. (See GitHub website > Settings > Pages.)
• Set up a custom domain for your GitHub Pages site. This is a two-step process:
  • On the GitHub website (Settings > Pages),  enter a custom domain. The domain should be  project2.ixp2.yourdomain.com.
  • Log in to your registrar (Hostinger or Namecheap) and create a CNAME record: project2.ixp2 points to yourusername.github.io.
• When you visit project2.ixp2.yourdomain.com in your browser, you should see your project 2.

(Note: in the instructions above, replace yourdomain.com with your actual domain name and yourusername with your GitHub username.)

Final Project

We’re going to start thinking about the final project. We won’t start on it for a few more weeks, but I want you to come up with ideas now.

• Read the Final Project Brief
• Come up with 3 strong ideas for your final project
  • Pick something that you find super exciting
• Explain your ideas on three separate 17 x 11 pages, print and bring to the next class

Show & Tell

Alicia and Manasvi: Post your discovery of the week in the #show-and-tell Slack channel.

In Class

Github: We will point subdomain to your repository.

I will lecture about CSS Selectors, and we will have an in-class exercise.

Then you will continue working on the Project 2.

Lectures

CSS selectors

Project 2 Demo

• Mobile CSS (59 min)

Due Next Week (Feb 20)

Reading

Responsive Web Design by Ethan Marcotte (May 2010)

This piece represents important web history: it’s the blog post where the term ‘responsive design’ was coined. Read it for some historical context, but do not take any of the code examples at face-value. Most of them are outdated. In fact, you can stop reading before the section ‘Adapt, respond, and overcome.’

Project 2

• After watching all demo lectures, revise your mobile CSS code from scratch starting with these files.
• Also code the desktop view. Note that you’re jumping ahead here again. Next class, I will show how I would code the desktop view. You will need to employ media queries, like so:
  @media screen and (min-width: 850px) {
/* desktop css here */
}

In Preparation for Project 3

Project 3 (starting in a few week 6) will require you to interview an IxD ArtCenter student who are in their 7th or 8th term. For now I want you to do two things:

• Contact a student who you want to interview. Schedule an a time with them from now until the end of week 6. Interview them. You will need their answers in a written format.
• Come up with 10 questions to ask them. A few to get you started:
  • Why did you decide to study at Art Center?
  • What’s your favorite gallery/museum in Los Angeles?
  • What was the most important class you took at Art Center so far?
  • What projects are you working on right now?

Show & Tell

Share a web discovery in the #show-and-tell Slack channel and give a short presentation in the beginning of class. This could be an article, a tool, or a coding technique you just discovered, or an inspiring website.

Next week: Younhee & Gloria

In Class

We will purchase a domain name for everyone.

And I will give a few lectures. And I will show you how to push your code to a github repository.

We will check in and look at project 2.

Lectures

HTML vs CSS vs JavaScript

CSS Basics

Project 2 – Demo Videos

1. HTML (33 min)
2. CSS Reset and Fonts (11 min)
3. Adding Classes (8 min)

Due Next Week (Feb 12)

Project 2

Download these files (they include my html from the demo videos above).

Then, write the CSS for small screens (mobile).

Test browser widths between 320 and 500 pixels. (We will deal with the design for larger screens later.)

Don’t worry about the mobile menu button behavior for now. This (hamburger) menu button will eventually show and hide the menu. For this round, the menu items should just be shown expanded as they appear in the mockup.

If you feel ambitious, continue with the desktop style. But, again, you must start coding the mobile first.

Show & Tell

From now on, each week two students will share a web discovery in the #show-and-tell Slack channel and give a short presentation in the beginning of class. This could be an article, a tool, or a coding technique you just discovered, or an inspiring website.

Next week: Sunwoo & Selina 

Consider these resources:

Showcase Sites

• awwwards.com
• siteinspire.com
• siteofsites.co
• onepagelove.com
• cssdesignawards.com
• smashingmagazine.com

Newsletters

• web-design-weekly.com
• newsletter.uxdesign.cc 
• tympanus.net/codrops/collective
• figmalion.com

In Class

We will critique project 1. (Upload a zip file of your project.)

I will give a few lectures about git and html.

I will also introduce project 2.

Lectures

Git Introduction

HTML Basics

Overview of the Process for Project 2 (40 min) (slides)

Project 2

Brief

Please read the brief for Project 2.

We will work on this project in steps over the next few weeks.

Due Next Class (February 5)

Watch the lecture video “Overview of the Process for Project 2” (above)

For Project #2, concentrate on writing the HTML.

If you feel ambitious (and have prior html/css skills) go ahead and write some CSS too!

Important Note

Every student starts this class with a different skill level. This project might be a breeze for you (great!) or it might be daunting (that’s fine!).

I will spend a lot of time in the next weeks walking you through the entire process.

If you are lost

I recommend go through these two HTML tutorials on the Codecademy website:

• Introduction to HTML
• Introduction to Semantic HTML

You’ll have to create an account, but these tutorials are free.

Delivery

Bring your files on your laptop to class.

Also

🎧 Bring headphones to the next class 🎧

💳 Bring your credit card – I’ll show you how to purchase hosting 💳

Syllabus

You can review the Syllabus here.

Lectures

Survey of Web Technologies

Due next class (January 29)

Get Settled In

• Install Slack and join our group.
  • Here’s the invitation link to join.
  • Make sure you get notifications.
• Install the VS Code editor.
• Get a notebook and bring it to every class to take notes.

Project 1

See the Project 1 Brief.

Domain name

If you don’t have your own domain name, yet, think about which domain name you want.

You can check availability here: namecheap.com/domains/domain-name-search/

Plan ahead—the domain probably will become your official portfolio website in the coming years.

We will purchase your domain during class in the coming weeks.