lolakoala/LolaBrenner_Prework

## LolaBrenner_Prework
# Day 1 Prework
1. On a website, what is the purpose of HTML code? HTML code provides the structure for a website and organizes the content you want to display through grouping or hierarchy.
2. What is the difference between an element and a tag? An element is part of html structure. It tells us how the content is being organized. It's usually made up of an opening and closing tag. The tag acts as a container for the actual content.
3. Why do we use attributes in HTML elements? Attributes allow us to provide more information about a website's content without muddying up the structure.
4. Describe the purpose of the head, title, and body HTML elements. The body element contains all information displayed within the browser window. The head element contains information about the website that is not meant to be displayed, and also contains the title element. The title element displays the title of your webpage in the title bar or tabs.
5. In your browser (Chrome), how do you view the source of a website? From the menu above the browser- View > Developer > View Source
6. List five different HTML elements and what they are used for.
  1. <h1> (up to <h6>) are used for headings and subheadings, one way of grouping information together.
  2. <b> presents text as bold, making it stand out from other text.
  3. <br /> creates a line break within a paragraph, sending text to a new line without creating a new paragraph.
  4. <p> is the paragraph element, and contains text for a paragraph.
  5. <sup> and <sub> allow text to be superscript or subscript.
7. What are empty elements? Elements that do not need a closing tag are empty elements. (<br /> <hr />)
8. What is semantic markup? Elements that are not intended to affect the structure of a web page but do add extra information.
9. What are three new semantic elements introduced in HTML 5? <nav> <article> <aside>
https://codepen.io/lolakoala/pen/YQZOZR
## Gear Up
1. What role does empathy play in your life and how has it helped you? The most obvious role of empathy in my life is in my relationships. I live in a house with 4 other adults, and we only live harmoniously by being able to understand everyone's concerns and empathize with them. Being able to listen to each other instead of becoming defensive helps us work as a team to accomplish goals together.
2. How does empathy help you build better software? Empathy allows people to build better software because when you can put yourself into the user experience, you will build software with the user in mind instead of from the POV of "what's the most efficient way to do this."
3. Why is empathy important for working on a team? Often in team settings, one person stands out as the leader who can often steam roll other team members, especially if others are more timid or introverted. If everyone on the team can use empathy, the team can work more cohesively by actively listening to everyone and incorporating everyone's ideas.
4. Describe a situation in which your ability to empathize with a colleague or teammate was helpful. As a kitchen supervisor, I was able to empathize with a new female team member who had come from a situation in which she was sexually harassed at her previous job. Because I have had similar issues myself, I was able to communicate with her how to set boundaries for male coworkers and who to contact if she felt uncomfortable, and I also made it clear to the team that sexual harassment was unacceptable. I think as a result she felt more welcomed on the team and was able to succeed at a faster pace.
5. When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios? I find it most difficult to be empathetic when I feel like I am not being heard or understood, or if I feel dismissed. I can work on speaking out when I feel like this and standing up for myself and my own ideas.

# Day 2 Prework
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
  1. Ordered- a numbered list, the steps go in order
  2. unordered- no particular order matters, bulleted
  3. definition- terms followed by a definition, vocab list
2. What is the basic structure of an element used to link to another website? <a href="http://www.facebook.com">Facebook</a>
3. What attribute should you include in a link to open a new tab when the link is clicked? target="_blank"
4. How do you link to a specific part of the same page? First, give id attributes to elements you want to use. Use the same element, but use the id name in place of the web address. <a href="#idname">text</a>
1. What is the purpose of CSS? CSS allows you to create rules to specify how content will appear on a web page, to style the content.
2. What does CSS stand for? What does cascading mean in this case? Cascading Style Sheet, Cascading means that styles can fall from one style sheet to another, enabling multiple style sheets to be used for one html doc.
3. What is the basic structure of a CSS rule? a selector and a declaration; declarations have property and value
4. How do you link a CSS stylesheet to your HTML document? <link href="css/styles.css" type="text/css" rel="stylesheet" />
5. Why is it useful to use external stylesheets as opposed to using interal CSS? When you use extrernal CSS for more than one page, you can have all pages look similar without creating new CSS for them, and you can control all style elements from one CSS file.
6. Describe what a color hex code is. six digit code that represents the amount of red, green, and blue in a color, preceded by #
7. What are the three parts of an HSL color property? hue (expressed as an angle), saturation (percentage), lightness (percentage, 50%-normal)
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
  1. serif- extra details on the ends of the main strokes, considered easier to read long passages;
  2. sans-serif- straight ends, cleaner design, easier to read in small print
  3. monospace- every letter is same width, makes text easier to follow
9. When specifiying font-size, what are the main three units used? pixels (more precise), percentages (of the default size), ems (width of the letter m)

# Day 3 Prework
1. If you're using an input element in a form, what attribute controls the behavior of that input? type
2. What element is used to create a dropdown list? <select>
3. If you're using an input element to send form data to a server, what should the type attribute be set to? type="submit"
4. What element is used to group similar form items together? <fieldset>

1. Describe the differences between border, margin, and padding.
  1. Border- separates the edge of one box from another
  2. Margin- space outside the width of the border
  3. Padding- space between the border of a box and the box's content
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? top, right, bottom, left
3. Describe the difference between block-level and inline elements. Block level elements act within the invisible box. Inline elements flow like text within a paragraph.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning positions elements in relation to the browser window instead of the containing element. The z-index property allows you to control which box appears on top.
5. What is the difference between a fixed and liquid layout? Fixed width does not change size when user changes size of their window. Liquid changes size as size of browser window changes.

# Day 4 Prework
1. In an image element, why is the alt attribute important? It provides a text description in case you cannot see the image or for people using screen reader software.
2. What determines if an image element is inline or block? An image will be inline if placed within a block element, such as a paragraph. If treated as it's own element, the image will be block.
3. What are the benefits of jpg or png image file formats? Photos are best saved as JPEGs to preserve the nuance of color. Illustrations or logos that use flat colors are better saved as GIFs or PNGs.
1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? Instead of denoting height and width for each image, if you are using similar sizes, you can give each image a class name and specify the height and width of each class in css, making code neater and more efficient.
2. What is an image sprite, and why is it useful? A sprite is when a single image is used for several different parts of an interface. It's useful for things like buttons, which you might want to look differently if the user is hovering or has clicked on it.

# Day 5 Prework
1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numbers are numerical values, strings are text enclosed in quotes, boolean values either denote true or false.
2. What are the three logical operators that JavaScript supports? and (&&), or(||), and not(!)
3. What is the naming convention used for variables? Any word that is not a keyword, may not include spaces, may include digits but cannot start with digit, no punctuation except $ and _
4. What is the difference between an expression and a statement? A fragment of code that produces a value is an expression. A statement is an expression or combination of expressions that produces a complete program.
5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? var, continue, function, true, private... It's important to avoid using reserved words for variable names because JavaScript won't recognize them as a variable and instead as some other part of code.
6. What is control flow, and why is it useful for programming? Control flow is the order in which expressions or statements are executed, or giving your program a specific order in which to execute expressions. Knowing or manipulating control flow ensures you get the result you intend by running the expressions in the order you intend.

# Say 6 Prework
1. If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console? sayHello withouth () is incorrect because it has no parameters, or no placeholder for parameters- no defined value?
2. What is the keyword return used for? determines the value a function returns
3. What are function parameters? names listed in the function definition
4. What is the naming convention used for function names?

# Day 7 Prework

Choose one question from each of these sections (so 5 total questions), and find one site that is good at supporting that question, and find another site that violates that question.
1. How much work does the user have to do to get what they want?
Dating sites have a difficult time getting this right, I think. OKCupid requires a lot of work to match people successfully, filling out an extensive profile, answering hundreds of questions, etc. The site isn't smooth to navigate, and the security measures that you are able to put in place are not clear or easy to access.
Bumble is a much simpler dating site/app, and has rectified one major problem with dating sites- harassment. The woman must make the first move, and if she does not respond then the other person has no way to contact her after 24 hours.
2. Have you provided everything the user needs to know?
I have two hair salon websites to compare. The first gives me very little relevant information. You cannot book an appointment online, they do not have their hours listed, and there are no portfolios or examples of their work. headhunterhairstyling.com
dothebangthingsalon.com provides a portfolio or work and a way to make online appointments, as well as reviews.
3. Do users think it looks good? Do they trust it immediately?
blinkee.com This site is a headache and disorganized to the point that I would not give these people my credit card number.
ewedding.com This site is clear, clean, and professional. From the consiceness of their design and the elegance of the details, I would trust them to build a wedding website for me.
4. Does it sound confident and tell the user what to do?
mailchimp.com This is a great example of a website that builds a strong relationship with the used. It provides clear direction on how to use it effectively.
An example of bad ux copy would be sites that require passwords but do not tell you upfront what the password requirements are, or forms with required fields that are not marked as required.
http://www.lazoroffice.com/ At a glance, it is difficult to decipher what this website is about, and it's full of images that are also links but where do they go and why?
5. Analysis
FB is an example of a site that is constantly collecting data from users and utilizing that data to make the site better.
http://www.suzannecollinsbooks.com/ This is a website of a popular author, but it misses so many chances to allow the user to buy books or sign up for an email list. The site itself is barely readable.
	# Day 1 Prework
	1. On a website, what is the purpose of HTML code? HTML code provides the structure for a website and organizes the content you want to display through grouping or hierarchy.
	2. What is the difference between an element and a tag? An element is part of html structure. It tells us how the content is being organized. It's usually made up of an opening and closing tag. The tag acts as a container for the actual content.
	3. Why do we use attributes in HTML elements? Attributes allow us to provide more information about a website's content without muddying up the structure.
	4. Describe the purpose of the head, title, and body HTML elements. The body element contains all information displayed within the browser window. The head element contains information about the website that is not meant to be displayed, and also contains the title element. The title element displays the title of your webpage in the title bar or tabs.
	5. In your browser (Chrome), how do you view the source of a website? From the menu above the browser- View > Developer > View Source
	6. List five different HTML elements and what they are used for.
	1. <h1> (up to <h6>) are used for headings and subheadings, one way of grouping information together.
	2. <b> presents text as bold, making it stand out from other text.
	3. <br /> creates a line break within a paragraph, sending text to a new line without creating a new paragraph.
	4. <p> is the paragraph element, and contains text for a paragraph.
	5. <sup> and <sub> allow text to be superscript or subscript.
	7. What are empty elements? Elements that do not need a closing tag are empty elements. (<br /> <hr />)
	8. What is semantic markup? Elements that are not intended to affect the structure of a web page but do add extra information.
	9. What are three new semantic elements introduced in HTML 5? <nav> <article> <aside>
	https://codepen.io/lolakoala/pen/YQZOZR
	## Gear Up
	1. What role does empathy play in your life and how has it helped you? The most obvious role of empathy in my life is in my relationships. I live in a house with 4 other adults, and we only live harmoniously by being able to understand everyone's concerns and empathize with them. Being able to listen to each other instead of becoming defensive helps us work as a team to accomplish goals together.
	2. How does empathy help you build better software? Empathy allows people to build better software because when you can put yourself into the user experience, you will build software with the user in mind instead of from the POV of "what's the most efficient way to do this."
	3. Why is empathy important for working on a team? Often in team settings, one person stands out as the leader who can often steam roll other team members, especially if others are more timid or introverted. If everyone on the team can use empathy, the team can work more cohesively by actively listening to everyone and incorporating everyone's ideas.
	4. Describe a situation in which your ability to empathize with a colleague or teammate was helpful. As a kitchen supervisor, I was able to empathize with a new female team member who had come from a situation in which she was sexually harassed at her previous job. Because I have had similar issues myself, I was able to communicate with her how to set boundaries for male coworkers and who to contact if she felt uncomfortable, and I also made it clear to the team that sexual harassment was unacceptable. I think as a result she felt more welcomed on the team and was able to succeed at a faster pace.
	5. When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios? I find it most difficult to be empathetic when I feel like I am not being heard or understood, or if I feel dismissed. I can work on speaking out when I feel like this and standing up for myself and my own ideas.

	# Day 2 Prework
	1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
	1. Ordered- a numbered list, the steps go in order
	2. unordered- no particular order matters, bulleted
	3. definition- terms followed by a definition, vocab list
	2. What is the basic structure of an element used to link to another website? <a href="http://www.facebook.com">Facebook</a>
	3. What attribute should you include in a link to open a new tab when the link is clicked? target="_blank"
	4. How do you link to a specific part of the same page? First, give id attributes to elements you want to use. Use the same element, but use the id name in place of the web address. <a href="#idname">text</a>
	1. What is the purpose of CSS? CSS allows you to create rules to specify how content will appear on a web page, to style the content.
	2. What does CSS stand for? What does cascading mean in this case? Cascading Style Sheet, Cascading means that styles can fall from one style sheet to another, enabling multiple style sheets to be used for one html doc.
	3. What is the basic structure of a CSS rule? a selector and a declaration; declarations have property and value
	4. How do you link a CSS stylesheet to your HTML document? <link href="css/styles.css" type="text/css" rel="stylesheet" />
	5. Why is it useful to use external stylesheets as opposed to using interal CSS? When you use extrernal CSS for more than one page, you can have all pages look similar without creating new CSS for them, and you can control all style elements from one CSS file.
	6. Describe what a color hex code is. six digit code that represents the amount of red, green, and blue in a color, preceded by #
	7. What are the three parts of an HSL color property? hue (expressed as an angle), saturation (percentage), lightness (percentage, 50%-normal)
	8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
	1. serif- extra details on the ends of the main strokes, considered easier to read long passages;
	2. sans-serif- straight ends, cleaner design, easier to read in small print
	3. monospace- every letter is same width, makes text easier to follow
	9. When specifiying font-size, what are the main three units used? pixels (more precise), percentages (of the default size), ems (width of the letter m)

	# Day 3 Prework
	1. If you're using an input element in a form, what attribute controls the behavior of that input? type
	2. What element is used to create a dropdown list? <select>
	3. If you're using an input element to send form data to a server, what should the type attribute be set to? type="submit"
	4. What element is used to group similar form items together? <fieldset>

	1. Describe the differences between border, margin, and padding.
	1. Border- separates the edge of one box from another
	2. Margin- space outside the width of the border
	3. Padding- space between the border of a box and the box's content
	2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? top, right, bottom, left
	3. Describe the difference between block-level and inline elements. Block level elements act within the invisible box. Inline elements flow like text within a paragraph.
	4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning positions elements in relation to the browser window instead of the containing element. The z-index property allows you to control which box appears on top.
	5. What is the difference between a fixed and liquid layout? Fixed width does not change size when user changes size of their window. Liquid changes size as size of browser window changes.

	# Day 4 Prework
	1. In an image element, why is the alt attribute important? It provides a text description in case you cannot see the image or for people using screen reader software.
	2. What determines if an image element is inline or block? An image will be inline if placed within a block element, such as a paragraph. If treated as it's own element, the image will be block.
	3. What are the benefits of jpg or png image file formats? Photos are best saved as JPEGs to preserve the nuance of color. Illustrations or logos that use flat colors are better saved as GIFs or PNGs.
	1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? Instead of denoting height and width for each image, if you are using similar sizes, you can give each image a class name and specify the height and width of each class in css, making code neater and more efficient.
	2. What is an image sprite, and why is it useful? A sprite is when a single image is used for several different parts of an interface. It's useful for things like buttons, which you might want to look differently if the user is hovering or has clicked on it.

	# Day 5 Prework
	1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numbers are numerical values, strings are text enclosed in quotes, boolean values either denote true or false.
	2. What are the three logical operators that JavaScript supports? and (&&), or(\|\|), and not(!)
	3. What is the naming convention used for variables? Any word that is not a keyword, may not include spaces, may include digits but cannot start with digit, no punctuation except $ and _
	4. What is the difference between an expression and a statement? A fragment of code that produces a value is an expression. A statement is an expression or combination of expressions that produces a complete program.
	5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? var, continue, function, true, private... It's important to avoid using reserved words for variable names because JavaScript won't recognize them as a variable and instead as some other part of code.
	6. What is control flow, and why is it useful for programming? Control flow is the order in which expressions or statements are executed, or giving your program a specific order in which to execute expressions. Knowing or manipulating control flow ensures you get the result you intend by running the expressions in the order you intend.

	# Say 6 Prework
	1. If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console? sayHello withouth () is incorrect because it has no parameters, or no placeholder for parameters- no defined value?
	2. What is the keyword return used for? determines the value a function returns
	3. What are function parameters? names listed in the function definition
	4. What is the naming convention used for function names?

	# Day 7 Prework

	Choose one question from each of these sections (so 5 total questions), and find one site that is good at supporting that question, and find another site that violates that question.
	1. How much work does the user have to do to get what they want?
	Dating sites have a difficult time getting this right, I think. OKCupid requires a lot of work to match people successfully, filling out an extensive profile, answering hundreds of questions, etc. The site isn't smooth to navigate, and the security measures that you are able to put in place are not clear or easy to access.
	Bumble is a much simpler dating site/app, and has rectified one major problem with dating sites- harassment. The woman must make the first move, and if she does not respond then the other person has no way to contact her after 24 hours.
	2. Have you provided everything the user needs to know?
	I have two hair salon websites to compare. The first gives me very little relevant information. You cannot book an appointment online, they do not have their hours listed, and there are no portfolios or examples of their work. headhunterhairstyling.com
	dothebangthingsalon.com provides a portfolio or work and a way to make online appointments, as well as reviews.
	3. Do users think it looks good? Do they trust it immediately?
	blinkee.com This site is a headache and disorganized to the point that I would not give these people my credit card number.
	ewedding.com This site is clear, clean, and professional. From the consiceness of their design and the elegance of the details, I would trust them to build a wedding website for me.
	4. Does it sound confident and tell the user what to do?
	mailchimp.com This is a great example of a website that builds a strong relationship with the used. It provides clear direction on how to use it effectively.
	An example of bad ux copy would be sites that require passwords but do not tell you upfront what the password requirements are, or forms with required fields that are not marked as required.
	http://www.lazoroffice.com/ At a glance, it is difficult to decipher what this website is about, and it's full of images that are also links but where do they go and why?
	5. Analysis
	FB is an example of a site that is constantly collecting data from users and utilizing that data to make the site better.
	http://www.suzannecollinsbooks.com/ This is a website of a popular author, but it misses so many chances to allow the user to buy books or sign up for an email list. The site itself is barely readable.