woowho / fa21-cse110-lab3

Pages link: https://woowho.github.io/fa21-cse110-lab3/

fa21-cse110-lab3's Issues

Final Submission Requirements

Fullfill the following requirements:

Canvas Submission:
You will be submitting the link to your Lab3 repository (not the link to your Github Pages site). Your repo should include:
README.md file with the link to your hosted GitHub Pages site, found at .github.io/fa21-cse110-lab3 (make sure your site link works)
Standup notes template in standup.md
Relevant HTML (from Lab 2) and CSS files (from Lab 3)

Standup Notes

Task Description.

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

CSS General Checklist

CSS Checklist:

3 ways to use CSS (Links 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.

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 (Links to an external site.) 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 (Links to an external site.)/* apply background styles to your elements */
background-color

Unit (Links to an external site.) /* units of measurement for sizing and spacing your elements */
Use 3 unique relative units total
Use 3 unique absolute units total

Box Model (Links to an external site.) /* 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 (Links to an external site.) /* 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 (Links to an external site.)
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 (Links to an external site.) / element positioning on the page /
2 of the following values: static, relative, fixed, absolute, sticky
Apply these values to the position property
Pseudo-class (Links to an external site.) / elements that exist in your document conditionally /
:hover
:active
Layouts
Flexbox (Links to an external site.) / 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 (Links to an external site.) / 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 (Links to an external site.)
Fonts (Links to an external site.) / pick varying font styles to make your text fun to read */
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

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

Pull Request.

Task Description.

• As you go through part 2, make incremental pull requests to resolve the issues you’ve made (ideally 1 pull request per issue)

1. Instead of pushing straight to master, create a new branch to push to.
2. Make your changes on this branch.
3. Make a pull request from this branch to merge changes back into the main branch. Before you merge the pull request, link this pull request to its corresponding issue (Links to an external site.).
4. Repeat this process for each issue.