chiahan1 / fa22-cse110-lab3 Goto Github PK

Task:

Update readme file

Features:

None

Details:

Update readme file with the new url
https://chiahan1.github.io/fa22-cse110-lab3/

Task:

Use CSS Selectors

Features:

CSS Selectors

Details:

CSS selectors allow you to select the HTML element you want to style. Each type of selector targets a different identifier on your HTML element.

• Class Selector (.class)
• ID Selector (#id)
• Universal Selector (*)
• Element Selector (element)
• Attribute Selector (e.g. [attribute=foo])
• Pseudo-class Selector (e.g. p:hover)
• Selector List (element, element)
• Combinators (you must use one of each)
  • Descendant Combinator (element element)
  • Child Combinator (element > element)
  • General sibling combinator (element ~ element)
  • Adjacent sibling combinator (element + element)
  • Combining Two Selectors (element.class)

Task:

CSS Checklist

Features:

General CSS Topics

Details:

• Comment: Write down comments to make your css easier to read
• Color: Apply colors to your HTML elements
  • Red, green, blue, alpha values e.g. rgb(r, g, b) or rgba(r, g, b, a)
  • Hex codes e.g. #FFF or #FFFFFF
  • Hue, saturation, lightness, alpha values e.g. hsl(h, s, l) or hsla(h, s, l, a)
  • Color name e.g. orange
• Background: Apply background styles to your elements
  • background-color
• Unit: Units of measurement for sizing and spacing your elements
  • Use 3 unique relative units total
  • Use 3 unique absolute units total
• Box Model: Configure the containers that holds your HTML content

  • Margin: Spacing between html elements

    • Long (margin-top, margin-bottom, margin-left, margin-right)
    • Short (margin: <top> <right> <bottom> <left>)
    • Auto Margins (margin: auto)

  • Padding: Spacing within html elements

    • Long (padding-top, padding-bottom, padding-left, padding-right)
    • Short (padding: <top> <right> <bottom> <left>)
• Borders: Borders around html elements

  Hints: apply borders before testing out padding and margin to better understand the difference between the two

  • border-style
  • border-color
  • border-width
  • border-radius
• Text: Style your text
  • color
  • text-decoration
  • text-align
• Display:
  • Experiment with these values: none, block, inline-block, inline. Include at least two of them in your page.
  • Apply theses values to the display property
• Sizing: Set the height and width for an element
  • height
  • width
  • max-width
  • min-width
• Position: Element positioning on the page
  • 2 of the following values: static, relative, fixed, absolute, sticky
    • Apply these values to the position property
• Pseudo-class: Elements that exist in your document conditionally
  • :hover
  • :active
• Layouts:
  • Flexbox: Allow your elements to lay themselves out automatically
    • Apply flex to the display property
    • Must have more than two children within the element that is using flexbox. Must use minimum three of the flexbox related attributes
  • Grid: Instantiate a grid for your layouts
    • Apply grid to the display property
    • Must have more than two children within the element that is using the grid. Must use a minimum of three of the grid related attributes
• Responsiveness: Make your website friendly for multiple devices
  • At least one query based on the screen width
  • Media Query
• Fonts: Pick varying font styles to make your text fun to read
  • Include and use a 3rd party font (Google Fonts)

Task:

Create a standup notes

Features:

None

Details:

Create a standup notes template in a Markdown file standup.md