Skip to Navigation | Skip to Content

MAT 165 - Web Design 2: Tools and Techniques

Menu

Class Schedule

Week 1 (1/21)

Topics + Learning Objectives

  • Overview/Introduction to the class and syllabus
  • Web basics
  • The Code View within Dreamweaver
  • Working with Code in Dreamweaver
  • Emmet and DW
  • HTML for Structure, CSS for Presentation
  • Basic HTML Tags
  • CSS Selectors, Properties, and Values
  • Styling with CSS
  • Internet History

Required Assignments + Tasks

REcommended or OPTIONAL Tasks

Assignment #1: A Recipe for HTML and CSS (60 Points - Due 2/4)

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 Assignment #1 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).

Use the exercise to review HTML and CSS basics. Your focus should be on using HTML to appropriately structure your content and 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
  • At least two structural tags such as an <<article> or <section> to contain your recipe content, a <header> for header content, a <footer> for footer content, and/or <div> tags for generic containers
  • 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
  • And, any other tags you feel are appropriate

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) and any other CSS that you feel is appropriate

If any of the required HTML tags or CSS properties are unfamilar to you, look them up in the HTML Reference or CSS Reference.

Create a root folder/directory called "assignment1". 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 "assignment1" folder. Using FTP, upload your "assignment1" 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.

After completing and uploading your exercise, participate in the Assignment #1 Review and Reflection Discussion in Canvas.

VideoS + Tutorials

Welcome and Introduction + Choosing a Code Editor

  1. Welcome and Introduction + Code Editors (18:32)

The Technologies Empowering the Web (Required)

  1. The Three Layers of Web Design: HTML, CSS, and JavaScript (7:39)

Coding in Dreamweaver (Recommended, but you can use your favorite code editor; Emmet is avaialble in Phoenix Code and Visual Studio code too)

  1. Coding in Dreamweaver CC - Features, Emmet, Quick Keys (33:12)

Review of HTML, CSS, and Assignment #1 (Required)

  1. Introduction to Assignment #1 (8:16)
  2. Content is King, Defining a Site, the HMTL Skeleton, External CSS (9:44)
  3. HTML Markup for Structure, Part 1 (16:04)
  4. HTML Markup for Structure, Part 2 (17:46)
  5. CSS for Presentation (26:16)

Publishing and FTP in Dreamweaver (Required)

  1. Site Management and FTP with Dreamweaver CC (16:26)

History of the Internet (Recommended)

  1. The Birth of the World Wide Web (video from the Computer History Museum)
  2. The History of the Internet in a Nutshell (article)
  3. Internet History 1962 to 1992 (Online exhibit/article from the Computer History Museum)

Additional Tuorials if You Need to Brush Up on HTML and CSS (Optional)

  1. Review the HTML Beginner Tutorial at HTML Dog (from HTML Dog)
  2. Review the CSS Beginner Tutorial at HTML Dog (from HTML Dog)
  1. Getting Started with HTML (from the Mozilla Developer Network)
  2. Getting Started with CSS (from the Mozilla Developer Network)

Links + Resources

These and other great books are free from O'Reilly (formerly Safari) Books Online using your Miracosta Surf ID and Password:

> Go to Top

Week 2 (1/28)

Topics + Learning Objectives

  • HTML for Structure, CSS for Presentation
  • Web Typography
  • Crimes in Web Typography
  • CSS and Type
  • Special Characters
  • Working with Images
  • Advanced Typography

Required Assignments + Tasks

VIDEOS + TUTORIALS

Crimes in Web Typography (Required)

  1. Case #1 : Contrast (8:25)
  2. Case #2 : Defaults (4:34)
  3. Case #3 : Poor Font Choices (15:11)
  4. Case #4 : A Matter of Measure (11:05)
  5. Case #5 : Visual Weight (9:12)
  6. Case #6 : Hierarchy and Spacing (17:12)
  7. Case #7 : Centering, ALL CAPS, and Special Characters (19:32)
  8. Case #8 : Visual Interest (Drop Caps, Graphic Elements, Text Shadows) (23:49)

Working with Dreamweaver (Optional)

Note: It's not required that you use Dreamweaver in the class; you can use your code editor of choice. But, these optionalvideos may be helpful for students interested in learning DW.

Introduction to Working with Dreamweaver CC (Optional)

  1. The Dreamweaver interface and workspace (24:20)
  2. Defining a site, creating pages, and adding content (13:52)

Applying Structure using Dreamweaver CC (Optional)

  1. Adding structure and markup - headers, paragraphs, line breaks, HTML5 strcutural elements, divs, and more (14:49)
  2. Using special characters (12:58)

Web Fonts and Font Families in Dreamweaver CC (Recommended)

  1. Working with Web Fonts and Font Families (41:13)

Assignment #2: Magazine Web Typography Investigation (Due 2/18)

Explore web fonts and typographic design on the web using the content and typographic design of a magazine page (or spread) as inspiration. Find a printed magazine article with compelling typography and a clean, interesting layout. Using HTML and CSS, create a webpage that reflects the content/layout of the magazine article.

The Crimes in Web Typography series of videos review the CSS properties that you may need to explore. A great free resource and online book about web typography that you may wish to utilize as well is Professional Web Typography by Donny Truong.

Adhere to the following guidelines:

  1. Try to maintain a connection to the graphic/typographic design of the printed magazine article while creatively adapting the article for web delivery. You do not have to make your webpage design look exactly like the article (or use the same fonts or images), but the design of the magazine article should “inspire” your design.
  2. Focus on high-quality typographic design using modern CSS techniques.
  3. Make sure that you have at least four distinct typographic styles (such as styles for a top-level header, a subhead, a byline, and body copy).
  4. Use appropriate and semantic HTML markup (for content/structure) and CSS coding (for presentation/formatting).
  5. Use a CSS Reset to zero out browser preset margins and padding.
  6. Explore and use Web Fonts by either using a font hosting service (like Google's Web Fonts) or embedding the font using the @font-face declaration (such as available at Font Squirrel) or both.
  7. Integrate at least two images into the design (as foreground or background elements).
  8. Optionally, use Image Replacement Techniques to replace text with image on a header (or other elements, but not the body copy).
  9. You are encouraged to explore CSS3 styles such as text-shadow, column-count, column-gap, column-width, transforms, CSS Shapes, etc.
  10. You are encouraged to create a responsive design (adapt to mobile), but it is not required.
  11. Be creative and have fun.

Create a root folder/directory called "assignment2". 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 "assignment2" folder. Using FTP, upload your "assignment2" 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.

Magazine Exercise / Typography Examples/Demos

Links + Resources

Typography

Fonts

Reference

Dreamweaver

Resets

Magazines and Books

These and other great books are free from O'Reilly (formerly Safari) Books Online using your Miracosta Surf ID and Password:

> Go to Top

Week 3 (1/28)

UPCOMING Topics + Learning Objectives

  • Review of FTP
  • Working with text/typography
  • CSS properties for web typograpahy
  • CSS Columns
  • CSS Shapes
  • CSS Transforms
  • Review of Photoshop for Creating and Optimizing Web Graphics
  • Optimizing Images for the Web
  • Formats for Optimizing Web Graphics
  • Working with Images in HTML and CSS

PREVIEW OF SOME UPCOMING VIDEOS + TUTORIALS

Working with Web Typogaphy - Inspired by Print Magazines (Required)

> Go to Top