Prework for Turing

MariaSanchez_Prework.md

This is my prework for Turing

1. HTML code describes the structure of the pages - by adding code it makes the web page take on the structure we want.
2. Tags are like containers, they tell you what lies in between the opening and closing tag. An element tells the browser information about what is in between the opening and closing tags. An element contains the opening and closing tag and everything in between them.
3. Attributes are used in elements to give more information about the content of an element.

• Head: This contains information about the page. It is not shown in the browser.
• Title: Contents in this element appear in the title bar or tabs.
• Body: Everything in the main body element is show in the browser window.

5. Right click on the web page and go to "inspect."
6. • <strong></strong>: Tells the browser that the content has a strong importance, browsers will show its contents in bold.
   • <em></em>: Tells the browser that the content should have an emphasis, the contents will show up in italic.
   • <h1></h1>: This is a main heading
   • <table></table>: This creates a table. The content is written out row by row.
   • <tr></tr>: The content of this element is a row in the table.
7. An empty element has just one tag. Before the closing angle bracket there should be a space and a forward slash character.
8. Semantic markup are text elements that add extra information to the pages, but do not affect the structure. The purpose is to describe the web pages more accurately and they can be used by screen readers to add additional information about the content.
9. • <article></article>: The article element is a container for any section that could stand along, such as an article, blog entry or comment.
   • <header></header>: The header element indicataes that the content inside contains header information - either to the page or the article or section that surrounds it.
   • <aside></aside>: The aside element inside an article displays information that is related to that article but not essential to it. When the aside element is outside of an article, it displays information related to, but not essential to, the whole page.

Codepen page

Here is my link to my codepen page: https://codepen.io/mariastlouis/pen/mMdaVr

Gear up questions

After reading the articles above, create a gist on Github and reflect (4-6 sentences) on the following prompts.

What role does empathy play in your life and how has it helped you? Empathy has taught me how to be a better mother and a better worker. When I know the motivations and needs of those who I am working with or caring for, it helps me do a better job to give them what they want. For example, if my daughter is having a huge meltdown over something small, I've learned that the reaction isn't about what she wants, it's what she wants from me -- that is to understand this need she has. She still might not get what she wants, but the acknowledgment goes a long way. In design, I think that empathy would be good so you understand the people you are designing for and what they really need. There have been so many times when I'm using software that doesn't do quite what I need it to - I have to work around it, make accomidations for it. If it's something truly useful, I'll spend them time. If it's not something I need, I'll drop it. By desining what people actually need, and how they need it, they will use it more and it can be a great tool.

Day 2 questions

1. In an ordered list, each item is numbered. In an unordered list, the items have bullet points and a definition list is made up of a set of terms with their definitions.

2. a href="http://www.LINKTOWEBSITE.com">UserText</a>

3. The target attribute.

4. First, you give all of the elements you want to on the page a unique ID. Then, when you create a link to the spot on the page the value of the href attribute starts with the # symbol followed by the ID.

5. CSS is what styles a page by creating rules that determine how the content of an element appears.

6. CSS stands for cascading style sheet. The ‘cascading’ means the level of importance is placed on each rule. For example, if two selectors are identifcal, the last one listed will take precedence.

7. A CSS rule is made up of a selector – telling which element you want to select and a declaration that tells what you want the rule to be. The declaration is broken up into two parts, the property – what exactly you want to change about the element – and the value, what exactly you want to do with the property. Example: p { color: red; }

8. An external stylesheet is linked via the “link” element which tells the browser where to find the file. It contains the href, which is the path to the CSS file, the type, which is an attribute telling the browser it’s a CSS file and the “rel” which specifies the relationship from the HTML page to the CSS file. Example:

9. External stylesheets can be linked to multiple HTML pages – They are useful to make changes to an entire site at once rather than making the same change page-by-page. This also helps the site load faster.

10. A color hex code is a six-digit code that represents the amount of red, green and blue in a color. It is preceded by a “#” symbol.

11. An HSL color property is made up of the hue – the actual color – saturation – how much gray is in the color – and lightness – how much white is in the color.

12. The three main categories of fonts are serif, sans-serif and monospace. A serif font has details on the ends of the main strokes of the letters, sans-serif fonts have straight ends to the letters and monospace fonts gives every letter the same fixed-width.

13. The three main font-size units used are pixels- which give designers exact control over the size of their fonts – percentages which tells the browser how big a font should be in relation to the standard 16 px font size – and EMS which is the equivalent to the width of the letter “m” and allow you to change the size of text relative to the size of the parent element.

Day 3 questions

1. The type attribute determines what kind of input that is created. For example, it could be a password, a text box or a checkbox.

2. The <select> element creates a dropdown list.

3. The type should be set to “submit” to send a form to the server.

4. The <fieldset> element groups similar items together on a form.

5. Border: Separates the edge of one box from another; Margin: Sits outside the border and can be used to create a gap between two boxes next to one anohter; padding: The space between the border of a box and the content inside it.

6. Top: 2 px, Right: 2px, Bottom: 5 px, Left: 10 px

7. Block-level elements look like they start on a new line (h1, p, div elements) and inline elements flow within the text (<b> <span> <em>) When you choose to display 'block' in CSS it causes an inline element to act like a block-level element. When you display 'inline' the block-level element acts like an inline element.

8. Fixed positioning positions an element in relatiion to the browser window instead of the containing element. A z-index is important when using fixed positioning so the designer can control which box appears on top.

9. A fixed width layout do not change size as a screen size shrinks or increases. In a liquid layout, the designs will stretch or contract to fill up to the size of the browser window.

Day 4 questions

1. The alt attribute is important because it explains what the picture is to screen readers and search engines.

2. An image is inline if it is inside the block-level element - i.e. inside a paragraph or headline tag. An image is block if it is outside the block-level element.

3. A jpg image is best for photos - when you have many different colors in all sections. A png image is best for illustrations or logos when a section of an image is filled with the same color.

4. Specifying height and width in CSS is better because it leaves your HTML clean and it gives you more control of the image as you can align the photo, use it as a background etc.

5. An image sprite is a single image file that has many smaller images - through CSS you can tell the browser where on that image to pull. This is useful because the browser only has to pull one image rather than several

Day 5 questions

1. Numbers: The values of numbers are numeric calues and math is the main thing done with them. Strings: Used to represent text. They are written by enclosing their content in quotes. Almost anything can be considered text, even numbers if they are in quotes. The numbers can't be added or subtracted, but extra text can be added by concatenating it. Booleans: Used to show a value that distinguishes between two possibilities like "yes" or "no" or "true" or "false."
2. Javascript supports these logical operatators: and (&&) , or (||) and not (!)
3. Variable names can be any word that is not a reserved word, they cannot contain spaces but they can contain digits as long as they don't start with digits.
4. An expression is a fragment of code that produces a value. A statement is kind of like a sentence in the novel that would be a program - it includes the corresponding markeup.
5. A couple of the reserved words are "break, case, var, void, package and private" they should be avoided as most forms of javascript do not allow them and they could cause your program to break.
6. Control flow is how the statements are executed - from top to bottom.

Day 6 questions

1. If you enter sayHello without the () it will return a result of undefined because it does not have parameters. If you have the () you will get a result of "hello"
2. The return keyword determines the value the function returns - if it doesn't have an expression after it, it will cause the function to be undefined.
3. Function parameters are the input that the function takes - sometimes the parameters can be named and other times they are not names and the parameters are later defined.
4. Function names should pick out a single concept so someone who reads the code later can figure out what it does.