Turing 1703 Prework

JoeHeitkamp_Prework.md

#Day One

##HTML and CSS Chapters 1 and 2

1. The purpose of HTML code on a website is to describe the structure of a webpage.
2. An HTML tag is characters between angled brackets that tell us something about how the elements between the opening and closing tags will be rendered. An HTMl element is the opening and closing tag and the content between it.
3. We use attributes in HTML elements to supply extra information about the elements in the code.
4. The Title element in HTML is used to create a title in the browser tab. The Head element is used to show information about the page. This is where you will find the Title element. The Body element is where the content of the page is shown in the browser.
5. You can view the source of a website (in Chrome) by right-clicking anywhere on the browser page and selecting 'View Page Source'.
6. HTML Elements
7. <br /> is an empty element that creates a new line break in your webpage.
8. <hr /> creates a horizontal line that can be used to signify a change in topic.
9. <h1></h1> is used to create a heading. h1 through h6 can be used for different size headings to signify main vs subheadings.
10. <b></b> is used to bold text.
11. <strong></strong> signifies that the content betweenthe tags is important. This will bold the text, but is used to signify importance beyond just bolding your words.
12. Empty elements only have one tag and do not need a separate closing tag.
13. Semantic markup is not intended to affect the structure of the webpage but to add extra information such as where to place emphasis or to highlight quoataions, etc.
14. HTML5 Elements:
15. <abbr> is used for both acronyms and abbreviations in HTML5.
16. <figcaption> attaches a caption to an image.
17. <article> acts as a stand alone container on the webpage.

###Prework Codepen

##Gear Up Reflection

1. The role that empathy has played in my life is fairly major. Empathy has allowed me to be a better parent and husband to my child and wife. By actively listening to my wife and confirming that we are on the same page with our parenting decisions, we have avoided uneeded arguments and reduced friction in our relationship. We both work at putting ourselves in each others shoes so we can offer the proper support to each other as needed.
2. By putting ourselves in an end users position, we can better understand how our software impacts them. We each have multiple blind spots that only become evident when we expose them to scrutiny from others. Getting direct feedback from the people using our software allows us to improve our software and see use cases we may not have thought about.
3. When working as a team, empathy is important so that we can better understand when a member is struggling and offer them the proper support. Or if a member is succeeding wildly, we can work to emulate that success. Teams have to be on the same page to find success and empathy is the key to getting on the same page.
4. In my previous career, I was a direct lead over 3-4 two person teams in multiple markets. One of my team leads had a mental breakdown and was scared to ask for help. I have family members with mental health needs and was able to quickly put myself in a place of support and back her while my superiors were asking for ways to separate her from the company. Having an undertanding and ability to empathize with this employee made it easier to triage with our HR department and my superiors to develop a plan that allowed her to get the help she needed while also filling the needs of her office. After she received help, she was able to return to work and spend the next three months improving her office performance to become the highest performing office in the company.
5. When a deadline is quickly approaching and a team member did not pull their weight or communicate properly, I find it difficult to be empathetic. I think by working with the team early to set clear expectations concerning communication and deadlines, I can avoid being caught off guard in this scenario. It will also be important to step back, take a deep breath, and work with the team to examine what got us off page and develop strategies to ensure we don't fall into the same trap again.

#Day Two

##HTML and CSS Chapters 3 and 4

1. An ordered list is a list that is numbered. This is useful for a list that has directions that have to be followed in order. An unordered list begins with bullet points usually. A definition list is a set of terms with definitions for each of those terms.
2. Text between an <a> and </a> is the link text. To make sure the link takes you somewhere, you need to use the hrefattribute. A link to another website could look like this:Google`.
3. To open a new tab from a link, you need to add the target attribute with a value of _blank. Example <a href="http://google.com" target="_blank">Google</a>
4. To link to a specific part of the same page you will first need to identify the parts of the page that you will link to with the id attribute. Then you will need to use the <a></a>element, but the href attribute will start with the # symbol followed by the id attribute you want to link to.
5. Example element with id attribute <h1 id="top"></h1>.
6. Example element link to id attribute <a href="#top">Top of the page</a>

##HTML and CSS Chapters 10, 11, and 12

1. The purpose of CSS is to allow you to create rules that control the way your website and each of the elements inside of it are presented.
2. CSS stands for Cascading Style Sheet. Cascading means that rules occur in the order they appear and are overwritten by conflicting rules that appear later.
3. A CSS rule is made up of a selector and a declaration. Selectors indicate which HTML element the rule applies to. The declaration indicates how the element should be styled. The declaration sits inside of curly brackets and is made up of two parts: a property and a value.
4. To link a CSS style sheet to your HTML document, you simply add a <link> element inside of the <head> element. This element will point to your CSS file. The link element will have an href, type, and rel attribute that all need to be defined. An example would look like this <link href="css/styles.css" type="text/css" rel="stylesheet" />
5. Using external stylesheets rather than internal CSS is a great way to make your code more readable and easier to work with. Especially when creating more than one page, this will allow you to make changes that affect all pages and not have to rewrite the code per page.
6. A color hex code is one of the ways to represent color in CSS. It is made up of a # symbol followed by a combination of 6 hexidecimal letters and numbers. The first 2 represent red, the second pair represents green, and the final pair represents blue. An example for a blueish-green color hex code would be - #40E0D0.
7. Hue, saturation, and lightness are the three parts of an HSL color property.
8. In typeface, the three main categories of fonts are - serif, sans-serif, and monospace.
9. Serif fonts have extra details on the ends of main strokes of letters. This is considered easier to read in long passages of text.
10. Sans-serif fonts have straight ends to letters. This is easier to read in small text sizes.
11. Monospace fonts have every letter at a fixed width. This is often used in coding because it aligns nicely and can make reading easier.
12. When specifying font-size, you will use one of three main units. These are -
13. Pixels
14. Percentages
15. Ems

#Day Three

##HTML and CSS Chapter 7

1. The value of the type attribute controls the behavior of the input.
2. The <select> element is used to create a dropdown list.
3. If your user is sending form data to a server, you will need to use a type="submit" attribute.
4. <fieldset> is the element used to group similar form items together.

##HTML and CSS Chapter 13 and 15

1. Every box has a border, even if it's invisible. The border separates the edge of one box from another. A margin sits outside of the border and can be adjusted to create a gap between the borders of adjacent boxes. Padding is the space between the border of a box and any content inside of it. Adjusting this can increase the readability of the boxes contents.
2. For the CCS rule padding: 1px 2px 5px 10px, these values appear in clockwise order - top, right, bottom, and left.
3. Block level elements sit on new lines, while inline elements stay on the same line.
4. Fixed positioning controls the position of an element in relation to the browser window. If a user scrolls the page, the fixed position element will stay in place. The z-index allows that fixed element to go behind or stay on top of other elements on the page.
5. A fixed layout does not change sizes as the user increases or decreases the screen size. Liquid layouts change shape as the user adjusts the screen size. This is very useful for smaller screens like on phones.

#Day Four

##HTML and CSS Chapter 5

1. The alt attribute is important in an image element because it provides a text description if you cannot see the image. This is especially useful for screen reader software.
2. An image element is inline if it is placed within a block element. If it is placed outside of a block element then it will appear on a new line.
3. The jpg format is best for images with lots of colors, even if it's a photo of a snowy field, so should be used primarily for photographs. The png format is best used fro images with fewer colors such as logos or diagrams.

##HTML and CSS Chapter 16

1. The benefit of specifying height and width of images in CSS rather than HTML is that it is easier to control consistently sized images across your site.
2. The image sprite is when a single image is used for multiple parts of an interface. It is useful because this allows the web browser to only request one image rather than several, thus speeding up your site.

#Day Five

##Eloquent JavaScript Chapters 1 and 2

1. In JavaScript, the number data type is a numerical value and are written as follows - 42. Strings are used to represent text and are enclosed in single or double quotes like this - "this is a string". A Boolean is a type that has two values. They are true and false.
2. And, Or, and Not are the three JavaScript logical operators. && represents the And operator, || represents the Or operator, and ! represents the Not operator.
3. The naming convention for variables is as follows - var myName = "Joe";. var is the keyword that declares a variable. myName is the name of the variable. = is the operator and "Joe" is the expression that is the value the variable currently holds.
4. An expression in JavaScript is a fragment of code that produces a value such as 22, or "String". A statement performs an action and is made up of expressions. A simple statement would be !true;.
5. void, while, for, and var are all reserved keywords. These keywords cannot be used as a variable name because it will keep your code from working correctly.
6. Control flow is the order in which code is executed. Conditional execution and loops can change the order in which code is executed and can be useful for simplifying complex processes.

#Day Six

##Eloquent JavaScript Chapter 3

1. If we have a function defined as function sayHello(){console.log("Hello!")}, the difference between entering sayHello and sayHello() in the console would be that sayHello would bring up the function again while sayHello() would log the string Hello! to the console.
2. The keyword return is used to determine the value a function returns.
3. Function parameters behave like variables but their intial values are given by the caller of the function, not the code within the function body.
4. The naming convention used for function names is to first dcelare a function and then the name of the function with parentheses like this - function square(). Inside of the parentheses is the parameter and it can be filled in or left blank. This is followed by the body which is contained by opening and closing brackets and has the code for the function to execute. A full function could look like this -

function square(x){
return x * x;
}
console.log(square(7));