CMI 3315: Intro to Web Design

Week 1

Unit Goals

Let's jump right in with an introduction to what HTML and CSS are and why we're going to take a very structured approach to writing code that strives for clarity and accessibility.

  1. Learn a bit about how the web operates
  2. Be able to answer what HTML and CSS are
  3. Understand the significance of accessibility in web design
  4. Recognize that accessibility isn't extra work: it's just good design!
  5. Orient yourself with the tools we'll be using in class.
  6. Recognize the utility of learning HTML elements and CSS selectors and properties
  7. Recognize well-structured documents as good Universal design
  8. Know how and when to use basic HTML tags including: paragraph, headings, lists, link, image, and formatting such strong and emmphasis.
  9. Apply CSS properties to each of the HTML elements you're using
  10. Produce a "Pen" on CodePen demonstrating your understanding of the basics.

The Web and Accessibility

You use it every day, but how often have you given thought as to how the internet actually works? And how can we make decisions about the code that runs the web and apps that will make it as accessible as possible for the greatest number of people?

Preparing for the Review Quiz (Due Jul 2nd)

1. Start by watching

2. Read Robbins' Introduction

4. Accessibility Material

To understand the style of design and coding we're doing, you'll want to know a bit about Universal Design.

Chapters from Inclusive Design for a Digital World: Designing with Accessibility in Mind by Regine M. Gilbert

After you've completed that, you should be ready to take the first of two review quizzes this week on Blackboard! You can re-take it as many times as you need before the deadline (Wednesday at 11:59pm) to get 100%.

Keep in mind that there's one more quiz this week. They're broken into two parts to make things easier for you when re-taking them. So, keep going!

HTML & CSS

I wrote HTML for my first website over twenty years ago. I learned it by reading a thicc textbook and by looking at code other people had written. And I'll tell you this: it's not as hard as people make it out to be. There are some rules to follow about structure and making sure you type everything correctly—but all of that is available online.

I don't expect you to memorize any of this! All I ask of you is that you (1) know what's possible, (2) know how to use it correctly, and (3) know where to look it up.

1. Read Robbins' Big Concepts

2. Check out HTML/CSS in Action

3. Review HTML Basics from Learning Web Design

4. Review Introductory HTML/CSS Elements

Again: you don't need to memorize these. Your goal is to understand what each does, it's "syntax" (how it's written), and when to use it.

Supplemental Resources

I highly recommend practicing with the W3 Schools Quizzes

After you've completed that, you should be ready to take the second of this week's two quizzes on Blackboard! You can re-take it as many times as you need before the deadline (Wednesday July 3 at 11:59pm) to get 100%.

Week 1 Exercise: Format a Newsletter

Scenario: You're interning at a local outdoors gear company that wants to promote an event campaign to their email list. Annoyingly, your managager forwarded you a PDF with notes scribbled all over it that they got from their boss. (This is a real thing that happens at places.)

HTML and CSS-based email announcements are useful because your customers can search for text in the email if they've lost it in the depths of their inbox. It also can easily can be uploaded to a website in the exact same format. And they can fit screens of different sizes. Marketing companies like Mailchimp and Constant Contact use this kind of email all the time. Social media hasn't killed email (yet) so this is useful to know.

For the two HTML/CSS exercises, you'll be using the web app Codepen that I demonstrated in the video. Sign-up for a free Codepen account.

  1. Download the email announcement PDF.
  2. Sign-in to your Codepen account and create a new "pen" and title the project "Exercise 1 - FN" (Firstname Lastname initials)
  3. Copy-paste the text of the press release into your Codepen window
  4. Recreate the basic formatting of the PDF using HTML
  5. Apply CSS styling listed below
  6. Copy links to in-house photo and the promo sponsor image
  7. Make sure to fulfill all the requests written in red/blue/green on the PDF
  8. Choose a legible font.
Required HTML Elements
paragraphs, headings 1–3, emphasis, strong, unordered list, and images
Creating Links
Include at least three links as described in the PDF
Required CSS Elements
Copy-paste this into your CSS window: body {max-width:600px; margin: 0 auto;}
Selectors: paragraph, headings 1–3, default link and visited link
Properties: color, background color, font, size, change the default bullet points in a list, and make different visited and unvisited link colors

Please do not use any of the following html tags: <b>, <i>, <center> and

Use <br> only for a break that moves text to the next line. Don't use two in a row to add whitespace. Headings and paragraph tags should take care of that.

At any time while building your page, you can use the Codepen "Analyze HTML" or "Analyze CSS" checker to to highlight errors. It will help you find mistakes!

Screenshot of the Codepen Analyzer

Submit your CodePen link (by clicking Share ☞ Copy Link) . In the Blackboard assignment, click "Create Submission" and paste the link into the text box. Hit Submit and you're done! This first exercise is due Sunday July 7 (11:59pm).