2.3 | on-ground | css intro

Due Today: Exercise part 1 (do not submit yet) + Read Ch 1–4
For Today: CSS Intro, DW: CSS Designer and W3

Review: Self Tests

CSS Intro, Text + Color

Class5_LinksImagesCSS_S21
Class6_CSSTextColor-1
CSS Resources

Exercise – HTML + CSS Menu

SECTION II – assignments

20 points total | One submission via D2L | One file

  • Part 1: HTML Structure & Semantics (10 pts)
  • Part 2: CSS Hierarchy, Design & Rationale (10 pts)

This exercise is completed in two instructional parts but graded together as one assignment. In part 2, you will layer CSS onto your existing HTML menu to create hierarchy, clarity, and visual order. This is not about decoration. It’s about using CSS as a design tool to guide attention, improve readability, and support meaning. You will continue working in the same HTML file you created in Part 1.

Requirements

  1. CSS Integration and File Setup (.5 pts) :

    • Single file named: lastname_menu.html
    • CSS embedded in a <style> block in the <head>
    • Proper <title> tag included

  2. CSS Selectors and Properties (3 points):

    • Utilize a minimum of 8 different CSS selectors to style your menu, such as body, h1, nav, ul, li, etc.
    • Experiment with a minimum of 8 CSS properties like color, font-weight, font-size, padding, margin, font-family, letter-spacing (tracking), line-height (leading), and background-color, width (measure).
    • Ensure all selectors and properties are correctly applied and contribute to the menu’s functionality and style.
    • Note: Ensure there are no empty CSS selectors. Each selector used should serve a specific purpose in styling your menu.

  3. Design Execution (5 points):

    • Typography and Hierarchy: Modify HTML tags to create a clear visual hierarchy using headings (<h1>, <h2>, <h3>), paragraphs, and lists. Focus on choosing typeface combinations, adjusting leading, tracking, scale, and weight to enhance readability and hierarchy.
    • Color Scheme: Develop and apply a cohesive color scheme that complements your menu, ensuring strong contrast for readability.
    • Content Organization: Use CSS to logically organize and differentiate sections of your menu, enhancing the user interface.
    • Encouraged Exploration: Experiment with CSS3 features like box-shadow, border-radius, or text-transform to add creative touches to your design, within the scope of the current lessons.

  4. Design Rationale (Reflection 1pt): Include a short Designer’s Note (150–200 words max) as an HTML comment (<!- – notes – ->) at the top of your file.This is about thinking clearly, not writing formally. Discuss: 

  • One key typographic or hierarchy decision you made
  • One challenge you encountered and how you resolved it
  • One improvement you would make with more time

Evaluation (20 points total)

Part 1: HTML Structure + Semantics (10 pts)

  • 1 pt — Correct file name (rename):
    lastname_menu.html
  • 2 pts — Content completeness
    All required menu sections are present, complete, and clearly organized.
  • 6 pts — HTML structure & semantics
    Correct syntax, meaningful use of headings, sections, lists, and paragraphs.
    Structure makes sense even with all styling removed.
  • 1 pt — External link
    One properly formatted, relevant external hyperlink is included.

Part 2: CSS Design, Hierarchy + Rationale (10 pts)

  • 1 pt — CSS setup
    CSS is embedded correctly in a <style> block within the <head>.
  • 3 pts — CSS usage & technical application
    • Minimum 8 CSS selectors. Demonstrating an understanding of CSS selector syntax and selection strategy. No empty or unused selectors.
    • Minimum 8 CSS properties. Correct and effective application of CSS properties such as color, font-weight, font-size, padding, margin, etc., enhancing the design and functionality of the menu.
  • 5 pts — Visual hierarchy & design execution
    • 1 pt – Typography: Effective selection and use of typefaces, including considerations for readability, originality, and aesthetic appeal. Typography should create a visual hierarchy that guides the viewer through the menu content.
    • 1 pt – Color Scheme: Development and implementation of a cohesive color palette that enhances readability and visual appeal. The color scheme should support the theme of the restaurant and improve user navigation.
    • 1 pt – Content Organization: Logical organization of menu content using CSS. The layout should be user-friendly, with clearly defined sections that make navigation intuitive.
    • 1 pt – Visual Hierarchy: Effective use of CSS to establish a clear visual hierarchy with headings (<h1>, <h2>, etc.), paragraphs, and lists that enhance the menu’s structure.
    • 1 pt – Creative Use of CSS: Incorporation of CSS properties to add visual interest and improve interactivity where applicable, such as border-radius, box-shadow, or text-transform. Creativity in design should align with the functional requirements of the menu.
  • 1 pt — Design rationale (HTML comment)
    A short Designer’s Note (150–200 words max) included as an HTML comment, addressing:
    • One key design or hierarchy decision
    • One challenge and how it was resolved
    • One improvement you would make with more time

exercise resources

  •  

Warmup 3

Warmup 3 - Styling Your Recipe with CSS (5pts)

Enhance the HTML document created in Warmup 2 by applying basic CSS styling to improve its visual design and interactivity. This exercise will focus on typography, color schemes, and introducing hover effects.

Goals: Improve readability, clarify hierarchy, make sections feel intentional, use CSS to guide the reader. 

Prepare and Setup Your Document

- Copy the lastname_warmup2.html file into a new local folder named "warmup3" and rename it to lastname_warmup3.html.

- Set up a new site for "warmup3" in your Dreamweaver files panel to manage your files effectively.

Apply Internal CSS:

- Add a <style> tag within the <head> section of your HTML document to write your CSS.

- Background Color: Set a subtle background color for the <body> to improve the visual comfort of reading your recipe.

Typography Enhancements:

- CSS Selectors and Properties: Use CSS selectors like body, h1, h2, a to apply your styles. Apply at least one new CSS property to each selector used to clearly see the impact of your styling choices.
- Font Families: Experiment with different font-family properties for the recipe name, ingredients, and cooking steps to enhance readability and aesthetic appeal.
- Font Sizes and Colors: Adjust font-size and color properties to differentiate between headings and paragraph text, ensuring that headings stand out and text is easy to read.
- Creatively explore with CSS by trying out various styles to see what looks best for your recipe layout.

Color Scheme Adjustments:

- Develop a simple color scheme that is visually appealing and ensures good contrast for readability. Apply these colors to your text and background appropriately.

Interactive Elements - Hover Effects:

- Add a CSS :hover effect to links. For example, change the color of links when hovered over to indicate that they are interactive:

a:hover {
  color: #3498db; /* Changes link color on hover */
}

Save and Upload Your File:

- Ensure all changes are saved in lastname_warmup3.html.
- Upload this file to the "warmup3" folder on D2L.

For Thursday

  • START Warmup #3 and Exercise part 2
  • Due: Blog #1 on D2L

Due Next Tuesday

  • Read Chapters 5, 10, 12+13 (CSS Text and Boxes) in Duckett’s HTML & CSS and pp. 183–186 (links, images, CSS) in Duckett’s HTML & CSS
  • Warmup 3

Due Next Thursday 2.12 – Exercise 2