#1705 Prework Day- David Becker

DavidBecker_Prework1.md

Turing 1705 Prework - David Becker

HTML Structure - Codepen

Day 1

1. On a website, what is the purpose of HTML code?

• HTML allows us to describe both the structure and content of a web page. It gives us the ability to take non-formatted text and re-format for the web in the most basic ways.

2. What is the difference between an element and a tag?

• HTML uses elements to describe the structure of a page, while a tag tells you about the content or information inside each element. Elements use both an opening and closing tag to tell the web page when an element begins and ends.

3. Why do we use attributes in HTML elements?

• Attributes allow us to provide more information about the content of an element. The attribute also allows us to be more specific when selecting elements to style in a CSS stylesheet. They usually are placed in the opening tag and contain a name and a value.

4. Describe the purpose of the head, title, and body HTML elements.

• The head element contains information about the page, which will not show up visually on the page. Considered the metadata, this is where links to CSS will be. The title element shows up on the tab for the page (or above the URL if the browser does not support tabs). The body element contains all of the content that will show up on the page. The body might also contain a script for a javascript file.

5. In your browser (Chrome), how do you view the source of a website?

• 3 ways to view this:
  1. right-click (view page source)
  2. Top Toolbar (View - Developer - View Source)
  3. Keyboard Shortcut - Command + Option + U

6. List five different HTML elements and what they are used for. For example, <p></p> is a paragraph element, and it is used to represent a paragraph of text.
7. <h1></h1> - used to represent the first or most important heading on a page (they're can only be one of each heading level (h1-h6, 1 being the largest).
8. <strong></strong> - bolds anything contained inside tags, also denotes something of importance
9. <hr/> - Horizontal rule, this is an empty element, which allows us to put a small line between elements
10. <address></address> - This element contains the contact details for the author of the page
11. <abbr></abbr> - Refers to an abbreviation or acronym, A title attribute specifies the full term and the full term will show up when element on web page is hovered over
12. What are empty elements?

• Empty elements do not have any words between an opening and closing tag. Many times they denote a break between themes in a web page.

8. What is semantic markup?

• This markup refers to any emphasis placed in text. It provides just a bit more information for the web page.

9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
10. <header></header> - contains the heading of a group of elements (a web page could have multiple header elements)
11. <nav></nav> - contains the major navigational blocks on a sit
12. <article></article> - contains any content that should stand alone (can be nested inside each other)

Gear Up

• What role does empathy play in your life and how has it helped you?
• How does empathy help you build better software?
• Why is empathy important for working on a team?
• Describe a situation in which your ability to empathize with a colleague or teammate was helpful.
• 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 believe human nature has two sides: an empathetic side and a selfish side. We've reached a major turning point in the world where modern technology contributes to both the increase and decrease of empathetic personality traits. In one regard, technology such as cell phones act as a huge barrier between people. These devices allow us to hide behind the screen and choose selfishness over empathy, albeit sometimes unconsciously doing so. In another regard, these wonders of the modern world help us connect with people we might only see once a year or with issues halfway across the globe. Yes, maybe what we perceive as empathy towards others that we get through technology might be superficial half the time, but this possibility still exists. So am I empathetic or selfish? Do I truly believe that when I'm perceiving myself to be empathetic, I honestly am being compassionatie of others? Can I really say that when I listen, I'm actually listening? Do I even want to be empathetic? These are questions that run through my head all of the time. And to tell you the truth, I don't know the answers yet and maybe I never will. From what I can see, true empathy (that which reaches the end of the spectrum) cannot exist until you yourself have actually lived some particular situation that you're trying to empathize with. We can get close, but really, everyone is different, which means that every person's situation is also different, even if just a tiny amount. When I try to empathize, I stick to a few key traits: listening well, listening well some more, and doing what is necessary (maybe this doesn't always feel comfortable). Empathy helps me connect with people at its core. But it also means that I might be able to see something I was previously blind to. And yet, the word "I" keeps appearing. This idea of empathy helps understand you and your situation. Since it always reveals a bit of selfishness, though, it helps to maintain this, which is incredibly beneficial to the self and to others.

Empathy is important for all parts of building better products. Human-centered design is based on the idea that to better provide a service for someone, we need to understand their situation. We must put away all assumptions and read between the lines. We cannot help motivate behavior without knowing what behavior is wanted or needed. When we work in a team to provide such things, each team member brings different life experiences, values, cultural differences, geographic differences, personality traits, or knowledge to the table (the list goes on). Without considering these, how can we get to the best possible solution for everyone? Teams are about the whole, not the part. Then we need to empathize with the user of the product. Difficult, yes, but doable. Rather, incredibly important, maybe even necessary.

If I could suggest one way in which empathy proved important to me, it would be more of a a general situation that I often noticed while a student at Colorado College. I consistently took discussion based classes. Now, what you must realize is that CC is a homogenous place (at least for the most part). In classes that deal with sustainability issues, the majority of the time, one side of the spectrum exists. You can probably guess which side it is: the incredibly liberal and generally "save the environment" side. Despite what side I fell on, over and over and over, I noticed that we never really discussed the other side to things. We never saw through the eyes of the people that cared more about other things than the environment. In this case, I used empathy to play a bit of devil's advocate. Obviously, playing devil's advocate is not always the best option, but in this case, I grew up around many of those people that fell on the opposite end of the spectrum. I talked to them and listened to them all the time. Did I agree with them? No, but that didn't mean I could not empathize and come to a compromise. In this way, many of the discussion-based classes I took, I started to develop a more holistic view of these important issues and many times, classmates started to take on the challenge. It continued to make classes a bit more widespread and it was incredibly helpful in coming to a more unbiased conclusion.

I can really only think of one situation where I would find it incredibly difficult to be empathetic. When a team member is unwilling to also be empathetic. Not to say that one side should then give up and say "screw it". It would just be very hard in this particular situation. But if we learned anything from the talks and readings, it's that empathy can be conjured up. And I would say it comes down to one word in order to improve how you handle this situation. That is patience.

prework2_DavidBecker.md

#Prework Day 2 Chapters 3+4

1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?

• An ordered list (<ol>) is numbered, an unordered list(<ul>) begin with a bullet point, and a definition (<dl>) is a set of terms (with each's definition). The ordered and unordered lists can contain <li> items, while the definition lists contain <dt> (contains term being defined) and <dd> (contains the definition) elements.

2. What is the basic structure of an element used to link to another website?
   • <a href = "link URL">Text describing link</a> - opening link tag, text the user clicks on, closing link tag
3. What attribute should you include in a link to open a new tab when the link is clicked?
   • the target attribute: target="_blank"> / as well as informing the user the link will open in a new window
4. How do you link to a specific part of the same page?
   • first you need you identify the points in the page that the link will go to (using the ID attribute that starts with either a letter or an underscore), then you can use the href attribute starting with a # symbol followed by the value of the ID attribute

Chapters 10+11+12

1. What is the purpose of CSS?
   • CSS controles the rules that specify how the content of an element should appear (called properties)
2. What does CSS stand for? What does cascading mean in this case?
   • CSS- Cascading Style Sheets/ cascading means that the web page reads and executes properties based on specificity (top to bottom), meaning you can overwrite generic rules with more specific rules
3. What is the basic structure of a CSS rule?
   • Contains two parts: a selector (or group of selectors) and a declaration containing a property and it's value - p { color: green;}
4. How do you link a CSS stylesheet to your HTML document?
   • <link href="name.css" type="text/css" rel="stylesheet">
5. What is it useful to use external stylesheets as opposed to using internal CSS?
   • We can reuse stylesheets for multiple web pages (DRY method), it gives the ability to alter the appearance of multiple elements at once, and HTML code is easier to read
6. Describe what a color hex code is.
   • Hex values represent (in order) red, green, and blue colors; written as #000000 (six numbers, each color getting two numbers)
7. What are the three parts of an HSL color property?
   • Hue (color circle=values 0-360), Saturation (amount of gray in a color, 0%-100%), Lightness (amount of white or black in a color, also represented by percent), can also contain transparency for HSLA property (0-1.0)
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
   • Serif (extra details [serifs] on the ends of the main strokes of the letters), Sans Serif (straight ends to letters, cleaner design), and monospace (every letter is the same width)
9. When specifiying font-size, what are the main three units used?
   • Pixels (#px, default text size is 16px), Percentages (#%), and EMS (#em)

prework3_DavidBecker.md

#Prework Day 3 Chapter 7

1. If you're using an input element in a form, what attribute controls the behavior of that input?
   • the type attribute controls the behavior of the input (type = "checkbox")
2. What element is used to create a dropdown list?
   • <select>with <option> elements
3. If you're using an input element to send form data to a server, what should the type attribute be set to?
   • It depends on what is being inputed into the form. If we have text, then it would be <type="text"> or passwords: <type="password">
4. What element is used to group similar form items together?
   • <fieldset> , which can contain a <legend> element as well for a caption

Chapter 13 + 15

1. Describe the differences between border, margin, and padding.
   • Border- separates the edge of one box from another, Margin- refers to edge just outside the border (creates gaps between borders of two adjacent boxes), Padding- space between the border of a box and any content contained within the box
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
   • Refers to sides in a clockwise order: top, right, bottom, left
3. Descirbe the different between block-level and inline elements.
   • block level elements take up their own line, while inline elements flow between surrounding text/ block elements are the main building blocks of a layout/ block elements can be contained inside other block elements (the outside block is known as the containing or parent element)
4. What is the role of fixed positioning, and why is z-index important in the scenario of using foxed positioning?
   • Fixed positioning positions an element in relation to the browser window, so when a user scrolls, the element stays in the same place on the browser window/ the z-index allows us to prevent overlapping elements by stacking context (sort of like 'bring to front' feature), the higher the index the more importance it holds in seeing it for overlapped elements
5. What is the difference between a fixed and liquid layout?
   • fixed layout - do not change size as the user increases or decreases the size of their window (tend to use pixels) / liquid layout - increase or decrease as the browser window size is changed (tend to use percentages or em)

prework4_DavidBecker.md

#Prework Day 4 Chapter 5

1. In an image element, why is the alt attribute important?

• the alt attribute provides a description for the image for search engine optimization or people that are visually impaired

2. What determines if an image element is inline or block?

• where the image is placed in your code/ if the image is placed inside another block element, it will become an inline element

3. What are the benefits of jpg or png image file formats?

• JPEG - used when you have numerous colors in a picture (normally regular photos) / PNG - used mainly for logos, illustrations, and diagrams that have flat colors

Chapter 16

1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?

• it helps the pages load more smoothly and we can specify size of multiple images at once, DRY method (keeps things easier to read and fix)

2. What is an image sprite, and why is it useful?

• An Image Sprite is when a single image is used for several different parts of an interface / the benefit is that the web browser only needs to request one image instead of multiples, making the page load faster

prework5_DavidBecker.md

#Prework Day 5 Eloquent Javascript Chapters 1 + 2

1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.

• Numbers - numeric values (can do everything to them that you can do to normal numeric values) / strings - represent text (written as "text") and can be concatenated/
• booleans - true/false values (used for comparisons)

2. What are the three logical operators that JavaScript supports?

• and (&), or (||), and not(!)

3. What is the naming convention used for variables?

• variables can be any word that isn't a keyword or reserved word and can contain numbers (not at the beginning) but not spaces, punctuation (Except for the characters $ and _) (format is camelCase)

4. What is the difference between an expression and a statement

• an expression is any fragment of code that produces a value, while a statement is a full sentence in a human language (could be made up of expressions)

5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?

• "super", "null", "with", "delete" - it's important to not use these because they already are attached to JavaScript environments and will cause variable definitions to not work as expected

6. What is control flow, and why is it useful for programming?

• Control Flow means that the computer reads the code from top to bottom / this is useful because it helps us organize code in a way that is easy to read, easy to execute, and easy to figure out how code will run

prework6_DavidBecker.md

#Prework Day 6

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 will print the function sayHello to the console and sayHellow() will print "Hello!" (runs whatever is inside the function) to the console

2. What is the keyword return used for?

• this keyword stores whatever value is asked to store after the return keyword (return 8*8, will store 64)

3. What are function parameters?

• Values that the caller of the function give to the function (Behave like regular variables, but are local to the function)

4. What is the naming convention used for function names

• We can either assign a variable to every function (var name = function() {}) or we can declare a function with a name (function name() {})

prework7.DavidBecker.md

#Prework Day 7 UX/UI Principles

Psychology - How are you rewarding good behaviour?

• Supports - http://uxmag.com/articles/designing-for-the-future-self
• Violates - https://www.ceros.com/blog/combining-ux-design-psychology-change-user-behavior/
• Through apps that reward good behavior, the user can start changing habits (for example with Mind Bloom that targets self-development issues = intrinstic value). Sometimes when a user already has an interest in something, rewarding good behavior can be detrimental to their enjoyment of this something. Also known as the "over-justification effect", this is where intrinsic and extrinsic value are mixed to heavily.

Usability - Are you being clear and direct, or is this a little too clever?

• Supports - https://www.interaction-design.org/literature/article/don-t-make-me-think-key-learning-points-for-ux-design-for-the-web
• Violates - http://uxmyths.com/post/1533970267/myth-27-ux-design-is-about-usability
• In the violating article, it suggests that good, usable design is more than just functionality. Good design is playful, seductive, has good flow, emotional, or has meaning for the user. In the supporting article, a well known Danish designer suggests that usable design follows principles along the lines of the idea of "Don't make me think", such as self-expxlanatory, time wasting is not good, a back button or a way to reverse a mistake, people are habitual, get to the point, and make home accessible.

Design - Does it communicate the purpose and function without words?

• Supports - http://www.uxpassion.com/blog/the-importance-of-visual-consistency-in-ui-design/ (kind of)
• Violates - https://uxplanet.org/harness-the-power-of-words-in-ui-design-6ff79160712f (another funny site: http://webwithoutwords.com/)
• Anton Nikolov in the violating article suggests that words can have major effects. The two main take-aways are that more words does not equal more effective and make everyword exactly what you need it to be and convey. I had a hard time finding an article to support this claim because I believe that now people understand the power of using the right words with the right styles and images. The supporting article focuses on visual consistency, which I think is the most important part of building something to communicate purpose and function without words.

Copywriting - Does it motivate the user to complete their goal? Is that what we want?

• Supports - https://www.invisionapp.com/blog/10-ux-copywriting-tips-designers/
• Violates - http://www.jeffgothelf.com/blog/the-secret-weapon-of-ux-copywriting/
• In the supporting article are a list of 10 important UX copywriting skills that all speak to how best to motivate the user to complete their goal. In this case, yes, that is what we want. Maybe we want the user to click the next button or head to a particular page. But in the violating article, it suggests that copywriting can be used to change the habit or choice a user initially had. For instance, if the user was reading all about how you can learn coding for free with so many online resources (something an online coding bootcamp might use for marketing benefit), you, the copywriter, then might need to pursuade the user to do the opposite and sign up for a paid membership.

Analysis - Are you using data to prove that you are right, or to learn the truth?

• Supports - http://www.smartdatacollective.com/elliemartin/429987/why-ux-design-and-big-data-need-each-other
• Violates - http://uxmag.com/articles/six-myths-about-data-driven-design
• The supporting article mainly talks about how "Big Data" and UX Design need each other for companies to continue to compete with the leaders. Without data, UX design is only a guess, at best. The violating article talks about 6 myths in the data-driven design world: "data means numbers", "data is the objective truth", bigger is always better", "data is for managers, not designers", "data kills innovation", and "there is a right way to use data to inform design". I think at its core, this article is simply trying to state that we still have a long way to go in understanding the relationships between what we might think of as "data" and ux desing.