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 Content

The Projects

The Schedule

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

Grading System

40%
Site #1

Company Name 1
200 Points

20%
Site #2

Company Name 2
100 Points

20%
Site #3

Final Project
100 Points

20%
Class Participation

Critiques
100 Points

The Calendar

Calendar loading...

Lessons

Intro to Front-End Web Development HTML, CSS, & JS

A Brief Intro

HTML, CSS, and Javascript are the core "front-end" technologies of the web. Each plays a different fundamental role.

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (Javascript)
Questions & Considerations
  • Where does front-end coding fit within the full web design process?
  • What are important best practices for front-end web development?
  • What software is used for front-end web development?
Starter HTML Markup
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
</body>
</html>
Resources

Week-by-Week

1 Intro to the Course Expand/Collapse

This week we will go over the course and the major assignments and deliverables. Lessons include an intro to HTML and setting up a local folder structure and development environment.

expand

Agenda:

  1. Introduction to the course
    • In this class we will go through in detail the late phases of the design process of planning and designing web sites.
  2. Game plan for the semester
    • Overview of the syllabus
    • Weekly and bi-weekly assignments
    • Three major projects/sites (week-by-week intro site, mid-term, and final)
  3. We will take a look at student designs/interfaces from past years.
  4. Set up Local Development Environment and Class Web Page
  5. Intro to HTML (Markup) and Assignment #1: A Simple HTML Web Page

Class examples + related links:

The Power of CSS:

Class-related Links:

Some Hosting Options:

HTML Coding: Common HTML Tags:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <ol>
        <li></li>
    </ol>
    <a href="#"></a>
</body>
</html>

Assignment: Simple HTML Web PageDue: Week 2

Lessons:

Assignment: Get Set UpDue: Week 2

  1. Set up a local folder system where you will work and test your site locally.
  2. Set up your class web page. Please note that all students are required to have hosting space to post their designs, assignments, and ultimately their final web site. Students are required to purchase a hosting plan with a third party hosting provider. Past students have purchased hosting plans from Bluehost and GoDaddy (these are just a few of many hosting providers available). Plans should include ample disk space (ie. more than 2GB or unlimited), support for CGI, PHP, and MySQL, multiple domain hosting (to host more than one site), one-click install/support for Wordpress, Joomla, and Drupal (popular CMS options), and a low, competitive price (an example rate is around $3-$5/month – this is subject to change based upon current trends for hosting prices).
  3. Once your class web page is set up, email the url to the instructor.
  4. Post your 1st assignment - simple HTML web page - on your class web page.
  5. Complete the tutorials (links are below) on w3schools.com.
2 HTML & CSS Expand/Collapse

We will continue on where we left off from last week - setting up our class web pages - then learn how to link a CSS style sheet to an HTML document.

expand

Agenda:

  1. Introduction to CSS
  2. Linking an HTML page to a Style Sheet

Class examples + related links:

Inspiration:

Assignment related:

CSS Syntax:

selector {
    property: value;
}

HTML for linking to an external CSS file

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- MAIN CSS -->
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>

Base CSS for a Simple HTML Page

CSS Table of Contents (optional):

/* BASE (Initital Setup)
=====================================
    #RESET
    #BASE TYPOGRAPHY
            #BODY
            #HEADINGS
            #PARAGRAPHS
            #LINKS
            #LISTS
===================================== */

Simple Reset: (fFor temporary use)

/* #RESET
================================================== */                        
* {
    margin: 0;
    padding: 0;
}

Base Typography (em-based):

/* #BASE TYPOGRAPHY (em-based)
================================================== */

/* BODY */
body {
    font-family: Helvetica, Arial, sans-serif;
    color: #333;
    font-size: 100%; /* 16px; */ 
    line-height: 1.5em; /* 16px x 1.5em = 24px */
}

/* HEADINGS 
    Based on a Traditional Typographic Scale
    48, 36, 24, 21, 18, 16

*/

h1, h2, h3, h4, h5, h6 {
	margin: .5em 0;
}

h1 {
	font-size: 3em; /* 48px / 16px = 3em */
	line-height: 1em; 
}

h2 {
	font-size: 2.25em; /* 36px / 16px = 2.25em */
	line-height: 1.1em;
}

h3 {
	font-size: 1.5em; /* 24px / 16px = 1.5em */
	line-height: 1.2em;
}

h4 {
	font-size: 1.3125em; /* 21px / 16px = 1.3125em */
	line-height: 1.3em;
}

h5 {
	font-size: 1.125em; /* 18px / 16px = 1.125em */
	line-height: 1.4em;
}

h6 {
	font-size: 1em; /* 16px / 16px = 1em */
	line-height: 1.5em;
}

/* #PARAGRAPHS */
p { 
	margin: 0 0 .5em 0; 
}


/* #LINKS */
a { color: #39c; text-decoration: none; }
a:hover { color: #069; text-decoration: underline; }
a:focus { color: #39c; }
a:visited { color: #39c; }


/* #LISTS */
ul, ol, li {
    margin: 0;
    padding: 0;
}

ul, ol {
	padding-bottom: 1em;
}

ul li ul, ul li ol, ol li ul, ol li ol {
	margin: 0; 
	padding-bottom: 0;
}

li {
	margin-left: 1.875em;
}

Lessons:

Assignment: Due: Week 3

  1. Post your "HTML page w/ linked CSS file" assignment on your class web page.
  2. Read about div and section elements, and the difference between block level and inline elements (links are below).
3 Box Model & Block Elements Expand/Collapse

This week we will begin Site Base - a bare bones, simple HTML, CSS, & JS front-end framework.

expand

Agenda:

  1. Introductions to Site Base
  2. Using a HTML & CSS "Base" Blank setup to begin coding a site
  3. Setting your base styling for content via a "Base Content"
  4. Key Topics to Review
    • HTML5 shim/shiv (for backward compatibility)
    • Viewport meta tag (for mobile support)

Lessons:

Assignment: Due: Week 4

  1. Startimg with a solid "starter" base HTML and CSS setup, begin coding Site Base by setting up your initial base styling for content (base typography, headings, links, blockquotes, media, buttons, etc.).

Assignments Examples:

4 Intro to CSS Layout & Positioning Expand/Collapse

There are multiple ways to position HTML elements using CSS. This week we will go over some of the popular techniques and best practices.

expand

Agenda:

  1. Intro to CSS Layout & Positioning
    • Floats
    • Absolute vs. Relative positioning
  2. Web Layout: how to do multiple columns using floats, in stacked sections, in HTML via CSS grid systems.
  3. Setting your base styling for layout via "Base Layout"

CSS Grid examples:

Web Design Resources:

Lessons:

Assignment: Due: Week 6

  1. Continue to Step 3 of coding Site Base by setting up layout styles via media queries, a reusable container, and a simple custom grid system.
  2. Time permitting: conduct a few simple div tests and post them on your class web page.

Assignment Examples:

5 Intro to Site Structure & Navigation Expand/Collapse

HTML provides semantic elements (tags) to mark up structural parts of common web site pages, such as headers and footers, and there are several known best practices for improved usability and accessibility.

expand

Agenda:

This week we will learn how to structure a web page and style unordered lists using CSS to look like common navigational elements such top and footer navs.

  1. Semantic structural site elements:
    • <header>
    • <nav>
    • <footer>
    • <main>
    • <section>
  2. Site branding (e.g. logo) and site header positioning techniques and best practices.
  3. Lesson: How to stylize lists for navigation: how to use lists to make two different navigation systems:
    • A horizontal top navigation that is right-justified
    • A footer navigation that is center justified
  4. Lesson: Using in-line lists for navigation
    • use unordered lists
    • control the list-style type (set to “none” to remove the default bullet points)
    • control the position of the list items via floats or displaying them “inline” or “inline-block”
    • control the visual formatting using margins, padding and borders
    • use a:hover for rollovers
    • For further control:
      • use classes or css selectors, such as “:first-child” or “:last-child” to target specific list items

Lessons:

Assignment: Due: Week 7

  1. Continue to Step 4 of coding Site Base by setting up a basic web page with a header, site branding/logo area, primary header navigation, main content area with multiple sections, a footer with a footer nav.
  2. Continue creating test pages and post them on your class web page.
6 Intro to JavaScript and Mobile Navigation Expand/Collapse

Javascript is used to add, enhance, and control functionality. One example where JavaScript is commonly used is mobile-friendly navigation.

expand

Agenda:

  1. Brief intro to Javascript.
  2. Brief intro to mobile navigation patterns.

Class examples + related links:

Lessons:

Assignment: Due: Week 8

  1. Continue to Step 5 of coding Site Base by setting up a mobile-friendly toggle nav.
  2. Continue creating test pages and post them on your class web page.
7 Sub Pages Expand/Collapse

Create sub pages that are well suited for specific content, such as an about/article/post page, a post/product/image listing page, a product/feature detail page, and a contact page with form.

expand

Agenda:

  1. How to create, link, and style sub pages.
  2. Potential sub pages to consider:
    • about/article/post page (e.g. about.html)
    • post/product/image listing page (e.g. products.html)
    • product/feature detail page (e.g. product-detail.html)
    • contact page with form (e.g. contact.html)
  3. Potential new features/components to consider:
    • inline page anchors, accordians (collapsible panels), responsive grid for lists and thumbnail images, articles, forms

Assignment: Due: Week 9

  1. Continue to Step 6 of coding Site Base by setting up at least one sub page.
  2. Optional: continue to create sub pages and post them on your class web page.
8 Single Page Site Expand/Collapse

Create a vertical scrolling, single page web site with multiple sub sections.

expand

Agenda:

  1. Working with one main index.html file, update the site navigation to link to page anchors (ID's) for each of the main sub sections (e.g. a href="#section1")
  2. Add ID's to all main sub sections (e.g. section id="section1")
  3. Once the page anchors are tested and working, use javascript to add animation
    • add scroll.min.js to js folder
    • add a link to scroll.js file at the bottom of your html file
    • add a class="scroll" to each link that will utilize scroll.js

Assignment: Due: Week 10

  1. Continue to Step 7 of coding Site Base by setting up at a single page site.
9 Mini-Midterm Project Expand/Collapse

Mini-Midterm project begins with an intro and in-class working time, along with continued lessons on HTML & CSS.

expand

Agenda:

  1. Create a custom site by overriding your base styling with site-specific styling and custom HTML, CSS, & JS.
  2. Demo of an example custom site: John Doe's Portfolio.
  3. Full work week to work on your custom site.
  4. Take advantage of 1-on-1 support in class to ask for help fixing bugs.

Assignment: Mini-Midterm Custom SiteDue: Week 11

  1. Begin coding your mini-midterm custom web site.
    1. Start by duplicating one of your Site Base folders, such as "Base Site w/ a Sub Page" (to create a custom multi-page web site) or "Base Single Page Site" (to create a custom single page site).
    2. Rename the folder to either "customsite" or to the "projectname" of your hypothetical client" (e.g. your client's name, such as "johndoe").
    3. Add a section entitled "SITE SPECIFIC CSS" to the bottom of your base style.css file and use this area to add any custom site-specific (e.g. project-specific, client-specific, etc) styling.
    4. Customize the site in both of the following ways:
      • Change the content (via HTML). Content changes to consider:
        • Change the header and brand identity of the site (e.g. change the site name, add a logo, add a tagline, etc.).
        • Update the navigation to match the client/project (e.g. About Us, Our Products, Contact Us)
        • Use real content (no placeholder photos or copy).
        • Consider using a "content-first" approach to establish a strong content hierarchy, information architecture (IA), and navigation.
        • Use your grid (rows and columns) to experiment with different layouts to best present the content.
        • Utilize and embrace known good usability practices, UX design patterns, and UI components.
      • Customize the appearance (via CSS). Be sure to work on the bottom of your style.css file within the newly added section entitled "SITE SPECIFIC CSS." Try not to edit your "BASE CSS" above. Instead, try to override the base styles at the bottom of your style sheet in this designated area that is seperate from your base styles. Style changes to consider:
        • Customize the typography.
        • Use a custom color palette
        • Consider adding aesthetic graphical elements such as line, shape, texture, and background photography.
    5. Optional: consider extending the core features and functionalities of "Site Base" by adding new elements, UI components, design patterns, etc. such as:
      • Webfonts
      • Icons
      • Accordians
      • Dropdown Subnav Menus
      • Modal Windows
      • Infographics
    6. Bonus: consider creating sub pages (or sections) for the following:
      • about/article/post page (e.g. about.html or "about us" section)
      • post/product/image listing page (e.g. products.html)
      • product/feature detail page (e.g. product-detail.html)
      • contact page with form (e.g. contact.html)
  2. Make sure that all content is formatted well. Pay attention to the negative space (ie. margins, padding, etc.)
  3. Final Project Tasks:
    • For your final project, if you are coding your design from ART 229, please post your ART 229 designs as jpgs on your class web page. For those who are not in ART 229, please speak to me about what you will be coding for the final project. Once approved, please post a link to your designs.
    • Once your final project designs are posted, go to our class work site on Laulima. In the Discussions area, add your name and the title of your final project as a "new topic" inside of the "Final Project" forum (just like how John Doe did) - then post a direct link to your final project design(s) (jpgs posted on your web site). In this discussion area we can provide feedback for final revisions before you begin coding.
10 Mini-Midterm Project Expand/Collapse

Mini-midterm project continues with in-class working time, along with continued lessons on HTML & CSS.

expand

Agenda:

  1. Mini lesson on HTML forms (using a seach box as an example).
  2. Work week to code the mini-midterm project. A clarification:
    1. Do your best to try to complete a home page at the very least (this is the minimum requirement for the assignment).
    2. If you are coding a single page site, be sure to include multiple sub sections (instead of sub pages).
    3. After you have coded a home page, you can consider the following:
      • Coding the sub pages (as many as you can).
  3. Take advantage of 1-on-1 support in class to ask for help fixing bugs.

Mini Lesson:

Search input forms

Assignment: Mini-Midterm Custom SiteDue: Week 11

  1. Continue coding your Mini-midterm custom site. Do as much as you can, working outside-in, top-down.
  2. Final Project Tasks:
    • For your final project, if you are coding your design from ART 229, please post your ART 229 designs as jpgs on your class web page. For those who are not in ART 229, please speak to me about what you will be coding for the final project. Once approved, please post a link to your designs.
    • Once your final project designs are posted, go to our class work site on Laulima. In the Discussions area, add your name and the title of your final project as a "new topic" inside of the "Final Project" forum (just like how John Doe did) - then post a direct link to your final project design(s) (jpgs posted on your web site). In this discussion area we can provide feedback for final revisions before you begin coding.
11 Mini-Midterm Critique Expand/Collapse

Mini Midterm critique. We will also talk about the final project and take a look at the designs you will be coding.

expand

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. There is no homework over break, but please consider the following:
    • Take advantage of the break to complete any and all past assignments (Site #1: Site Base and Site #2: Custom Site).
    • Take advantage of the break to make any further changes to your site #3 design that you will be coding for the final project.
    • If your design is in good shape, you can begin coding it - as a "test" document. Keep in mind, that you may need to code several "test" html pages (ie. for the home page alone) - so be prepared to start over from scratch multiple times.
12 Spring Break Expand/Collapse

Spring Break. No class this week due to the break. Use this week off to relax, take care of yourself, play catchup, or continue working on your final project. Be sure to backup all of your work to date.

expand

Agenda:

Assignment: Coded Home PageDue: Week 14

  1. Aim to have a fully coded home page over the next two weeks.

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. Begin coding your web site. Your goal is to have a well coded home page before moving on to the sub pages.
  2. If your home page is complete, be sure to test it on all browsers and both platforms before moving ahead to the sub pages. Don't forget PC IE (IE 8+).
13 Final Project Expand/Collapse

Final Project officially begins. Start by coding your home page working outside in, top down.

expand

Agenda:

  1. Full Intro/Overview of the Final project.
  2. In-class working time. Be sure to take advantage of in-class 1-1 support.
  3. Mini Lesson: Javascript vs. JQuery: Show/Hide Layers
  4. Mini Lesson: CSS Drop-down/Fly-out Menus.

Class examples + related links:

Javascript related:

Drop-down/fly-out related:

Assignment: Coded Home PageDue: Week 14

  1. Aim to have a fully coded home page for next week.

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. Begin coding your web site. Your goal is to have a well coded home page before moving on to the sub page template.
  2. If your home page is complete, be sure to test it on all browsers and both platforms before moving ahead to the sub page template. Don't forget PC IE (IE 8+).
14 Final Project Expand/Collapse

In-class work week. Continue coding your home page working outside in, top down. Only when your site is tested, validated, and bug-free can you move on to your sub page.

expand

Agenda:

  1. In-class review of home page code.
  2. In-class working time to continue coding your site. Be sure to take advantage of in-class 1-1 support.

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. Continue coding your web site. By now you should have a solid home page coded. If not, continue (re)coding it until it is solid, stable, robust, and tested to work on multiple platforms and browsers. Once you are done with the home page, you can go ahead and work on your sub pages and begin to add in content.
  2. Be sure to test your site on all browsers and both platforms before moving ahead to the sub page template. Don't forget PC IE (IE 8+).
15 Final Project Expand/Collapse

In-class work week. Continue coding your sub pages starting with a template originating from a solid home page.

expand

Agenda:

  1. Work week & informal QA test week. Be sure to take advantage of in-class 1-1 support.
    • Use the QA Bug Tracking Sheet Excel Doc or Google Sheet to help log, organize, and prioritize your remaining bugs.

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. Continue coding your web site. By now you should be have a working 1st draft and have begun entering your content.
  2. Be sure to test your site on all browsers and both platforms before entering in final content. Don't forget PC IE (IE 8+).
16 Final Project Expand/Collapse

QA Test Day. Your coded site should be complete, ready to be tested on multiple browsers and platforms.

expand

Agenda:

  1. Official QA (Quality Assurance) Test Day to test your site on all browsers and platforms.
    • Use the QA Bug Tracking Sheet Excel Doc or Google Sheet to help log, organize, and prioritize your remaining bugs.
  2. Full work week. Be sure to take advantage of in-class 1-1 support.
  3. Announcements:
    • Please fill out the online eCafe student course evaluation form.
    • The final project is due next week.
    • After the critique, any revisions to the final project will be due by the following Tuesday after the final critique.

Class examples + related links:

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. If you haven't done so already, start a list of all of your outstanding bugs to date. Prioritize your bugs starting with the critical bugs as the most important to be placed on the top of your task list.
  2. Fix ALL of your bugs and continue testing your site.
  3. Be sure to validate your site and test it on PC IE (IE 8+).
  4. If you are finished with your site, ask yourself, "what can I do to make it better?"
17 Final Critique Expand/Collapse

Final critique. All final project deliverables are due this week.

expand

Agenda:

  1. Final critique on Thursday May 4th, 9am-2pm.
    • 10 minutes per person to present.
    • Further feedback should be provided for your peers via Laulima under each persons's final project discussion area.
  2. Announcements:
    • No class on Tuesday May 2nd.
    • After the critique, any revisions to the final project are due by next week Monday.

Critique Schedule:

Student Time
----- SETUP ----- 9:00-9:10
#1 9:15-9:25
#2 9:30-9:40
#3 9:45-9:55
#4 10:00-10:10
#5 10:15-10:25
----- 10 Min. BREAK ----- 10:30-10:40
#6 10:45-10:55
#7 11:00-11:10
#8 11:15-11:25
#9 11:30-11:40
#10 11:45-11:55
----- 10 Min. BREAK ----- 12:00-12:10
#11 12:15-12:25
#12 12:30-12:40
#13 12:45-12:55
#14 1:00-1:10
#15 1:15-1:25
#16 1:30-1:40
----- CLOSING REMARKS ----- 1:45-2:00
X Mini Lessons Expand/Collapse

Here are a few "Mini" lessons for your reference.

expand

Mini Lessons:

  1. Web Fonts using @font-face:

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

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