COVID-19 Announcement

See Online Schedule & Details Below

ART 128

Interface Programming 1

@ KCC New Media Arts
ART 128

Interface Programming  1

Intro to Front-end Web Development

Teacher: Chris Gargiulo

Interface Programming 1 introduces HTML, CSS, and JavaScript. Students learn how to take static designs from Photoshop and convert them into coded interactive web sites using well formed, web standard compliant markup and styling.

The predominant underlying markup technology behind the web is HTML (Hypertext Markup Language). Together with CSS (Cascading Style Sheets) and JavaScript, HTML web sites can be powerful, flexible, usable, accessible, and beautiful. This class is catered toward visual web designers who need to be able to convert visually creative designs into interactive working web sites. During the first few weeks of the semester we will learn the basics of markup (HTML), styling (CSS), and scripting (JavaScript). During the remaining weeks of the semester, we take an existing design from Photoshop and use it to go through the final stages of the design process for interface design of building and testing a HTML web site.

ART 128 Syllabus

Course Info

The Schedule

Points
Grade
100
Site #1: Student Site
20%
200
Site #2: Site Base
40%
100
Site #3: Custom Site
20%
100
Crit
20%
500
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
100%

Grading System

20%
Site #1

Student Site
100 Points

40%
Site #2

Site Base
200 Points

20%
Site #3

Final Project
100 Points

20%
Class Participation

Critique
100 Points

The Calendar

Calendar loading...
Covid-19 Update

Distance Learning Plan

Online Course Schedule & Details

For Spring 2020 Only

Due to the coronavirus pandemic, this course will be delivered online after spring break. Below are related updates including all course-related details regarding Chris's distance learning plan for ART 128 Interface Programming 1.

No More Face-to-Face Classes

Effective immediately, we will be conducting all remaining classes online “asynchronously” (on your own time), where each week I will post a short "Weekly Video" (~10 minutes) with class related announcements, updates, and weekly instructions. Please watch the videos each week and follow the instructions posted within each weekly sub-section (see below).

Work Independently

You are to continue working independently on your three main projects (deliverables) for ART 128:

  1. Site #1: Your Student Site (be sure to post links to all assignments).
  2. Site #2: Sitebase (complete all steps for the multi-page site and single-page site).
  3. Site #3: Your FINAL custom coded site (based on your UI design from ART 229).
One-on-One "Open Thursdays"

Every Thursday, from 8am-10:45am, I will be available to meet with students 1-on-1 via Zoom (meeting id and password will be sent via email). On even-numbered weeks (Weeks 12, 14, & 16), you will have pre-set times to meet with me 1-on-1. On odd-numbered weeks (Weeks 13 & 15), Effective Week 14 all Zoom sessions will be optional "Open Thursdays." I will be online each Thursday from ~8am-2pm to meet with those that are able to join in at any time and/or sign-up for a time slot in advance via Calendly.

Book a 1-on-1 Meeting
Final Critique

The final critique will be conducted online “synchronously” (live) via zoom on Tuesday, May 5th from 8am-2pm. We will all connect via zoom at the same time and each student will take turns sharing your screens to present your final products and portfolio sites.

Have a Question?

Need help? Wondering how to best get in touch with me? There are multiple ways to contact me (e.g. email, Laulima, office phone, etc.), but the quickest, easiest, and best way is via Slack. You can either message me directly/privately (@Chris Gargiulo) or send a larger group message to the entire class via our private Slack channel (#art128). Designers and developers at top agencies use Slack, so should you. :)

Week 11

The primary goal of this week is to complete all Site Base lessons (Site #2) with two deliverables:

  1. Complete Multi-page Site Base (Step #6 + Step #7)
  2. Complete Single-page Site Base (Step #8)

Due to the holiday, there will be no Thursday 1-on-1 Zoom sessions this week. 1-on-1 Thursdays will begin next week (Week 12).

Week 12

This week we will officially begin the final project: coding your UI design from ART 229. We will also have our first mandatory 1-on-1 zoom sessions on Thursday (see time slots below).

  • Be sure to post a link to your FINAL UI Design (e.g. XD shared prototype, image, pdf, etc) on your class web page.
  • Start coding your Version #1 (v1) first draft in a sub-folder with a "-v1" suffix to the folder name.
Thursday 1-on-1 Schedule:
Time Student
8:00 am - 8:15 am Venice
8:15 am - 8:30 am Monique
8:30 am - 8:45 am Anthony
8:45 am - 9:00 am Yiwen
9:00 am - 9:15 am Melissa
9:15 am - 9:30 am Jennifer
9:30 am - 9:45 am Chloie
9:45 am - 10:00 am Miyuki
10:00 am - 10:15 am Ai
10:15 am - 10:30 am Mark
10:30 am - 10:45 am Liana

Week 13

Primarily a work week to work on the coding of your final project. You should be focusing on the overall structure of the site (working from "the outside in, top down.") Do not be afraid to try multiple times and start from scratch until you get it right.

  • Knowing that you will be posting three different versions of your final site (v1, v2, and final), be sure to plan for the naming of your subfolders and to post a link to each of the site versions on Github from your class web page.
    • Example #1: with a project named "final"
      • https://github.com/yourusername/art128/final-v1/
      • https://github.com/yourusername/art128/final-v2/
      • https://github.com/yourusername/art128/final/
    • Example #2: with a project named "sitename"
      • https://github.com/yourusername/art128/sitename-v1/
      • https://github.com/yourusername/art128/sitename-v2/
      • https://github.com/yourusername/art128/sitename/

Either of the above naming conventions are ok.

This week's Thursday 1-on-1 Zoom sessions are optional. There is no pre-set schedule and all time-slots are open and able to be booked by apointment only.

Book a 1-on-1 Meeting

Week 14

This week you should be working toward a completed rough first draft (v1) of your coded final website. No placeholder images. No lorem ipsums. All final content should be in the markup (html). Visual bugs (css) and functional bugs (js) are OK and expected.

  • First Draft (Version #1) of your Coded Site (Due this week)
New "Open Thursdays" Schedule

This week, and all remaining Thursdays from here on out, will be "Open Thursdays" which are optional 1-on-1 Zoom sessions from 8am-2pm. Unfortunately, due to recent schedule changes, my availability on Thursdays is hereby limited and subject to change on a week-by-week, day-to-day basis. Therefore, there will be no more pre-set, mandatory 1-on-1 schedules and all previously scheduled Thursday 1-on-1 time-slots are now open and able to be booked by apointment in advance. Please watch this weeks video for more details.

Book a Thursday 1-on-1 Meeting

Week 15

Primarily a work week to continue coding your final project. You should be working toward your next due date (second draft due Week 16).

This week's Thursday 1-on-1 Zoom sessions are optional. There is no pre-set schedule and all time-slots are open and able to be booked by apointment only.

Book a 1-on-1 Meeting

Week 16

This week you should be working toward a completed second draft (v2) of your coded final website. At this point, your site needs to be 100% complete and ready for launch (if needed). It should not be unfinished or incomplete at all. This week you should be focusing on quality assurance testing (see Chris's QA Checklist blog post), code refactoring (cleaning up), and adding bonus features like UI animation.

  • Second Draft (Version #2) of your Coded Site (Due this week)

This week's Thursday 1-on-1 Zoom sessions are optional. There is no pre-set schedule and all time-slots are open and able to be booked by apointment only.

Book a 1-on-1 Meeting

Week 17

This week we will all be meeting "synchronously" on Thursday May 7th from 9:00am-10:30am via Zoom for a quick (1 hour) show-n-tell (celebration) of your final project coded websites. To save time, I will share my screen and click through them all briefly (~5min each). After, I will share advice on what you should plan on during the summer months, in preparation for the fall.

  • FINAL Version of your Coded Site (Due this week)
Optional Student Videos:
  • OPTIONAL: Short "Show-n-tell" Student video
    • For those that would like to ask for specific feedback from your classmates, please feel free to post a video this week (Week 17) via your class website or our class Slack channel (#art128) and we will be sure to take a look and give you feedback. This is not a requirement for this course. This is OPTIONAL.
Thursday May 7th Zoom Schedule:
Time Class
9:00 am - 10:30 am ART 128 Interface Programming 1
11:00 am - 12:00 pm ART 285 Interface Design Studio
12:30 pm - 1:30 pm ART 293 NMA Internship

Course Content

  1. Introduction

  2. Initial Project (Student Site)

  3. Intro to HTML

  4. Intro to CSS

  5. HTML Structure

  6. CSS Architecture

  7. CSS Layout

  8. Site Structure and Navigation

  9. Intro to JavaScript

  10. Customizing HTML, CSS, and Javascript

  11. Forms

  12. Extending HTML, CSS, and Javascript

  13. Old Midterm Project (Optional)

  14. Testing:

  15. Final Project

    • Create a Custom Single Page Site from Scratch (Starting from a Base)
  16. BONUS

Slides

Course Deliverables

12 Assignments

Initial Assignments

  1. Simple Web Page Week 2
  2. Simple Styled Web Page w/ CSS Week 3

Site #1: Student Site

  1. Student Site with Course Web Page and Journal Week 4

Site #2: Site Base

  1. Site Base Blank Week 5
  2. Site Base Content Week 6
  3. Site Base Layout Week 7
  4. Site Base Home Page Week 8
  5. Site Base Toggle Nav Week 8
  6. Site Base About Page Week 9
  7. Site Base Contact Page Week 9
  8. Site Base Multi-Page Site Week 9
  9. Site Base Single-Page Site Week 11

Site #3: Custom Site

  1. Final Single-Page Site Week 17

Students

Current Students

Past Students

About

This is the faculty web site for KCC New Media Arts instructor Chris Gargiulo. Chris is a designer, animator, and filmmaker with experience in print design, web design, front-end web development, motion graphics, and animation for various film, web, and multimedia projects. This site is for his students and for all who are interested in web design related topics and techniques.

Contact

For specific information about this site and the Interface Design concentration of courses within New Media Arts program at Kapi‘olani Community College, please contact:

Chris Gargiulo

Telephone: 808-734-9707
Email: gargiulo [at] hawaii.edu

Office Hours

Due to COVID-19, all face-to-face office hours for the second half of the spring 2020 semester will be held online and integrated into a single one-on-one online scheduling system that will occur online (via Zoom) on Thursdays from 8am-2pm for enrolled students only.

For more general information about New Media Arts program at Kapi‘olani Community College, the Associates degree, and the admissions process to become a student, please contact:

Steve Harris

Telephone: 808-734-9510
Email: snharris [at] hawaii.edu
Chris Gargiulo KCC New Media Arts