COMD 2451 Web Design I, Fall ’24 Toggle navigation

I have made some updates to the assignments on Brightspace as follows:

Week 6 Assignment B - Site Map - updated to not include the User Flow Diagram

Week Assignment C - User Flow Diagram - new assignment for just the user flow diagram. This will be due Sunday, November 3. (I will teach you how to do user flow diagrams this week)

Week 7 - W3.CSS and Responsive Website with Image Gallery - Updated assignment instructions to be more clear. Also pushed the deadline out 3 days so it is due this coming Sunday at midnight (instead of Thursday).

As always, if you have questions on the assignments, feel free to:

a) ask me at student hours right after class;

b) make an appointment with me on Zoom

c) email me

d) post a message in our class Slack channel

Hi class,

I hope you enjoyed your week off! We will have quiz #2 at our next session (Oct. 9). We'll be covering weeks 4-5 (CSS and visual design). Studying this material is a great chance to get comfortable with the myriad ways you can use CSS to style the content you put in your HTML, bringing it to life!

You'll be expected to know everything from:

• Weeks 4&5 lecture slides
• w3schools reading on CSS (see list of specific pages below in the "CSS" section.
• the homework assignments I gave you
• wschools reading on HTML (because you have to know the HTML stuff to be able to do the CSS!)

The quiz will focus heavily (but not entirely) on CSS. So make sure to practice writing it and get comfortable with all the things we learned about.

Here is a checklist of things to know.

HTML:

• HTML attributes
• ID's and classes (know how these are written because they are important for css selectors!)
• HTML5 semantic elements - know what a semantic element is, and what each of these is for: (header, nav, section, article, footer, aside)
• How to create a button (wk 5 ) (you might have a multiple choice asking which are correct ways to create a button, so get familiar with the different ways to code buttons in HTML)

CSS:

• basic syntax of a CSS rule: selector, declaration block, declaration, property, value. Know where to put the curly brace, colon and semicolon.
• Inline, Embedded and External CSS (know how to write each of these, and where each of these goes)
• css selectors: understand how they work, and understand what each of the following selectors does, and the syntax used to write them: element selector, generic selector, class selector, ID selector, descendant selector. Also know the three combining CSS selectors: element.class; element, element, and .class1.class2. I may do a matching to ask you to indicate which selectors select what HTML elements in a chunk of code.
• CSS box model. Know box model notation (wk 4)
• How to organize your files (folder structure). Includes what folders to use, what to name them, and what to put inside of them. And how to name folders and files (no spaces, no special characters except for _ and -)
• CSS float (wk 5)
• Background images (wk 5)
• How to style a button (wk 5)
• the basics from these pages: CSS home, introduction, syntax, selectors, how to, comments, colors, backgrounds, borders, margins, padding, height/width, box model, text (color, alignment, decoration, transformation), fonts (family, web safe, fallbacks, style, size, Google, Pairings, Shorthand) , lists, display, max-width, position, z-index, float, website layout, units, and specificity.

VISUAL DESIGN:

• CRAP principles of good design
• Different ways to specify a color in CSS: hexadecimal, RGB, RGBA, and color names. (For each of these, know the syntax (how to write them) in CSS. Know what the "A" in RGBA does and how it works (0-1.0, transparent to opaque)
• Principles of choosing a color palette for your website. I may ask you to use https://colourcontrast.cc to check whether a background/text pair of colors has enough contrast to be paired. (remember, it has to pass all 4 of the tests on the top right of the page!). Also the idea of choosing an accent color.
• Web fonts. Know display fonts vs text fonts, and which type of fonts to select for each.
• Web fonts. Know the default text size in browsers. And know what an em is equal to.
• Web fonts: how to write (syntax) in CSS. (study w3schools.com for this), Remember how to indicate a second choice font, font family, and generic family, and why including all of these is important to do.
• Know the tips for using fonts
• Know the difference between a Style Guide, Style Sheet, Component Library, and Design System.

Dear students,

As a reminder, we have a quiz tomorrow covering weeks 1-3. You will want to study the lecture slides and the w3schools assignments.

Know these topics well:

Hosting and domains:

• Web hosting
• Domain hosting
• Top level domains (TLD)
• Domains: name servers, IP addresses, ISPs, FTP

Design Discovery and Process:

• Discovery tools
• Sketching
• Design workflow
• Web Design Process: key steps

HTML

• Minimum required HTML skeleton
• HTML formatting advice
• Types of HTML text elements: Block vs inline
• Proper HTML syntax
• Which elements belong in the <head> and which belong in the <body>
• Proper capitalization in HTML
• Elements that do NOT need closing tags

Please make sure that you turn in the following assignments before midnight tomorrow (Wednesday) night to get full points on them!

1. Week 1 Lab
2. Week 1 Homework
3. Week 2 Homework

(Late assignments get the grade dropped by 1/2 point for every week they're late!)

Let me know if you're getting stuck on anything or have any questions.

Best,

Prof. Lloyd

Welcome, students!

I hope you all had a good first class with Prof. Whysel. I'm excited to meet you this week! A couple of items:

I. Please log into our course on Brightspace if you haven't already. I activated it this past weekend. In there, please:

1) Read the Week 1 lesson

2) Submit Week 1 Lab

3) Submit Week 1 Homework.

Let me know if you run into any technical difficulties.

II. Join the class Slack channel. Prof. Whysel said that there might have been a wrong link in the presentation, so please use this link to join the COMD-Lloyd Slack channel instead.