Turing front-end development prework

MargoSchaedel_Prework.md

Pre-work Day 1:

1. On a website, what is the purpose of HTML code?
   HTML code is responsible for the structure of a website, in how content is displayed on the page.

2. What is the difference between an element and a tag?
   HTML elements inform the browser of certain meanings or characteristics of the information displayed within the element's opening and closing tags, as represented by left and right-angle brackets, and a forward-facing slash for the closing bracket.

3. Why do we use attributes in HTML elements?
   Attributes provide additional information about the content contained within an element. They are situated on the opening tag of the element and consist of two parts: a name and a value, separated by an equals sign.

4. Describe the purpose of the head, title, and body HTML elements.
   The head element appears first and supplies information about the webpage such as the title element. This title information would be displayed at the top of the browser window (above where one would type the URL) or on the tab for that page. The body element contains all content of the webpage that will be displayed within the main browser window.

5. In your browser (Chrome), how do you view the source of a website?
   After navigating to the page whose source you would like to view, click on the "View" tab at the top of screen window, scroll down to "Developer" at which a second tab will pop up, and you can click "View source."

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.
   

• h1 all the way to h6 are the six levels of headings. h1 can be used for main headings, for example, while h2 is used for subheadings. The levels get progressively smaller.
• p is the paragraph element, which will divide the content into a paragraph format.
• b is the bold element. Characters enclosed in this element will appear bold on the webpage.
• i is the italics element. Characters enclosed in this element will appear in italics on the webpage.
• sup is the superscript element. It's most commonly used for suffixes of dates or math concepts such as exponents.
• sub is the subscript element. It's commonly seen with footnotes or chemical formulas.

7. What are empty elements?
   Empty elements are those elements that do not contain any words or text between an opening and closing tag. An empty element also usually has only one tag. Note for example, the line break element: < br />.

8. What is semantic markup?
   Semantic markup are the HTML elements that are not required for structural layout of the webpage, but they do provide additional information about the page that may be beneficial for other programs such as screen readers or search engines.

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

• < header>
• < nav>
• < article>
• < aside>

Codepen link: Turing Pre-work

GearUp:

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

Empathy plays a role in the connections and relationships we form with others, whether on a personal or professional level. My experience working as an educator in the past required me to not only cultivate empathy in myself, but also to supervise and encourage the cultivation of empathy in my students. This is particularly difficult I believe for teenagers and young adults. In striving to instill an empathic sense in my students, I was able to re-assess my own shortcomings in empathic awareness, and I continue to work on it each and every day.

How does empathy help you build better software?

In the tech world as in many other industries, working with other people in a team environment is necessary and vital to building better software. Possessing a keen sense of empathy allows individuals on a team to overcome interpersonal issues through increased and open communication and helps the group to function together more effectively. Open and honest communication is particularly crucial in building software because of its iterative process, in which teams are consistently coding, assessing, changing, and re-coding at a swift pace. Having a sense of empathy forges a connection not only between individual developers, but also between teams of different departments, which overall can help to smooth the software building process.

Why is empathy important for working on a team?

Success occurs when people work together on a project to create a joint outcome or result. Cultivating empathy in each individual on a team allows the team to function together more effectively, and thus achieve faster and better results. The group build each other up, rather than hindering its progress, in effect.

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

I would say that my ability to empathize has been greatly improved from traveling, especially to places and cultures that are so very different from what I have grown up with. Having lived in South Korea for several years has allowed me to understand the tightknit communal traditions embraced by many Asian countries, and this proved helpful during a disagreement with one of my Korean colleagues over a school scheduling issue. My priorities very clearly differed from hers (the school's), and though angry at first, I made the effort to understand the school's perspective on the matter and really try to understand where she was coming from, particularly with regard to the cultural background. In the end, we were able to come to a compromise, and I believe having empathy in that situation proved integral to a quick and easy resolution.

When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?

In the past I have found it most difficult to be empathetic while in a leadership role. I feel automatically that by virtue of being slightly higher up in position, the dynamic changes when communicating with inferiors, and I have had trouble distinguishing between maintaining an empathic stance over when to push or prod someone to do better work (that I know s/he is capable of). I think in the future I need to increase my active and "radical" listening skills, try to avoid interruption or distractions, and acknowledge what I've heard back to the speaker before going on to state my own thoughts.

Pre-work Day 2:

1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
   Ordered lists are lists where each item in the list is numbered. Unordered lists contain items that begin with a bullet point rather than a number. Definition lists consist of a set of terms and their respective definitions.

2. What is the basic structure of an element used to link to another website?
   Links are created using the < a> element with the href attribute containing the absolute URL. Users click on the content contained within the opening and closing < a> tags.

3. What attribute should you include in a link to open a new tab when the link is clicked?
   In order for a link to open in a new window or tab, the target attribute should be included in the opening < a> tag. The value of the attribute should be _blank.

4. How do you link to a specific part of the same page?
   Before linking to a specific part of the same page, certain points of the page must be labelled through the id attribute. Then, inside the < a> element, the value of the href attribute starts with a # symbol, followed by the value of the id attribute.

5. What is the purpose of CSS?
   CSS allows one to create guidelines that specify how the content of an element will appear on the webpage, in effect rendering the webpage unique and more attractive to the user.

6. What does CSS stand for? What does cascading mean in this case?
   CSS stands for cascading style sheets. In this case, cascading means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.

7. What is the basic structure of a CSS rule?
   A CSS rule consists of two parts: a selector and a declaration. Selectors designate which element the rule will apply to and the declaration defines the parameters of the style that will be applied to the element. Declarations are contained inside curly brackets and are split into two parts: a property and a value, separated by a colon. If several properties need to be specified, they are separated by a semi-colon.

8. How do you link a CSS stylesheet to your HTML document?
   In the HTML document < head> section, the CSS file is linked using the link element and the href, type, and rel attributes.

9. Why is it useful to use external stylesheets as opposed to using internal CSS?
   Using external CSS allows multiple page websites to use the same style rules, which saves one having to repeat the rules on each HTML document. It also keeps the content separate from how the page looks, which means better organization, and it allows one to alter the styles across all pages by altering a single file.

10. Describe what a color hex code is.
    Hex codes comes from hexadecimal code, and they are six-digit codes that represent the amount of red, green, and blue in a color, preceded by a # symbol.

11. What are the three parts of an HSL color property?
    The HSL color property consists of three values: hue, saturation, and lightness. An additional fourth value, alpha, is part of the HSLA property and accounts for opacity.

12. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
    The three main categories of fonts are serif, sans-serif, and monospace. Serif fonts have extra details (such as tails) on the ends of the main strokes for each letter. Sans-serif, as the name implies, lack these extra details, and appear to have a much cleaner design. Monospace fonts are fixed-width, and so each letter has the same width, making for easier alignment.

13. When specifiying font-size, what are the main three units used?
    Font size is specified in several ways, the most common of which are pixels, percentages, and ems.

Pre-work Day 3:

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. Some different type values are the text, password, radio, and checkbox values.

2. What element is used to create a dropdown list?
   The select element is used to create a dropdown list box. It will contain two or more option elements, in order to specify the options the user can choose from.

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

4. What element is used to group similar form items together?
   You can use the fieldset element to group related form controls together, which is helpful on longer forms.

5. Describe the differences between border, margin, and padding.
   Each box has three properties that can be adjusted to control the appearance. The border is the line (sometimes invisible) that separates the edge of one box from another. The margin defines the amount of space outside of the border edge, and can provide a gap between the borders of two adjacent boxes. The padding property controls the space within the box border, but outside of the content within. Having padding can help make content more readable.

6. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
   The padding shorthand specifies padding values in clockwise order beginning with top, then right, bottom, and left.

7. Describe the difference between block-level and inline elements.
   Block elements always appear on a new line while inline elements sit within a block-level element and do not start on a new line. An example of a block element is the h1 element, and an example of an inline element is an img element.

8. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
   Fixed positioning is a type of absolute positioning in which the element is positioned according to the browser window, not its containing element. An element with fixed positioning will not affect its surrounding elements (and vice versa) and it will not move when the user scrolls up or down on the page. When elements are removed from the normal flow, they can often overlap. The z-index property allows you to control which box will be stacked on top of the other boxes, and thus appear in front or topmost.

9. What is the difference between a fixed and liquid layout?
   A fixed width layout does not change size as the user increases or decreases the size of his/her browser window, while a liquid layout stretches and contracts as the size of the browser window changes. Fixed layouts tend to use pixels, as opposed to liquid layouts, which tend to use percentages.

Pre-work Day 4:

1. In an image element, why is the alt attribute important?
   The alt attribute provides information about the image, in case the user cannot see it.

2. What determines if an image element is inline or block?
   By default, images are inline elements, so if the image element is placed within a block element, the text will flow around the image, but if the image is placed before a block level element, the block level element will sit on a new line after the image. You can also change the position of the image in relation to the surrounding text, by using the align attribute, or in the CSS, by using the display property, with a value of "block."

3. What are the benefits of jpg or png image file formats?
   It is best to use the jpg format for photographs with lots of varying colors, while pictures that are monochrome or have few colors, such as logos, illustrations, and diagrams, should use the png format.

4. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
   Specifying image height and width in CSS over HTML is beneficial in helping the webpages to load more smoothly, as the HTML and CSS code load before the actual images, and thus the browser allots the space needed first, without having to wait for the image to download. Also, if you use consistently sized images across a site, it's easier to control the dimensions in CSS, rather than HTML.

5. What is an image sprite, and why is it useful?
   An image sprite is a single image used repeatedly for several different parts of an interface. The logo or buttons can be superimposed to the image. The advantage of using sprites is that the browser only needs to request a single image which is much faster than having to request many images.

Pre-work Day 5:

1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
   Numbers are numeric values (13, 2, 7459), range up to about 9 quadrillion, and can be written as decimals (fractions), with scientific notation, or as integers. We use numbers to carry out arithmetic operations. Strings are used to represent text and are enclosed in quotation marks (either single or double quotes). Lastly, booleans are used for true/false (yes/no, on/off) operations.

2. What are the three logical operators that JavaScript supports?
   JavaScript supports the logical and (&&), the logical or (||) and not, which is represented by an exclamation mark (!).

3. What is the naming convention used for variables?
   When defining variables, we use the keyword var (for variable) followed by the name of the variable, and then the value of the variable using an = operator and an expression.

4. What is the difference between an expression and a statement?
   An expression is a fragment of code that produces a value; it can be combined with other expressions to express complex computations. A statement consists of an expression or combination thereof with a semi-colon after it, that should effect change in some way.

5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
   A few of the JavaScript reserved words include var, break, default, finally, implements, interface, static, and yield. These are words that have been "reserved" for use in present and future versions of JavaScript. It is important to avoid using them as it may incur problems with variable definitions not working in a program.

6. What is control flow, and why is it useful for programming?
   Control flow covers the order in which statements are executed, such as top to bottom, conditional execution in which multiple routes may be taken if certain conditions are met, and loops, which allows for the repetition of certain actions. Conditionals employ "if-else" statements, while loops make use of "while." Using the right control flow is extremely helpful in expediting the programming process, and producing the output with the most concise and simplest method.

Pre-work 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?
   Entering sayHello will return the entire function written out again, while entering sayHello() will return simply Hello! (the string inside the function block.

2. What is the keyword return used for?
   The return keyword, followed by an expression, will determine the value the function returns.

3. What are function parameters?
   Function parameters are the values given inside the parentheses (for example: for function(x), x is a parameter) of a function definition, and these parameters behave like regular variables. The function definition consists of a set of parameters and a body, in which are written the statements to be carried out when the function is called. A function can have more than one parameter, or no parameters at all.

4. What is the naming convention used for function names?
   When it comes to naming functions, it is important to label the function with a concise, obvious name that clearly explains the concept of what the function does. This makes it much easier for someone who is reading the code to figure out its purpose. When writing the names of functions, one should use camelcase.

Pre-work Day 7:

1. Psychology - How much work does the user have to do to get what they want?
   Pro: https://www.kayak.com/
   Con: https://www.skyscanner.com/
   I have spent a lot of time searching for and booking flights, and in terms of least amount of work done and accessibility, kayak is a much better site than skyscanner for quickly finding the best flights and then linking to the next site to book those flights. In addition, I can never remember whether fares are shown as the total, or without taxes, so it's much easier to find that information on the kayak site, than on the skyscanner site.

2. Usability - Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
   Pro: https://dtmag.com/
   Con: https://www.dailydive.com/
   Though both sites are pretty good resources in the scuba diving world, the DiveTraining site provides a more user-friendly categorization of its articles, with a hard-to-miss "Library" sidebar, as well as all categories listed across the top of the site. Users can navigate pretty easily to what they're looking for. The Daily Dive site, while aesthetically pleasing, requires the user to scroll down through all the different category options, titled and grouped with images, requiring more time on the users part to find what one's looking for. Of course, one could also just use the search bar with both sites.

3. Design - Does the design lead the user’s eyes to the right places? How do you know?
   Pro: https://www.wired.com/
   Con: http://www.foxnews.com/
   The Wired news site has a clean and uncluttered design that allows the user's eyes to focus on a few central pieces, that attract the eye through visual imagery and larger or different fonts. On the other hand, the Fox news site tries to cram too much information on to the first half of the site, by making the font so small, one can barely read it.

4. Copywriting - Is it clear, direct, simple, and functional?
   Pro: http://www.australia.gov.au/
   Con: https://www.usa.gov/
   The Australian government site is clear, simple, and functional, providing imagery in alignment with the text-based categories, which would help users whose first language is not English. The US government site, in contrast, is just all text, which overwhelms the user, and could heighten anxiety.

5. Analysis - Do you know why users do that, or are you interpreting their behaviour?
   Pro: Con: