week 4 | online | 2.9–2.15

📌 Weekly Structure (applies every week)

Week 4 Links & Notes

Live Sessions This Week:

👉 Join Live: Mon 2.9 @ NOON (week 4 review)→ 🎥 [Join Here]
Will be recorded for those unable to attend live.

🎥 Watch: Mon 2.9 Weekly Review Recording → [Watch Here] 

Looking Ahead (Week 5)
Next live (recorded) session: Mon Feb 16th @ noon 

This week’s deadlines:
Monday, Feb 16th @ noon

  • Complete and Submit Exercise Part 2 via D2L
  • Complete and Submit Warmup 4 via D2L

Due Wednesday 2.11 @midnight:

  • 2 Peer Comments on Blog 1 Discussion Board (48h window for commenting)

Last week, we completed Blog 1 initial post and Warmup 3.
Next week, we will move on to Project 1.

Weekly Content

Week 4 

SECTION I – Webfonts + CSS3 + Background Images

  1. Lecture: CSS Color, Box Model + Webfonts 
  2. Review CSS Box Model + Webfont Resources (videos – 37m2s)
  3. Lecture: CSS3 
  4. Review CSS3 Resources (videos – 23m18s)
  5. Complete Self-Tests
  6. Read Chapter 16 + pp 183–188 (Images + CSS continued) in
    Duckett’s HTML & CSS.
  7. Review + Catch up on Readings: (Be sure you are caught up on Ch 1, 2, 3, 4, 5, 10, 11, 12, 13 & pp. 431–440)

    SECTION II – Blog 1 Comments, Exercise, and Warmup 4

  8. Due Mon..: Exercise HTML + CSS Menu (parts 1 + 2)
  9. Due Mon.: Warmup #4: CSS Boxes (demo video – approx 25m)
  10. Due Wed.: Blog #1 – 2 Peer Comments 
  11. Due Mon.: Discord Prompt 2 – Small Crit for E2


    SECTION III – DW

  12. DW – refer back to past demos as needed

SECTION I – Web Concepts

1. CSS Box Model + Webfonts

Class7_CSSBoxModel_Webfonts

(ignore exercise 3 in PDF above)

2. Box Model + Webfont Resources

3. CSS3

Class8_CSSBoxModel_CSS3

4. CSS3 + Centering Resources 

5. Self Tests: Check-In

Complete all self quizzes to gauge your understanding or recent concepts. These are not graded but independent assessment.

  1. Links Self Quiz: Links
  2. HTML Elements Self Quiz
  3. CSS Self Quizzes:

SECTION II – assignments

9. Warmup 4

Warmup 4 – The CSS Box Model (5pts)

Learn to apply the CSS box model, utilize CSS3 features, and implement web typography effectively to enhance the layout and visual appeal of your web content. Each box should have a different style. 

Create a New HTML File:
- In Dreamweaver, define a new site called "Warmup4."
Create a new folder on both your local drive and the remote server named "Warmup4."
- Save your new HTML file as lastname_warmup4.html in this folder.

Create Containers:
- In the <body> of your HTML document, create 7 <div> containers.
Example: 
<div class="quote1">Your quote here</div>

Content Population: 
Enter a unique quote (sources: BrainyQuote, GoodReads, Wikiquote) into each of the seven div containers. The quotes are up to you and can be random or thematic. All quotes should include the person (i.e., —-Paul Rand). Ensure that each quote is styled distinctly, reflecting the unique class applied to it.

tStyle Using CSS:
- Inside the <head> section of your HTML, add a <style> tag to write your CSS.
- Define 7 unique classes (e.g., .quote1, .quote2, etc.) and apply a different style to each <div>.
- Utilize the CSS box model properties such as margin, padding, border, and width to style each box.
Example:
.quote1 {
  padding: 20px;
  margin: 10px;
  border: 1px solid black;
  font-family: 'Arial', sans-serif;
}

Implement Web Typography:
- Set up at least 1 webfont from sources like Google or Adobe Fonts, with 4 different styles or weights.
- Apply these fonts to enhance the typography in your divs.
- Ensure text is readable and visually appealing, with appropriate use of font size, color, and line spacing.

CSS3 Features:
- Experiment with CSS3 properties such as box-shadow, border-radius, or text-transform to add creative design elements to each quote box. Use the resources provided and explore!
Example:
.quote2 {
  box-shadow: 2px 2px 5px #888888;
  border-radius: 8px;
}

Save and Upload Your File:

- Ensure all changes are saved in lastname_warmup4.html.
- Upload this file to the "warmup4" folder on your server using D2L Assigments.

8. Exercise – HTML + CSS Menu

20 points – due Monday @noon (reference Week 3 for details)

10. Blog 1 – 2 peer comments (refer back to week 3 for details)

11. Discord Prompt #2: CSS First Impressions

2pts (not accepted late)

This week is about noticing, not perfecting. You’ve just started using CSS to shape hierarchy, spacing, and behavior.  This prompt is a quick check-in, not a formal critique. In-progress work is expected. Short, thoughtful posts > long explanations. 

Note on Teams:
A few teams have had lower participation so far. If that continues, I may merge teams for future prompts to support better interaction. In the meantime, please continue to post and engage to the best of your ability. If you make a clear attempt to participate and your team does not respond, your grade will not be penalized.

Prompt: Share Your Work (1pts): Share one screenshot of your menu as it currently stands (in progress is totally fine). In 2–3 sentences, respond to one of the following:

  • What’s one CSS change that made the biggest visual difference for you?
  • What part of your menu feels the clearest right now?
  • What’s one thing you’re still unsure about or experimenting with?

No need to explain everything… just give us a window into your thinking.

Participation (1pt): Respond to one classmate with something specific you notice:

  • Something that feels especially clear or readable
  • A hierarchy choice that’s working well
  • A question that helps them think further

Think studio feedback, not correction.

  1.  

SECTION III – technical

12. Dreamweaver in Application

This week, we are utilizing DW to create our Warmup 4 and Exercise 2. Refer back to past demos for guidance and review.