sheeptester-forks / cse110-lab-3 Goto Github PK

This Agile standup guide from Atlassian Links to an external site. has a good explanation of what standups are. Essentially, standups are daily meetings where typically, each member gives their status updates so that the team can keep track of sprint progress and resolve blockers. Standup notes are just notes to facilitate this meeting.

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

3 ways to use CSSLinks to an external site.:

• External CSS stylesheet (preferred method for better code readability)
• Inline CSS (helpful for debugging)
• Internal CSS with <style> (convenient for quick experiments)

The bulk of your CSS should be included in an external CSS stylesheet, but do include at least one example of inline and using the <style> element for styling.

Remember how your minutes from Lab2 was looking a little drab? In this lab, we’re going to use Cascading Style Sheets (CSS) to give them a little flair. From the Mozilla Web Docs: 

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.”

3 ways to use CSS:

• External CSS stylesheet (preferred method for better code readability)
• Inline CSS (helpful for debugging)
• Internal CSS with <style> (convenient for quick experiments)

The bulk of your CSS should be included in an external CSS stylesheet, but do include at least one example of inline and using the <style> element for styling. 

Quick CSS Syntax Overview -- CSS styles are applied by selecting an element, and identifying a value (i.e. color, measurement, etc.) to apply to a style property (i.e. width, background-color, etc.). The format looks a little something like this 

    selector {
        property1: value1;
        property2: value2;
    }

for clarity in this lab writeup:

• selectors will be highlighted in green
• properties will be highlighted in purple
• values will be highlighted in orange

Instructions

Use the bulleted lists below as a checklist for your webpage. Include every item from every bullet point in the checklist at least once. If you are unsure of what a specific CSS property does or how it works, feel free to use the Mozilla CSS reference and other resources on the internet to your advantage. This lab will not be graded on visual execution as this is not a visual arts course; that being said we will still be looking to make sure you put in some effort. Feel free to make any changes you want to your html file from the last lab in order to complete this lab.

CSS Checklist

1. General CSS Topics:

• Comment /* write down comments to make your css easier to read */

• Color                                               /* apply colors to your HTML elements */

  • rgb(r, g, b) or rgba(r, g, b, a)     /* red, green, blue, alpha values */
  • #FFF or #FFFFFF                    /* hex codes */
  • hsl(h, s, l) or hsla(h, s, l, a)       /* hue, saturation, lightness, alpha values */
  • Color name (i.e ‘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 (em, lh, ch)

  • Use 3 unique absolute units total (px, pt, cm)

• Box Model     /* configure the containers that holds your HTML content */
  (“long” and “short” refer to longhand and shorthand syntax and should give the same results. They’re simply different ways to declare your style rules, use at least one of each syntax. You must use both long and short hand notations for each of the following: margin, padding, border) 

  • Margin     /* spacing between html elements */

    • Long (margin-top, margin-bottom, margin-left, margin-right)
    • Short (margin: )
    • Auto margins: margin: auto

  • Padding     /* spacing within html elements */

    • Long (padding-top, padding-bottom, padding-left, padding-right)
    • Short (padding: )

  • Borders     /* borders around html elements, hint: 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 these 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 */
    - [x] apply flex to the display property
    - [x] 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 (https://fonts.google.com/). You can load the font in either your HTML or your CSS

2. CSS Selectors

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. For this lab you must use at least one of every bulleted selector method.

• 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)                   /* select multiple elements */
• Combinators (you must use one of each)    /* specify selections based on element positioning in the DOM tree */
  • Descendant Combinator (element element)
  • Child Combinator (element > element)
  • General sibling combinator (element ~ element)
  • Adjacent sibling combinator (element + element)
  • Combining Two Selectors (element.class)

OPTIONAL: If you find yourself wanting to go above and beyond, here are some things you can do:

• CSS Transformations
• CSS Animations

Your GitHub Pages site will be found at <username>.github.io/sp23-cse110-lab3