Skip to Navigation | Skip to Content

MAT 125 - Web Design 1: Fundamentals

Class Schedule

Week 1 (8/21 + 8/23)

Topics

  • Overview/Introduction to the class and syllabus
  • Some web basics and history
  • The technologies empowering the web: HTML, CSS, and JS
  • Basic HTML Tags
  • Hard-coding web pages with HTML
  • HTML structural tags
  • HMTL markup for text
  • HTML for content/structure vs. CSS for presentation

Exercise #1: <I AM IN HTML> (PART 1, DUE 8/30)

With Notepad (PC) or Text-Edit (MAC), hand-code a web page using HTML that provides a brief introduction to who you are, such as a biographical description of yourself, your careers goals/major, your educational background, your interest in the course, things you enjoy, your hobbies, your pets, something unusual about you, and/or any other information that you'd like to share. This content can be whatever you like and as long as you like.

Use the exercise to play around, explore, and learn the HTML elements covered in the lectures and reading and find a way to integrate them in your page.

At minimum, your HTML page should include:

  • A page title (<title>) with your name and "Exercise 1"
  • A header (<h1>) with your name
  • Some form of narrative about yourself within paragraph (<p>) tags
  • Sub-heads to divide up the content (<h2> or <h3> as needed)
  • An ordered (<ol>) or unordered (<ul>) list (<li>) of some of your favorite websites
  • A least 3 of the structural block elements: <header>, <main>, <footer>, <section>, <article>, <aside>
  • At least 3 of the following additional block elements: <blockquote>, <hr>, <address>, <pre>, <div>
  • At least 8 of the following inline text elements: <strong>, <em>, <br />, <abbr>, <cite>, <code>, <q>, <dfn>, <sub>, <sup>, <mark>, <time>, <wbr>, <span>, <bdo>, <b>, <i> ,<s>, <u>
  • At least 4 of the following character references: &nbsp; &lt; &gt; &amp; &ldquo; &rdquo; &copy; &reg; &trade; &ndash; &mdash; &bull; &hellip; &aacute; &ntilde;
  • Comments in the code (<!-- comments -->)

Try to use the above tags for their correct, semantic purpose, even if you have to invent some content to support them. Beyond what is listed above, you're welcome to explore other HTML elements, such as adding links and images, etc. but these are not required and will be covered later in the class. Similarly, you do not have to style the page or use any CSS (that's coming next week). Rather, focus on exploring and coding HTML elements and trying to use them correctly.

Create a root folder/directory called "exercise1". Save the file as "index.html" within your "exercise1" folder . Bring the file to class with you next week on a USB drive. In class next week, we will review how to use FTP to upload your file(s) into your "Lastname_Firstname" folder on the MAT server.

Links and Resources

Homework and Lab tasks

  • Acquire the Recommended Software including Brackets and FileZilla
    (Note: for FileZilla, choose FileZilla Client and choose to "Show Additional Download Offers" to choose to download the software without additional software bundles or "junk ware").

> Go to Top

Week 2 (8/28 + 8/30)

Topics

  • HTML for content/structure (continued)
  • Introduction to working with Brackets
  • Introduction to Cascading Style Sheets (CSS)
  • CSS Selectors, Properties, and Values
  • Targeting Page Content with CSS Selectors
  • CSS Properties for Styling Text
  • CSS Properties for Applying Color and Backgrounds

Exercise #1: { I AM IN CSS } (PART 2, DUE 9/6)

Using Cascading Style Sheets (CSS), hand-code your own CSS styles in an external style sheet to add style and visual formatting to your original webpage (created in Part 1).

Use the exercise to play around, explore, and learn how to use CSS selectors and properties as covered in the lectures, tutorials, and reading and find a way to integrate them in your page. Your focus should be on using CSS to effectively style and format your typography.

At minimum, your CSS should include:

  • The use of element selectors (also called tag or type selectors), id selectors, and class selectors (explore the use of all three)
  • Text formatting using: font-family, font-size, font-weight, and font-style
  • Alignment using text-align
  • Spacing using line-height, letter-spacing, and margins or padding
  • Color including text (color) and background (background-color) colors
    (Note: It is highly recommended that you use a color palette to guide your color choices).
  • At least two of the following extras (text-decoration, text-transform, font-variant, word-spacing, or text-shadow)
  • Comments (/* */) in your code.

Create a root folder/directory called "exercise1". Save your HMTL file as "index.html" and include your CSS file(s) (ie "styles.css") within this "exercise1" folder. Using FTP, upload your "exercise1" folder (and the .html and .css files within) into your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and video tutorials about how to accomplish this.

Links and Resources

Homework and Lab tasks

  • Complete Exercise #1, Part 1 (by 8/30)
  • Read Chapter 11 - Introducing CSS
  • Read Chapter 12 - Formatting Text
  • Read Chapter 13 - Colors and Backgrounds (pp. 303 - 313 only)
  • Acquire the Recommended Software including Brackets and FileZilla
    (Note: for FileZilla, choose FileZilla Client and choose to "Show Additional Download Offers" to choose to download the software without additional software bundles or "junk ware").
  • Complete Exercise #1, Part 2 (Parts 1 and 2 due on the server by 9/6; we will review how to upload to the server in class on 9/6; bring your files with you to class on a usb drive or via dropbox/google drive)

> Go to Top

Week 3 (9/4 + 9/6)

Topics

  • Using FTP software to upload and manage web server files
  • Review Exercise #1
  • Introduction to Exercise #2
  • HTML for Structure, CSS for Presentation (continued)
  • Web Typography
  • Working with Links

Exercise #2: RECIPE BOOK (Due 9/20)

Using hand-coded HTML markup, create a "recipe" web page about how to make food that you enjoy. This can be your own recipe, a family recipe, or content from a recipe that you find somewhere (give appropriate credit). Using Cascading Style Sheets (CSS), hand-code your own CSS styles in an external style sheet to add style and visual formatting to your page. In addition, add at least one image to the page.

Make this a 'recipe book' of sorts by including links (<a>) to both the previous and next student's recipe as per the Index of Student Work (i.e. include links to Exercise 2 for the both the student above and below you in the Index of Student Work such that we can progress forward and back through all of the recipes/exercises in the class).

Use the exercise to play around, explore, and learn how to use CSS selectors and properties as covered in the lectures, tutorials, and reading and find a way to integrate them in your page. Your focus should be on using CSS to effectively style and format your typography.

At minimum, your recipe content should include:

  • A title for your recipe or the name of the dish
  • At least one picture (of the dish or any of its main ingredients, or any photos or images that relate)
  • Description, background, or introductory information (some kind of narrative about the dish, its history, why you chose it, or anything about it)
  • Ingredients list
  • Cooking or preparation instructions or steps
  • Yield (how many servings?) and prep time (how long does it take?)
  • At least one additional section/element of your choice such as: serving suggestions, beverage pairings, nutrition information, quotes, tips, etc that can apply to your content and allow you to further explore CSS formatting.

At minimum, your HTML page should include:

  • A page title (<title>)
  • A link (<link>) to your External CSS Style Sheet
  • A header (<h1>) with the title of dish/recipe
  • Paragraph (<p>) tags with the description information
  • Sub-heads to divide up the content (<h2> or <h3> as needed)
  • An ordered (<ol>) or unordered (<ul>) list (<li>) of the ingredients or steps involved
  • At least one image (<img>)
  • Links (<a>) to the previous and next student's recipe exercise

At minimum, your CSS should include:

  • The use of element selectors (also called tag or type selectors), id selectors, and class selectors (explore the use of all three)
  • Text formatting using: font-family, font-size, font-weight, and font-style
  • Alignment using text-align
  • Spacing using line-height, letter-spacing, and margins or padding
  • Color including text (color) and background (background-color) colors
  • CSS for lists including list-style-type, list-style-position, or list-style-image
  • At least two of the following extras (text-decoration, text-transform, font-variant, word-spacing, or text-shadow)

Create a root folder/directory called "exercise2". Save your HMTL file as "index.html" and include your CSS file(s) (ie "styles.css") and image file(s) (ie "images/photo.jpg") within this "exercise2" folder. Using FTP, upload your "exercise2" folder/files into your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and video tutorials about how to accomplish this.

Links and Resources

Homework and Lab tasks

  • Complete Exercise #1, Part 2 (Parts 1 and 2 due on the server by 9/6; we will review how to upload to the server in class on 9/6; bring your files with you to class on a usb drive or via dropbox/google drive)
  • Review Chapters 11-12 - Intro to CSS and Formatting Text
  • Read Chapter 7 - Adding Images
  • Read Chapter 13 - Colors and Backgrounds

> Go to Top

Week 4 (9/11 + 9/13)

Topics

  • HTML for Structure, CSS for Presentation (continued)
  • Working with Links
  • Getting Started with Images and Graphics
  • Optimizing Images for the Web
  • Image File Formats (JPG, GIF, PNG, and SVG)
  • Working with CSS and Background Images
  • The CSS Box Model
  • Understanding Margin, Padding, Borders, and Backgrounds
  • Defining Box Sizes and Overflow

Links and Resources

Homework and Lab tasks

  • Read Chapter 14 - Thinking Inside the Box
  • Read Chapter 23 - Web Image Basics

> Go to Top

Week 5 (9/18 + 9/20)

Topics

  • CSS for Exercise #2
  • Review of Exercise #2 (on 9/20)
  • Working with Images and Graphics
  • Optimizing Images for the Web
  • Image File Formats (JPG, GIF, PNG, and SVG)
  • Review of CSS Box Model (margins, padding, border, background, etc.)
  • Working with CSS and Background Images
  • Positioning and Repeating (or not) Background Images

Exercise #3: Illustrated Song - Web Graphics, Typography, and the CSS Box MODEL (Due 10/4, now due 10/9)

Illustrate a song using web graphics and web typography.

In this exercise, you will explore the CSS box model and working with web graphics and background images while working to create a web page that illustrates a song of your choice.

Choose a song and use its lyrics as text. Find at least 5 images to include along with the lyrics. Consider the themes of the song in choosing your imagery, typography, and colors (i.e. your design and image choices should function to illustrate the themes of your chose song).

Consider putting each verse of the song into a separate <div> or <section> with appropriate foreground or background graphics in each. You may gather and/or create the images needed to fulfull the requirements as you see fit.

Hand-code a web page that demonstrates understanding of and fulfills the technical requirements below.

At minimum, your Web Graphics should include:

  • At least 5 images optimized for the Web in an appropriate file format (using a combination of .jpg, .png, .gif, and/or .svg graphics).
  • At least one image with transparency, saved to the .PNG format (PNG-24/32)
  • An image used in the background of the page (on the body)
  • An image used in the background of a block element (on a div, h1, or p)
  • An image applied with CSS using the Image Replacement Technique

At minimum, your HTML page should include:

  • A page title (<title>)
  • A link (<link>) to your External CSS Style Sheet
  • A header (<h1>) with the name of your song
  • Image tags as needed (<img>)
  • At least 2 div boxes (<div>) and/or block boxes (<section>, <article>, etc.)
  • Some textual/paragraph content containing the song lyrics(<p>)
  • Optionally, include <audio> for your song.

At minimum, your CSS should include:

  • Text formatting as appropriate (font-family, font-size, font-weight, and font-style, text-align, color, etc.)
  • CSS box model coding including exploring the use of margin and padding
  • The use of borders, including borders of different sizes, colors, and styles (and optionally, the use of border-radius)
  • The use of width, height, and overflow to size your boxes
  • The use of backgrounds, including background-color and background-image
  • The use of background-repeat and background-position for background images

Create a root folder/directory called "exercise3" and save your HMTL file as "index.html" and CSS file(s) (ie "styles.css") within this root folder. In addition, create an "images" folder inside of your root directory and save all of your optimzied images into this folder (ie "images/photo.jpg"). Using FTP, upload your "exercise3" folder into your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions.

Links and Resources

Homework and Lab tasks

  • Review Chapter 13 - Colors and Backgrounds
  • Review Chapter 14 - Thinking Inside the Box
  • Review Chapter 23 - Web Image Basics
  • Read Chapter 24 - Image Asset Production

> Go to Top

Week 6 (9/25 + 9/27)

Topics

  • Review of Exercise #2 (continued)
  • Optimizing Images for the Web (continued)
  • Working with CSS and Background Images
  • Positioning and Repeating (or not) Background Images
  • CSS for Positioning and Layout
  • Understanding Document Flow
  • CSS Positioning: Static, Relative, Absolute, Fixed
  • Audio <audio> and audio controls

Links and Resources

Homework and Lab tasks

  • Review Chapter 13 - Colors and Backgrounds
  • Review Chapter 14 - Thinking Inside the Box

> Go to Top

Week 7 (10/2 + 10/4)

Topics

  • Exercise #3 Techniques - Backgrounds, Positioning, Audio
  • Audio <audio> and audio controls
  • Working with HyperLinks
  • Links and Navigation
  • Link Pseudo Classes
  • Styling Links and Buttons with CSS
  • Creating a Nav Menu with HTML Lists and CSS
  • Rollover Buttons using Image Replacement

Links and Resources

Homework and Lab tasks

  • Work on Exercise #3 (due 10/9)
  • Read Chapter 6 - Adding Links

> Go to Top

Week 8 (10/9 + 10/11)

Topics

  • Review of Exercise #3
  • Introducing Project #1 and Exercise #4
  • Links and Navigation (continued)
  • CSS for Positioning and Layout (continued)
  • Understanding Document Flow
  • CSS Positioning: Static, Relative, Absolute, Fixed
  • CSS Positioning: Float and Clear
  • Page Layout and Structure using HTML5 and CSS

Project #1: single page scrolling website (DUE 11/1)

Design and develop a 'one-page' website for a fictitious book, movie, album (or other media product). Review the full project details on the projects page.

Exercise #4: HTML/CSS Interactive Mood Board (DUE 10/18)

Many designers conduct informal creative investigations, "mood boards," or "style tiles" to explore color, typography, imagery, layout possibilities and more around a united theme/idea/concept. These creative investigations are the birthplace and playground for design ideas that will ultimately inform your site's design.

In this exercise, you will explore creating basic webpage layouts and web navigation in order to create an interactive 'mood board' to guide the stylistic/conceptual development of Project #1.

Your exercise/mood board will take the form of a website with three pages of content and a navigation menu that links each page together. One page will explore color and include at least two color palettes (5 colors max per palette). One page will explore typography and include typographic examples of a headline, subhead, and body copy (using font-family, font-size, text-shadow, etc.). One page will explore imagery and include images that can be used as potential foreground or background graphics.

The layout and content should consist of:

  • A <header> with the name of your ficticious book, movie, or album concept.
  • A <nav> with a global navigational menu or navigation bar that links to each of your pages (using relative link paths). The buttons/links on this navigation bar should be labeled "Colors", "Typography", and "Imagery." Mark them up using HTML lists (<ul> and <li>) and style them with CSS using block or inline-block elements (so that they are made to look and function like buttons).
  • <section> tags with your content (either colors, typography, or imagery). If using multiple sections on a page, float each <section> to create two or three-column layouts.
  • A <footer> with your name (other content is optional).

Create an HTML/CSS page with the elements above. Layout the page such that the header extends across the page (100%, auto, or a fixed width), the sections float next to each other (creating either two or three-column layouts), and the footer clears all floated elements to extend across the bottom of the page.

Create a root folder/directory called "exercise4" and save your HMTL and CSS file(s) (ie "styles.css") within this root folder. In addition, create an "images" folder inside of your root directory and save all of your optimzied images into this folder (ie "images/photo1.jpg"). Using FTP, upload your "exercise4" folder into your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions.

Links and Resources

About Mood Boards and Style Tiles

Color Resources

Fonts and Web Font Hosting Services

Image Resourcces

Homework and Lab tasks

  • Read Chapter 15 - Floating and Positioning
  • Complete Exercise #4 (due 10/18)
  • Work on Project #1 (due 11/6)

> Go to Top

Week 9 (10/16 + 10/18)

10/16: No CLass on 10/16. I will be attending the adobe MAX Creativity Conference. See the video tutorials below.

Video TUtorials

These are new video tutorials to assist you with Exercise #4 - The Interactive Mood Board Exercise:

10/18: Topics

  • Review Exercises #3 and #4
  • The Great American Shakeout at 10:18 am
  • Process and Workflow for Project #1
  • Creating the Cover Page
  • Background Images, Viewport Units, Typography

Links and Resources

Homework and Lab tasks

  • Review Chapter 16 - Page Layout with CSS
  • Work on Project #1 (due 11/6)

> Go to Top

Week 10 (10/23 + 10/25)

Topics

  • Review Exercises #4 - Mood Board
  • Process and Workflow for Project #1
  • Creating the Cover Page
  • Background Images, Viewport Units, Typography
  • Creative Text Shadows
  • CSS Animations

Links and Resources

Homework and Lab tasks

  • Review Chapter 15/16 - On Floating, Positioning, and Page Layout
  • Work on Project #1 (due 11/8)

> Go to Top

Week 11 (10/30 + 11/1)

Topics

  • Process and Workflow for Project #1
  • Creating the Navigation
  • CSS Transitions
  • CSS Resets and CSS Tips
  • Working with JavaScript

Links and Resources

Homework and Lab tasks

  • Review Chapter 18 - On Transitions, Transforms, and Animation
  • Work on Project #1 (due 11/8)

> Go to Top

Week 12 (11/6 + 11/8)

Topics

  • Process and Workflow for Project #1
  • Some Fun JS and CSS
  • Lab Time for Project #1 (on 11/6)
  • Review Project #1 (on 11/8)
  • Introduce Project #2 (on 11/8)

VIDEO TUTORIAL

Links and Resources

  • CSS Reset (use to reset default margins, sizing with browsers)
  • Sample Logo for Image Replacement Demo

Homework and Lab tasks

> Go to Top

Week 13 (11/13 + 11/15)

Topics

  • Responsive Web Design
  • Media Queries
  • Responsive Images
  • Fluid Layouts
  • Moving from 'fixed to 'flexible'
  • Target / Context = Result
  • Viewports
  • Workflow for Project #2

Exercise #5 - Responsive Website Header (DUE 11/20)

Create a responsive website header for a fictitious business. Your header should be comprised of at least a logo and a tagline and include at least one image (in the foreground or background or both). Make your header adapt appropriately to mobile, tablet, desktop, and widescreen viewports while maintaining stylistic and thematic consistency. Adhere to the following guidelines:

  • Strive to create a responsive, fluid design for your header that displays appropriately in the context in which it is being used/viewed. These contexts should at minimum include mobile phones (designs more or less between 320 - 480px), small screens or tablets in portrait (~768 px), larger tablets and small desktops (~960px +), and widescreens (~1280px+).
  • Using Media Queries, create appropriate break points to target mobile phones, tablets, desktops, and/or widescreens with custom/contextual CSS. In all likelihood, this will require at least 3 break points, wherein your design and/or layout may need to change. Note that the space in-between break points is important too. Ideally, your design should not become ugly or unusable at any size.
  • Include the following meta data in the <head> of your document:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  • Utilize fluid/flexible layouts, responsive images, and other RWD techniques as you feel appropriate to optimize your site for 'mobile' and 'responsive' display.
  • Optionally (for extra credit), create responsive navigation and/or a 'hamburger' menu as part of your header and as demonstrated in the video tutorials.
  • Save your .html, .css, images, and any other dependent files in a project folder named "exercise5"
  • Using FTP, upload your "exercise5" folder into your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions.

Links and Resources

Responsive Design

Media Queries

Homework and Lab tasks

> Go to Top

Week 14 (11/20 + Happy Thanksgiving!)

Topics (11/20)

  • Review of Excercise #5
  • Responsive Web Design and Project #2 (continued)
  • Responsive Navigation and the Hamburger Menu
  • CSS Variables
  • Workflow for Project #2

Links and Resources

Video Tutorials

Responsive Navigation - Creating a Hamburger Menu

  1. Responsive Nav - Part 1: Introduction, HTML, and CSS (14:18)
  2. Responsive Nav - Part 2: Toggling the Menu with jQuery (20:21)
  3. Responsive Nav - Part 3: Adding Animation and the Hamburger Icon (18:19)

Homework and Lab tasks

> Go to Top

Week 15 (11/27 + 11/29)

Topics (11/20)

  • Responsive Web Design and Project #2 (continued)
  • Responsive Navigation and the Hamburger Menu
  • Layout, Typography, and Workflow for Project #2
  • Working towards a Project #2 template
  • Lab Time for Project #2

Links and Resources

Video Tutorials

Project #2 Workflow and Step-by-Step Tutorials

  1. Project #2 - Introduction, Overview, and Sample (19:05)
  2. Project #2 - Step #1 - Theme and Color (6:04)
  3. Project #2 - Step #2 - Content, Structure, and HTML5 Markup (14:40)
  4. Project #2 - Step #3 - Head Content, CSS Resets, and External Styles (11:08)
  5. Project #2 - Step #4 - Containers and Centering (8:44)
  6. Project #2 - Step #5 - Page Layout (14:34)
  7. Project #2 - Step #6 - Header Styling and Image Replacement (16:30)
  8. Project #2 - Step #7 - Navigation Menu (19:49)
  9. Project #2 - Step #8 - Content Styling and Backgrounds (12:46)
  10. Project #2 - Step #9 - Content Styling and Typography (27:09)
  11. Project #2 - Step #10 - Footer Styling, A Template for New Pages (15:27)

Responsive Navigation - Creating a Hamburger Menu

  1. Responsive Nav - Part 1: Introduction, HTML, and CSS (14:18)
  2. Responsive Nav - Part 2: Toggling the Menu with jQuery (20:21)
  3. Responsive Nav - Part 3: Adding Animation and the Hamburger Icon (18:19)

Homework and Lab tasks

> Go to Top

Week 16 (12/4 + 12/6)

Topics (11/20)

  • Review of Project #2
  • Web, Graphic, and Media Design Principles
  • Domain Registration
  • Web Hosting
  • Lab Time for Project #3/Final Project

Links and Resources

Design Principles Lecture Notes

Domain Registration

Web Hosting

Search Engine Optimization/Marketing

Homework and Lab tasks

> Go to Top

Finals Week (12/13 from 9:00 a.m. - 10:50 a.m.)

Topics

  • Review Final Projects

 

 

Note: Our class final is scheduled from 9:00 a.m. to 10:50 a.m.

> Go to Top