ayoung19/wi21-cse110-lab3

wi21-cse110-lab3's Issues

Borders

Requirement Details:

• border-style
• border-color
• border-width
• border-radius

Element Selector

Requirement Details:

• (element)

Media Query

Requirement Details:

• At least one query based on the screen width

Grid

Requirement Details:

• Must have more than two children within the element that is using grid. Must use minimum three of the flexbox related attributes.

Class Selector

Requirement Details:

• (.class)

Grouping / Combinators

Requirement Details:

• Selector List (element, element)
• Descendant Combinator (element element)
• Child Combinator (element > element)
• General sibling combinator (element ~ element)
• Adjacent sibling combinator (element + element)
• Combining Two Selectors (element.class)

Current flexbox example only has 2 children

Assignment requires > 2 children in flex container.

Comments

Requirement Details:

• /* example */

Pseudo-class

Requirement Details:

• :hover
• :active

Box Model

Requirement Details:

• Margins
  • Long (margin-top, margin-bottom, margin-left, margin-right)
  • Short (margin: top right bottom left)
  • auto
• Padding
  • Long (padding-top, padding-bottom, padding-left, padding-right)
  • Shorthand (padding: top right bottom left)
• Height / Width
  • Set the height and width for an element

Unit

Requirement Details:

• 3 relative
• 3 absolute

Display

Requirement Details:

• Experiment with these types: none, block, inline-block, inline. Include at least two of them in your page.

Universal Selector

Requirement Details:

• (*)

Max-width / Min-width

Requirement Details:

• Width has to be variable (like a percentage)

Flexbox

Requirement Details:

• Must have more than two children within the element that is using flexbox. Must use minimum three of the flexbox related attributes.

Text

Requirement Details:

• color
• text-decoration
• text-align

Colors

Requirement Details:

• rgb(r, g, b), rgba(r, g, b, a)
• #FFF, #FFFFFF
• hsl(h, s, l), hsla(h, s, l, a)
• Color name (i.e ‘green’)

Backgrounds

Requirement Details:

• background-color

Position

Requirement Details:

• Experiment with these attributes: static, relative, fixed, absolute, sticky. Include at least two of them in your page.

Add standup notes template

Fonts

Requirement Details:

• Include and use a 3rd party font (https://fonts.google.com/ (Links to an external site.)). You can load the font in either your HTML or your CSS

Pseudo-class Selectors

Requirement Details:

• (e.g. p::hover)

ID Selector

Requirement Details:

• (#id)

Attribute Selector

Requirement Details:

• (e.g. [attribute=foo])