Day 1

Chapter 1 and 2 Questions

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

• HTML code is the building block of a website. This is where the programmer inputs the content that is going to be displayed.

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

• An HTML element is made up of two tags. For example, a
  is an element made up of the tags

  and

  . An element is something such as a paragraph or header.

3. Why do we use attributes in HTML elements?

• We use attributes to give more information about the contents of an element.

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

• Head, title, and body HTML elements are used to dilineate how the content is displayed on the web page. The Head contains the information about the page (including the title which appears in the top bar). The body is the content shown within the browser.

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

• In Chrome, right click (two-finger click on MacBook) and click "Inspect" from the drop-down menu. Alternatively, you can select the "view" menu and go down to "Developer" and select "View Source."

6. List five different HTML elements and what they are used for. For example,
   is a paragraph element, and it is used to represent a paragraph of text.

• is a header element for a main heading, is an element to make any word/words between the tags bold, makes words between the tags italicized, makes any words between the tags superscript, shows ephasis by italicizing words between the tags and also shows a screen reader where to emphasize when reading aloud.

7. What are empty elements?

• Empty elements are the elements that create white space on a page, for example
  indicates a line break.

8. What is semantic markup?

• Semantic markup doesn't affect the structure of the web pages, but add aditional information. For example, if you are defining a word, use the tags to define something for the first time.

9. Waht are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.

• , , and < are the three new semantic elements introduced in HTML 5.

First Pen https://codepen.io/jackmallahan/pen/eWgXzL

Gear Up

1. What role does empathy play in your life and how has it helped you?

• Empathy has played a very important role in my life. Before starting Turing, I worked in sales for a Subaru dealership in Summit County. Having been a resident of Summit County myself, I had a basic idea of the difficulties of living in a mountain town. So when families and individuals came to me to buy a car, I would get to know them - their personalities, their hobbies, and their routines. That way I was able to match them with the perfect vehicle that fit their needs and their budget. Because I was able to relate to and understand where people were coming from, I was very successful at creating a positive sales environment. Empathy was also extremely important for navigating social interactions between my coworkers because I knew that my manager who was going through a divorce thought I was doing a good job so I let him slide when he would lash out.

2. How does empathy help you build better software?

• Empathy helps you build better software because if the software isn't accessible for everyone, then it will have fewer people who use it. This reminds me of the show "Silicon Valley" on HBO when they first come out with the Pied Piper platform and all of the engineers absolutely love it, but they never went to a person without tech expertise to see their opinion. It was not user friendly or aesthetically pleasing, so non-engineers didn't like the platform.

3. Why is empathy important for working on a team?

• Empathy is important for working on a team because it helps broaden your own view. Not everyone will have the same ideas or approaches to solving a problem. That doesn't mean that one is better than the other, and most of the time learning from each other leads to the best solution.

4. Describe a situation in which your ability to empathize with a colleague or teammate was helpful.

• In my last job, I had a woman Karen that I worked with. She is a middle aged woman who is working on raising three teenagers and has very different political views than I do. However, she became one of my best friends at work because we could always go to each other with our different opinions and bounce them off each other to better empathise with our customers.

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 hard to be empathetic in a professional setting when people refuse to show any signs of empathy in return. We had a customer that my General Manager ignored and treated poorly. This was completely a failure by our General Manager, and she refused to admit any fault. The customer was rightfully upset, but my General Manager told me to go out and solve the problem for her. I calmed down the customer and found what I thought was a good compromise. When I went back to my General Manager, she refused to compromise and refused to admit any fault. At this point I became very frustrated and had no patience for her. I was 100% on the side of the customer, and lost all empathy towards my General Manager. I could not see her point of view in the slightest. I can definitely improve my empathy in this situation because my General Manager usually was a very level headed person and this was the first time I had seen her be so stubborn. I should have accepted that everyone has bad days, and don't always make the best decisions.

Day 2

Chapter 3 and 4 Questions

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

• Ordered lists are numbered lists, such as this list of questions about lists. Unordered lists are bullet pointed lists, and definition lists are lists of words with their definitions.

2. What is the basic structure of an element used to link to another website?

• The basic structure of an element used to link to another website is New Website

3. What attribute should you include in a link to open a new tab when the link is clicked?

• For your link to open in a new tab, use <a href'"http://nameofwebsite.com" target="_blank">New Website

4. How do you link to a specific part of the same page?

• To link to a specific part of the same page, you need to name the attributes (think wikipedia page). This means that if the wiki page was about my life, there would be sections on "Early Life" "College Days" "Time in Colorado" etc. So I would name each section

  Earl Life

  and then later I can make a link to go back to that spot with Early Life

Day 3

Chapter 7 Questions

1. If you're using an input element in a form, what attribute controls the behavior of that input?

• The type controls the behavior of that input. For example, you can use type="password" or type="text"

2. What element is used to create a dropdown list?

• The element is used to create a dropdown list.

3. If you're using an input element to send form data to a server, what should the type attribute be set to?

• You should use the type="submit" to send form data to a server.

4. What element is used to group similar form items together? *Using groups related form items together.

Chapter 13 and 15 Questions

1. Describe the differences between border, margin, and padding.

• Border is the edge of the box. Margins sit outside the edge of the borders to separate the box from other objects, creating white space. Padding is the space between the border of the box and the content within so that your text or image within the box don't take the whole box making them harder to read.

2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?

• The padding goes in clockwise order starting at the top. So 1px is the top, 2px is the right side, 5px is the bottom, and 10px is the left side.

3. Descirbe the different between block-level and inline elements.

• Block level elements causes the information to descend as if you hit the return key where as inline elements keeps the information on the same line.

4. What is the role of fixed positioning, and why is z-index important in the scenario of using foxed positioning?

• Fixed positioning keeps the element in a position that is fixed within the browser window, not fixed within the content of the page. The z-index is important because it controls which box appears on top.

5. What is the difference between a fixed and liquid layout?

• fixed layouts do not change size as the user changes size of the browser window where as liquid layouts always expand/contract to fit the size of the browser.

Day 4

Chapter 5 Questions

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

• An alt attribute is important if the image doesn't load or if someone needs to use a screen reader so that you have text describing the image.

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

• The surrounding elements determine whether the image element is inilne or block.

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

• jpg files use more colors, so if you are using photos with complex colors, it is a good idea to go with jpg. If you are using an illistration, especially something with few colors or a large area of color it is better to use png.

Chapter 16 Questions

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

• Specifying the height and width of images in CSS allows for the rest of the page to load first and the image to load after all other content is loaded.

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

• An image sprite is when one image is used throughout the website (I'm thinking logos are a good example of this). Then you can use that same image in different ways, such as a button. Sprites allow for the browser to only make one request to download that image which makes loading times much more quickly.

Day 5

Chapters 1 and 2 from Eloquent JavaScript: A Modern Introduction to Programming

1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
2. Numbers - Numbers are, well numbers. They can be whole numbers, decimals, and negatives. You can use numbers for arithmetic.
3. Strings - Strings represent text and are enclosed in quotating marks.
4. Booleans - Booleans are used to choose between two options, "true" and "false"
5. What are the three logical operators that JavaScript supports?

• The logical operators that JavaScript supports for booleans are and, or, and not

3. What is the naming convention used for variables?

• The naming convention for variables is words, you cannot start with a number but you can include one. No punctuation is allowed. Most people use thisStyleOfName where the first word isn't capitalized, but the rest are. Otherwise you can use thisstyleofname, this_style_of_name, or ThisStyleOfName.

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

• An expression is a bit of code that produces a value, and a statement encloses multiple expressions.

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

• var, null, typeof, delete, for, and function are a few JavaScript reserved words. It is important to avoid using them for variable names because they will relate to their reserved function instead of relating to your indicated variable.

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

• Control flow means that statements are executed from top to bottom. This is useful for programming because when user input is involved, the code that is below the user input will wait to execute until the input.

Day 6

Chapter 3

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 () asks for the input from the console.log, where as with sayHell you have to define the function.

2. What is the keyword return used for?

• A return statement determines the value the function returns - ends the line of code and gives an output.

3. What are function parameters?

• Function parameters are like regular variables, but they are given the initial value by the caller, not the code in the function.

4. What is the naming convention used for function names?

• For function names, we should use names that are clear as to what they do. In the Cows/Chickens/Pigs example, the author starts with "printZeroPaddedWithLabel" and then changed it to "zeroPad" a more simplified function name that gets the idea across and can be used more widely.

Day 7

User Interface / User Experience

1. Psychology

• How are you rewarding good behaviour? https://brilliant.org/ is a perfect example of this. When you complete tests and sections, you get little rewards and stars. This gives you a sense of accomplishment, and want to do more sections. This allows more opportunity for them to sell you a premium subscription. https://vistacolorado.com/ is a great example of doing the opposite. It is the website for the company I used to work for, and I was the manager of the internet sales team, so I know exactly how frustrating it was to use. First off, our website links to two separate websites that don't operate within our website, but through the coroporate Subaru and Chrysler formats. There were so many frustrating things about the website that I had customers just tell me they stopped using it.

2. Usability

• Is it easy to find (good), hard to miss (better), or subconsciously expected (best)? Google.com is a great example of this. It looks nice, impossible to miss, and anyone can use it. http://www.addictinggames.com/ was one of my favorite websites when I was in middle school. However, it is so overcrowded with information that nothing is very easy to find.

3. Design

• Do users think it looks good? Do they trust it immediately? https://in.via.com/ is a great example of this. When my girlfriend and I were booking flights within Thailand on our trip (especially from Chiang Mai to Phuket), there were a lot of sketchy looking websites that we didn't trust. When we saw via on google flights, it looked safe and we felt comfortable putting our credit card information in to purchase flights. https://www.nokair.com/ on the other hand, kept crashing on us and made us wary of using it.

4. Copywriting

• Is it clear, direct, simple, and functional? I have to go with one of my favorite websites for this one: https://theringer.com. You can scroll down and find an interesting article to read. Plus it is really easy to navigate with tabs that change subject depending on what topics are trending (for example, right now there are tabs for the NFL Draft and the NBA Playoffs. I'm sure next week once the hype around the draft has cooled down, that tab will become "NHL Playoffs" or "MLB." A counter example is the website of a favorite author of mine; http://www.patrickrothfuss.com/content/index.asp. It's layout isn't clear, direct, simple, or functional.

5. Analysis

• How can you use this analysis to make improvements? My cousin Chris is the President of the company: https://www.usertesting.com/ and two of his brothers work(ed) there as well. Their business is analyzing UX data for companies so that they can improve their websites/business. A great example is that https://vistacolorado.com website again. I had monthly meetings with a corporate member from Subaru, and I told him every month that we needed to fix the website because customers didn't know how to use it or got frustrated and never came back. No one ever listened to me.