VMA-129: Visual Design with HTML & CSS

Visual Design students will learn typography, layout and design in the context of interactive media, using HTML and CSS as visual design tools. Through a variety of on-screen projects, students will build on typesetting and layout skills and practice the principals of interactive design. Projects will focus on web typography, fluid design, functional style, navigation, and kinetic typography on screen. Prerequisite: VMA-132 Typography I: Form, Style, and Hierarchy, with a grade of C or better, or CMT 111 HTML & Dreamweaver, C or better. Register for this class at BHCC website.

 

Sample Class Syllabus: click here.

 

Assignments

During this class meeting students will recieve access to the course syllabus, review class proceedures and required materials for the course. Students will also be breifed on class expectations and review lab and project deadlines. Students will need to be prepaired to work on the first day of class and bring with them a 16GB or larger removeable storage device.

 

Lessons
How Web Applications Work
An Introduction to HTML and CSS
Tools for Web Development
How to View Deployed Web Pages
Three critical Web Development Issues

 

Labs
1.1 Creating Website Directory Folders
1.2 Creating Your First Web Page

 

During this class meeting students will be exposed to using the <div>, <span> element tag sets to apply formatting to a section of content in an HTML document. Students will see how to use external fonts to create different text effects to enhance the style of a web page. This class will introduce applying formatting with the use of CSS (Cascading Style Sheets) and review proper storage of different file types in a site folder. Student will also see what resources are available to validate their code to insure proper coding.

 

Labs
2.1 Font Impact on a Web page

 

Project 1: Design a Work in HTML
Bouncing

 

Additional Resouces
W3C Validation Service for HTML
W3C Validation Service for CSS

 

TBA

During this class meeting students will be exposed to using the <div>, <span> element tag sets in their structure and formatting of an HTML document followed by defining and using fonts to enhance the style of a web page. This class will introduce applying formatting with the use of CSS - Cascading Style Sheets and review proper storage of different file types in a site folder. Student will also see what resources are available to validate their code to insure proper coding.

 

 

Lessons
TBA

 

Lab: TBA
TBA

 

 

 

 

 

 

 

 

During this class meeting students will learn how to build a portfolio page and add a JavaScript Popup Window feature. Students will be exposed to Flexbox to help with alignment of thumbnails and page layout.

 

Lesson
Creating the Lab Site Folder
Creating the index.html file
Adding an External Style Sheet
Adding the Flexbox Layout
Adding Images
Creating the JS Popup Window Feature

 

Labs
Creating a JavaScript Popup Window
Download image files
Finished lab

 


Design a Word in HTML

Students are to choose one word and create a one page HTML file that communicates the meaning of the word. Students are encourage to experiment with typography, color palettes, and size.

examples of the Design a Word in HTML project

History of a Font: HTML Page Layout

Choose one font and design a page that communicates that font’s message and include the following elements with your design:

  • Multiple sizes of the font
  • Samples of the font as bold, italic, etc.
  • History of the font (minimum 4 paragraphs & cite your source)
  • Use a color palette of at least 4 colors
  • Creator of font and year it debuted
  • Communicate the feeling of the font
examples of the Design a Word in HTML project

Transforming a Poster to a Webpage

Create an online poster using typography, shapes, and images (optional) on a famous Graphic Designer. Students will experiment with creating containers, boarders and margins to create sections on the page to communicate the history of the Graphic Designer.

  • A brief history of the designer
  • Samples of their work
  • Creative layout
  • Color theme
  • Creative text usage
examples of the Design a Word in HTML project

Student e-Portfolio

This page will showcase the student's work for this course.

examples of the Design a Word in HTML

Samples

 

Recommended Resouces

W3Schools HTML

W3Schools CSS

W3Schools Colors

W3Schools HTML Graphics

 

Student Sites

Spring 2017

Find Jeannette on Social Media

  • Facebook Facebook
  • LinkedIn LinkedIn
  • YouTube YouTube
  • Follow @jrpassanisi Twitter