WDD 230: Web Frontend Development I

Web Design Principles

Overview

The principles of good design should be practiced in web design to promote a positive user experience. One goal of this course is to provide a reasonable foundation in good design. These principles should be understood, practiced, and continuously improved upon. It takes applied practice and actively seeking constructive feedback from others.

"Effective web design and art are not the same. But many psychological and design principles apply to websites. You can design a great website by applying the relevant aspects of those laws to your layout, typography, and images. Design for the user and your business objectives." - Peep Laja - CXL

Prepare

Activity Instructions

File and Folder Setup

  1. Create a folder named "week02" in the wdd230 directory.
  2. Add a new file name "design.html" to that week02 folder.
  3. Add a "styles" folder to the week02 folder.
  4. Add a new file named "design.css" to the styles folder.

HTML

  1. In the design.html file, provide the basic HTML structure to the file.
    Remember that Emmet notation built into VS Code provides shortcuts to code snippets. For example, type html5 and then the TAB key to build a basic HTML5 structure.
    User defined custom snippets can also be used: VS Code Snippets.
  2. Link the external design.css file.
  3. Add the given CodePen HTML content to the <body> of the document: ⚙️ CodePen Design Starter

CSS

  1. In the design.css file, copy over the starter CSS code found in the CodePen.
  2. Fix the padding issues on the div.callout container.
  3. Fix the <h2> alignment justification to be left aligned instead of centered.
  4. Check the color contrast by using the CSS Overview tool in the browser's DevTools.
    How to enable and use CSS Overview: 📑 CSS Overview: Identify potential CSS improvements
  5. Enter the foreground and the background colors given of the div.callout container into the Contrast Ratio tool.
    What is the ratio? Is that good or bad?

    The contrast ratio was 2.14 for #777 and #702963. 🙁This is not good. Specifically, it fails WCAG 2.0 and 2.1 (Web Content Accessibility Guidelines)

  6. Fix the contrast issues in the div.callout and check to make sure it passes both the AA level and AAA level.
  7. Layout the <main> element content to use two columns for the article and list.
    • Do not add any additional HTML.
    • Use the grid-template-columns property to create the two columns.
    • The <h2> heading within this <main> container will need to span the two columns.
      How do you do that?

      Use the grid-column property on this <h2> to span the two columns.

  8. Delete the marquee and replace it with an <div class="banner"> stationary area as shown in Figure 1.

    Why delete the marquee? The marquee element is not supported in HTML5 and is considered deprecated (obsolete or being phased out) even though it may be rendered by most browsers. In terms of design and usability, the marquee is not good because it is unpredictable and distracting. It is also not accessible to users with disabilities.

  9. Move the footer content to the left.
⚙️ CodePen - Example Solution

Submission

  1. Update the course home page with a link to this assignment file.
  2. Publish the changes to the wdd230 GitHub Pages repository.