JulieHawkins_Prework.md

MY PREWORK

Day 1

1. The purpose of HTML code on a website is to describe and structure the content of the site.
2. An element is one piece of HTML code that begins and ends with a tag and includes the content or information between the tags. A tag opens and closes the element and defines how the content should be structured or organized.
3. Attributes are used to assign more information or different properties to the content of an element.
4. The body element contains the all of the other elements and content to be displayed within the main viewing area of a web site. The head element contains content about the page being viewed and usually contains within it a title element. The title element is diplayed on the very top of the browser.
5. To view the source of a website in Chrome click on the tab labeled View, then under the developers button click View Source. Or use the mac short cut option,command,U.
6. Here are 5 examples of elements and their functions a. h1 is a heading element and is used to assign the first heading of a page. b. img is a image element and is used to containg the content of an image to be displayed. c. sub is used to contain the characters that should be displayed as subscript, ex. the 2 in h20. d. abbr is an element used to provide the abbreviation or acronym to content. e. b is an element used to contain text that should be displayed in bold font.
7. An empty element does not contain any content other than a single tag, usually providing more organization or structure.
8. Semantic Markup is used to help provide more meaning to the content provided, rather than provided the structure for how it is displayed.
9. Section, aside and nav are some examples of new HTML5 semantic elements.

https://codepen.io/jahawkins/pen/xLRywr

Gear Up

1. Empathy plays a very large role in my life. I have always felt that I am a very empathatic person, sometimes maybe too much so, but I have found empathy to be extremely helpful. If you have the ability to place yourself in someone elses shoes and see things from another perspective other than your own, it allows you to relate to others and their personal experiences. I previously spent about 7 years praticing massage therapy and the tool of empathy greatly assisted me in understanding my clients needs and differences.
2. Software can be greatly improved when empathy is applied. Placing yourself in the perspective of many different types of users will help make applications and information easier for a wider variety of people to use.
3. When working on a team, it is never assured that all people will automatically work well together. Empathy can help you recognize when people are feeling positive and when they are feeling negative. Being generally aware of others experiences will help a team work more smoothly and help them to see thru differences.
4. In my previous job I helped to train new people in my department. One new hire initially seemed shy or nervous about the tasks he was trained in and assigned. My ability to recognize his behaviour and feeling using empathy allowed me to relate to him about my own shyness and insecurity. In opening up a little bit about myself to him, this allowed a stronger trust within our department and helped build confidence in both of us.
5. In a professional setting I find it difficult to feel empathy towards someone who complains alot. If the complaints are not constructive this becomes a negative impact on the whole team. It may be that finding some empathy for why they feel negative would help this. Maybe recognizing and acknowlegding the persons experience is a way to empathize with their discomfort.

DAY 2

1. Ordered lists place a number or value before each list item. Unordered lists place a bullet point before each list item. Definition lists contain a list of terms paired with their definition(s).
2. The element <a> is used along with the href attribute with a value of the websites url. The link text is placed between the tags <a></a>. ex. <a href="http://www.website.com">LinkText</a>
3. The attribute target="_blank" will open the link in a new tab or window.
4. To place a link to a specific part of the same page you will attach the attribute id to an element on the page where you want the link to go, give it a unique value, then use the attribute href="#uniquevalue to link to that id.

---

1. CSS allows you to stylize each element in your html code.
2. CSS stands for Cascading Style Sheets. Cascading refers to the process of prioritizing the rules set for the html according to how specific or how general they are.
3. The basic structure of a CSS rule uses a Selector to indicate which element(s) the rule applies to and a Declaration to indicate which CSS rule to apply. The Declaration consists of a property and a value. ex. Selector {property:value;}
4. You can link a CSS to an HTML document by using the empty element <link> and placing it within the <head> element. The attribute href will indicate the path to the file. The attribute type will specify the type of document being linked. the attribute rel specifies how the documents relate, the value will be stylesheet.
5. External CSS sheets can be linked to as many pages as you'd like which allows for much less repetitive coding/editing and quicker loading times for websites.
6. A color hex code is a 6 digit alphanumeric code that represents the values of red, green and blue in a specific color. It is preceded by a pound sign.
7. HSL color properties consist of the Hue, the Saturation and the Lightness of a color.
8. Typeface fonts fall into the main catagories of serif, sans-serif, and monospace. Serif fonts have little details on the ends of each letter. Sans-serif maintains straighter, neater lines with no extra detail. Monospace fonts place a fixed width on each character.
9. Font size can be specified using units in pixels, percentages and EMs.

Day 3

1. The type attribute controls the behavior of the <input> data.
2. A dropdown list can be created using the element <select>.
3. The type attribute should be set to "submit" to create a button to send the from data to a server.
4. You can place groups of form fields within the element <fieldset> to display them as a group. <legend> can be used to add text to the fieldset to help organize the form.

---

1. Using CSS you can modify the borders, margins and padding around each HTML element. The border can be visible or non-visible and is the boundary line of the box, seperating one box's edge from another. The margins exist outside the border of each box and dictate the dimensions of the gaps between boxes. Padding refers to the space between the border and the content inside the box.
2. The values for the CSS rule for padding can be read in clockwise order. ex. padding: 1px 2px 5px 10px 1px for the top, 2px for the left side, 5px for the bottom, and 10px for the rightside.
3. Block level elements each start on a new line while inline elements sit within a line and flow between surrounding content.
4. Fixed positioning of an element forces the element to be displayed in the same position on a page even while the user is scrolling. The z-index property can be set to a value which dictates which element is displayed on top of the other(s).
5. A fixed layout does not adjust in size or layout when a user changes the size of the browser. A liquid layout stretches and contracts according to the size of the users browser and can adjust with the size.

Day 4

1. The alt attribute is used within the <img> element to add a description to the image. It is important to add so that the image can be describe in case it cannot be seen.
2. The <img> element is naturally an inline element. Placing it within a block element will keep it inline, while placing it before a block element will give it a block position. You can use CSS to change the position as well.
3. JPEG files are beneficial to use for photographs and images with a variety of colors. PNG files are better for logos or images with fewer, flat colors.

---

1. Using CSS to specify the width and height of your images will help the page load more smoothly by allowing the browser to leave room for the image to load into while continuing to load the remainder of the content.
2. An image sprite is a combo of seperate images integrated together into a single image file. Different parts of the image file can be displayed using CSS functions. The broswer only needs to make a single request for all of the images that make up the image sprite helping the page load faster.

Day 5

1. In JavaScript numbers refer to numeric values, strings refer to text wrapped in quotations and Booleans refer to the two values: true and false.
2. The three logical operators in JavaScript are and, or and not. These operators are represented by &&, || and ! respectively.
3. The name of a variable cannot start with a number, but may contain them. The name may not use spaces or punctuation (except $ and _) and may not be a reserved word.
4. An expression is a fragment of code that produces a value. A statement is an expression or set of expressions (typically followed by a ;) that executes a function or creates an effect or side effect.
5. Reserved words in JavaScript are words that have a specific or special meaning in code (or will in the future). They are not to be used as variable names as it can change the desired effect of the code.
6. Control flow refers to the order in which individual statements are executed. It is important to understand how the flow of a program runs and to be able to predict or trace the path of steps to be executed.

Day 6

1. In the described example, if you simply enter sayHello in the console you will be calling for the name of the function but not the function to preform its duty. Entering sayHello() calls to carry out the named function.
2. The keyword return is used to end the execution of a function and provide a value as a result of the function.
3. The parameters of a function are the variables that are named within the parentheses that follow the function name. They are given a value by the caller of the function and used within the function to preform an execution.
4. Rules for naming functions: Use the same general rules for naming variables; The more simple, the easier to understand.

Day 7

1. Psychology: How much work does the user have to do to get what they want? A https://twitter.com/ user doesn't have to work hard to find other peoples tweets or to write a tweet of their own, it is a very simple process. A user must spend quite a bit of time and effort to find their destination on http://www.aveda.com/.
2. Usability: Are you working with the user’s assumptions, or against them? https://www.google.com/ is extremely easy to use as it gives the main focus to the search engine feature for users to access. https://www.xfinity.com/ could be more user friendly, it be more predictive of the user's needs.
3. Design: Does it represent the brand? Does it all feel like the same site? http://www.aveda.com/ has a consistant color scheme and flow from page to page, it represents the brand well but is a little complicated.
4. Copywriting: Does it motivate the user to complete their goal? https://www.etsy.com/ has good UX copy to help motivate users to complete the goal of selling or purchasing products. http://www.starwoodhotels.com/sheraton/index.html?language=en_US has bad UX copy becuase it doesn't give a very clear motivation for the user.
5. Analysis: Are you looking for subjective opinions or objective facts? https://www.youtube.com/ actually uses a combination of users subjective opinions of the content makers and objective data on viewing statistics it collects from users.