2.10 | on-ground | css3 + webfont setup

Due Today:

  • 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
  • Blog 1 – 2 Peer Comments

For Today: CSS3, Webfonts Setup, Begin Warmup 4, E2 small group critique

Class7_CSSBoxModel_Webfonts

CSS Box Model Review + CSS3

Class8_CSSBoxModel_CSS3

Self-Quiz-CSS Box Model:

  1. Draw and label all the components of the CSS box model.
  2. How is the width of any element calculated? Hint
  3. What are the 3 properties every border needs?
  4. How can a border declaration be written using shorthand?
  5. Width Quiz
  6. Padding Quiz
  7. Margin Quiz
  8. Border Quiz

CSS3 Resources 

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 D2L.

 

Due Next Class 2.12 (by end of class – 4:45)

  • Warmup 4

Due Next Tuesday 2.17 @2:15

  • Exercise Menu (submit via D2L)