NMA / CG

ART 128

Interface Programming 1

Intro to

HTML
CSS
JavaScript
Course Intro Projects Videos & Lessons Links Students
ART 128

Interface Programming I

Intro to Front-end Web Development

Teacher: Chris Gargiulo

Interface Programming 1 introduces HTML, CSS, and JavaScript. Students learn how to build a website fron scratch and how to take static UI designs and convert them into coded interactive websites 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 UI design created using UI design software and then use it to go through the final stages of the design process for interface design of building and testing a HTML web site.

Syllabus

Course Overview

1. Student Site
2. Site Base
3. FINAL Custom Site
<
Break
Crit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Deliverables

Site #1

Student Site

Your personal student website with links to all assignments.

BONUS/EXTRA (Optional):

  • About Page
  • Blog Page
  • Notes Page
  • Projects Page
  • Project Subpage(s)
Site #1 Lessons

Site #2

Site Base

A step-by-step custom starter code base for websites.

BONUS/EXTRA (Optional):

  • SiteBase Step 8
  • SiteBase > Personal Portfolio Site
Site #2 Lessons

Site #3

Custom Site

Final Project: code your custom UI design from ART 229.

See Chris's NMA ART 128 Grading Rubric

Calendar

Weekly Videos & Lessons

  • Small Image for ART 128 Week 4 Video
    Weekly Video

    Week #4

    12 min

    This week students will continue working on their student sites and complete the last remaining steps by adding in structural elements and sub pages.

    Watch Video
  • Small Image for ART 128 Week 5 Video
    Weekly Video

    Week #5

    17 min

    This is a "check in" & "catch up" week for students to touch base with me via Google Chat + Loom and to make sure that you all get caught up by completing all Site #1 student site lessons and steps.

    Watch Video
  • Small Image for ART 128 Week 6 Video
    Weekly Video

    Week #6

    17 min

    This week will will begin Site #2 SiteBase. Coding this site is going to be different than the first site by going into greater depth and thus requiring longer video lessons, therefore be sure to plan accordingly and set aside ample time each week to code.

    Watch Video
  • Small Image for ART 128 Week 7 Video
    Weekly Video

    Week #7

    9 min

    This week will continue working on SiteBase by completing Step #3 Base Layout and Step #4 Base Site Structure. These steps and the video lessons for each are long, so be sure to pace yourself and set aside ample time to complete each.

    Watch Video
  • Small Image for ART 128 Week 8 Video
    Weekly Video

    Week #8

    8 min

    The main topic for this week is JavaScript. After a short "Intro to JS" lesson, there are two short hands-on Codepen exercises along with an opportunity to apply the basic JS concepts within the context of a website by completing the next step for Sitebase: Step #5 Toggle nav mobile menu.

    Watch Video
  • Small Image for ART 128 Week 9 Video
    Weekly Video

    Week #9

    9 min

    The goal for this week is to complete all SiteBase steps (through Step 7). There are two more steps to do: Step 6 "Sub Pages" and Step 7 "Single Page Site." Step 6 is split into two parts: 6A) the About sub page and 6B) the Contact sub page (each has its own video lesson).

    Watch Video
  • Small Image for ART 128 Week 10 Video
    Weekly Video

    Week #10

    15 min

    The goal for this week is to be 100% done with Sitebase so you can begin your final project Site #3, a custom designed and coded website. First, you need to post the UI design (e.g. either your ART 229 project #1 or another pre-approved by the instructor). Next you will be begin coding Draft #1 (v1) due in a few weeks.

    Watch Video
Break Week

Week #11: Spring Break

Complete Site #2 and begin working on your final project Site #3.

Work Week

Week #12: Work Week

Contiue working on your final project Site #3 and be sure to check Google Chat for the 1-on-1 mandatory meeting schedule that begins next week.

  • Small Image for ART 128 Week 13 Video
    Weekly Video

    Week #13

    10 min

    The goal for this week is to post a completed first draft of your final project Site #3 to github. For this initial first draft, your top priority is to get all of the content in place (e.g. text and images). Do not be too concerned about the layout and the visual aesthetics. At this stage, your main focus is the overall content structure and your markup (e.g. "should this heading be a h2 or a h3?"). Be sure to check Google Chat for the 1-on-1 Zoom meeting schedule for this week.

    Watch Video
Work Weeks + 1-on-1 Meetings

Weeks #13-16: Work Weeks / 1-on-1 Meetings

Continue working on your final project. For the next four weeks, Weeks 13-16, we will use the following format:

  • On odd weeks (13 & 15):: "Open Work Studio" & "Open Office Hours"
    • NOTE (BONUS): In addition to the in-class time blocks from 8-10:30am on Tuesdays & Thursdays, Chris is also availible for 1-on-1 extra help during his out-of-class office hours on Mondays & Wednesdays from 10:45am-12:15pm. These are on a first-come-first served basis with a reservation in advance via Chris's Calendly
  • On even weeks (14 & 16): Mandatory One-on-One Meetings
    • For the exact schedule, see Chris or check Google Chat at the beginning of class each week.

Mandatory Weeks 1-on-1 Daily Format:

Tuesdays:

Time Student
8:15 am - 8:25 am Student #1
8:30 am - 8:40 am Student #2
8:45 am - 8:55 am Student #3
9:00 am - 9:10 am Student #4
9:15 am - 9:25 am Student #5
9:30 am - 9:40 am Student #6
9:45 am - 9:55 am Student #7

Thursdays:

Time Student
8:15 am - 8:25 am Student #8
8:30 am - 8:40 am Student #9
8:45 am - 8:55 am Student #10
9:00 am - 9:10 am Student #11
9:15 am - 9:25 am Student #12
9:30 am - 9:40 am Student #13
  • Small Image for ART 128 Week 17 Video
    Weekly Video

    Week #17

    22 min

    This is the LAST week of instruction. Please be sure to update your class webpage with links to ALL assignments, including a link to your FINAL version of Site #3, which is due on Thursday May 2nd when we will have an 8am critique in Kopiko 202 (and via Zoom). The absolute last date to hand in any and all past assignments is Thursday May 9th. I will also be holding one more "first-come, first-served open studio working class on Tuesday this week from 8am-10:30am.

    Watch Video

Students

< ! - -   G O   C O D E   - - >