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.
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.
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
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.
Project 1: Design a Work in HTML
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.
Creating the Lab Site Folder
Creating the index.html file
Adding an External Style Sheet
Adding the Flexbox Layout
Creating the JS Popup Window Feature
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.
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
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
This page will showcase the student's work for this course.