James Smith

This is the main content area

The main element is used to encapsulate the dominant content of the of a document. There should only be one

• Unordered List Item 1
• Unordered List Item 2
  • Nested Unordered List Item 1
  • Nested Unordered List Item 2
• Unordered List Item 3

1. Ordered List Item 1
2. Ordered List Item 2
   1. Nested Ordered List Item 1
   2. Nested Ordered List Item 2
3. Ordered List Item 3

This is a block quotation. It is used for longer quotes that are set apart from the main text.

• Element selector - h1, p, ul, li, etc.
• Class selector - .header, .button
• ID Selector - #nav, #home, #about
• Pseudo-Selector - :hover,

CSS: Cascading Style Sheets an Inherent property of CSS, the rule that is further down on the CSS file will be applied last, and shown on the screen

Hierarchy

• 1) Inline stlying - Not good practice, CSS will only apply to what it is written

• 2) Internal CSS - In the head of the HTML document, applies to the whole document

• 3) External Stylesheet - link:css

• ID is more specific than class, and class is more specific than element. Therefore, ID will override class, and class will override element. If two of the same type are applied, the one that is lower on the CSS file will be applied.

Box Model

Every HTML element can be considered as a box. The CSS box model describes the rectangular boxes that are generated for elements in the document tree and consists of: margins, borders, padding, and the actual content.

Web Safe Fonts vs Web fonts

• Web Safe Fonts - A set of fonts that are widely available across different operating systems and devices. Examples include Arial, Times New Roman, and Courier New.
• Web Fonts - Custom fonts that can be embedded into web pages using services like Google Fonts or Adobe Fonts. These fonts may not be installed on the user's device but are downloaded when the page loads.
font-family: Specifies the typeface for text in order left to right in the line.
• Font sizes:
  • Select a base number - body text size
  • Select a ratio - determine spacing and relationship between elements
  • Generate Scale
  • Apply to design
• Color Theory
  • Primary Colors - Red, Blue, Yellow
  • Secondary Colors - Green, Orange, Purple
  • Tertiary Colors - Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Purple, Red-Purple
  • Complementary Colors - Colors opposite each other on the color wheel (e.g., Red and Green)
  • Analogous Colors - Colors next to each other on the color wheel (e.g., Blue, Blue-Green, Green)
  • Triadic Colors - Three colors evenly spaced around the color wheel (e.g., Red, Yellow, Blue)
  Color swatch Design Systems Adobe Color Coolors WebAIM Contrast Checker
Hierarchy: Size, weight, color, adn position determine where to look on the page

Week 6 - Layout Conversion and Interactive Components

---

• CSS Positioning
  • Static - Default position, follows normal document flow
  • Relative - Positioned relative to its normal position
  • Absolute - Positioned relative to the nearest positioned ancestor (not static)
  • Fixed - Positioned relative to the viewport, stays in the same place when the page is scrolled
  • Sticky - Toggles between relative and fixed, based on the user's scroll position

• Grid is a 2 dimensional layout system; think x and y axis

• Similar to the flexbox, grid is also predicated on a container + items framweork

  • We apply grid to the container that will be a grid
  • This will then make it look like a grid, and the items inside will be grid items

Styling

• grid-template-columns: Defines the number and size of the columns in the grid
• grid-template-rows: Defines the number and size of the rows in the grid
• grid-gap: Sets the spacing between rows and columns
• grid-column: Specifies how many columns an item should span
• grid-row: Specifies how many rows an item should span
• justify-items: Aligns items horizontally within their grid area
• align-items: Aligns items vertically within their grid area

Week 7: Responsive Design

---

• Local Storage
  • Something that persists from site visit to site visit. Such as Dark Mode on specific websites.
  • Cookies
  • Session Storage stores while the window is open
• Who Owns User Data?
  • When you save in localStorage, it improves experiences, personalization without
  • Organization, user retention, data analytics, shared advertising, aggregate usage patterns
• Data as Power
  • Who can read the data you are providing? Just your JavaScript? Analytics tools? Marketing partners?
  • Profit: Can "innocent" preferences be monetized?
• Queries
  • Media and Queries
    • Media queries thing about the entire page, and allow us to apply CSS based on some property. Max-width:900px, min-width, are most common
    • Container queries do the same, but within a specific container on the page.
    • Breakpoints: When one set of rules takes over from another set of rules
  • Clamp()
    • clamp() scales smoothly between minimum and maximum values.
  • Storage Options
    • LocalStorage: Persistent, domain specific
    • Session Specific
    • Cookies