Day 1
Chapters 1 & 2 HTML & CSS

1. What is the purpose of HTML code?
   To describe the structure of a page and how information is presented.
   
2. What is the difference between an element and a tag?
   An element is made up of an opening and closing tag, containing content in between. Tags are used to markup the beginning and end of an HTML element. Tags are made up of characters inside angled brackets <>, with the closing tag containing an extra forward slash in it.
   
3. Why do we use attributes in HTML elements?
   Attributes are used to provide additional information about the contents of an element. Attributes are part of the opening tag of an element and consists of a name and value.
   
4. Describe the purpose of head, title, and body HTML elements.
   -The head element contains information about the page, the contents of the head do not appear on the visible page and comes before the head.
   -The title element contains what is shown at the top of the browser or tab of page, this is what the page is "titled", it is not the url.
   -The body element contains everything visible in the main browser window.
   
5. In your browser (Chrome) how do you view the source of a website?
   The source of a website can be seen in Chrome by double clicking and selecting view page source, or by selecting developer and view source on the view tab.
   
6. List five different HTML elements and what they are used for.
   h1: is a heading element which is used to create a main heading on a page, this is the largest of six heading sizes.
   body: is the body element which is used to encompass all elements/contents of a page that is visible to user.
   title: is an element contained within the head element that titles the page and is visible at the very top of the page or tab while there are more than one page open at a time.
   b: element is used to make words appear bold, this element is encompassed within another element, ie: a paragraph.
   em: element is used to provide emphasis to a word/s within a sentence, this makes them appear italicised, this element is also encompassed within another element.
   
7. What are empty elements?
   Elements that do not have an opening and closing tag, instead only a single self closing tag. ie: hr tag
   
8. What is semantic markup?
   Semantic markup gives extra information on basic HTML, such as where emphasis should be placed, when words should be bolded, definition of terms, meaninings of accronyms or making quotations, it does not affect structure.
   
9. What are three new semantic elements introduced in HTML5?
   abbr: used for abbrevitions and accronyms.
   cite: when referencing a piece of work, cite is used to indicate where the citaion is from, the content will be italicised and should be used just for the source of the work and not a persons name.
   nav, article and aside are three new semantic elements in HTML5 that allows for division of parts of a page, the names indicate the type of content each one will hold.
   

http://codepen.io/ana8806/pen/RpYYxv

Gear up:
-Empathy plays a role in my everyday life and my relationships, both personal and professional. It often times is what guides my decisions and leads me to act in certain ways, pretty much allowing me to tailor my interactions with others. Empathy for me is the key to being a people person and building successful relationships, it helps me to understand what makes people tick. I find it as a good tool to stay positive and learn new things everyday.
-I think that empathy can help people build better software because by practicing empathy you put yourself in someone else's shoes in way and become more in tune with another perspective. Empathy creates a deep awareness. This can help us to realize a need for something that we may not been able to see with just our own limited perspectives or opinions. Empathy can also help you to have a greater understanding of the needs of your customers which will lead to putting they're needs first and ultimately ensure that you are seeking customer satisfaction though your work.
-Empathy is important for working with a team because it allows you to understand people better, to open up to another's perspective. Empathy instills trust within a team allowing for clear communication and diverse outcomes.
-----
-In a professional setting I find it most difficult to be empathetic when someone comes off as lazy, or does not contribute to the team in the ways I might expect. In these situations I could probably take the chance to interact a little closer with the individual by having a conversation and try to understand what is going on with this person on a deeper level. It could lead me to discover an underlying fear, misunderstanding or learn of a personal circumstance that I could potentially help this person with that might allow them to perform as part of the team how I initially expected.

Day 2
Chapters 3 & 4 HTML & CSS

1. There are 3 main types of lists in HTML: Ordered, Unordered, and Definition. The main differences are:
   -Ordered lists have numbers for each list item
   -Unordered lists begin each list item with a simple bullet point, items are not in a specified order.
   -Definition lists are made up of a set a terms followed by definitions for each of the terms.
   
2. Basic structure of an element used to link to another website:
   Links are created using an element, which uses an href attribute to indicate the page being linked to.
   
3. What attribute should you include in a link to open a new tab when the link is clicked?
   A "target" attribute should be used with a value of _blank.
   
4. How do you link to a specific part of the same page?
   You can link to a specific part of the same page by giving the individual elements with which you will want to link to a specific id (it must begin with a letter or an underscore). To link to a specific chosen part of the page identified by an element with a given id an element should be used with an href attribute that starts with # symbol followed by the id of the element you want to link to.
   

Chapters 10, 11, 12 HTML & CSS

1. What is the purpose of CSS?
   CSS allows you to create rules that specify how the content of an element should appear.
   
2. What does CSS stand for? What does cascading mean in this case?
   CSS stands for "Cascading Style Sheet". Cascading refers to the possibility of multiple rules that apply to a single HTML piece or element and the rules in place to understand which rule will take precedence.
   
3. What is the basic structure of a CSS rule?
   A CSS rule contains two parts a selector, indicating the element to be styled, and a declaration, consisting of a property and a value for that property. Selectors indicate which element the rule applies to, more than one element can be selected and separated by commas. The selector is placed before a set of curly brackets. The declaration is placed within the curly brackets. First the property is named, this indicates the aspect of the element which you want to change. The property is followed by the value which specifies the settings you want to use for the property selected. The declaration (property: value) are separated by a colon.
   
4. How do you link a CSS stylesheet to your HTML document?
   The link element is an empty element used to link a CSS stylesheet to an HTML document. The link is found within the head element, it consists of three attributes: href, type, and rel. (open <)link href="css/styles.css" type="text/css" rel="stylesheet" (/>close)
5. Why is it useful to use external stylesheets as opposed to using internal CSS?
   Using external stylesheets as opposed to internal CSS is useful because each HTML page can share the same CSS document rather than repeating code on each HTML page, this will also allow a page to load quicker with less code, and it is simpler to read and edit on one file keeping code clean.
6. Describe what a color hex code is.
   A hexadecimal (six-digit) code that represents the amount of red, green and blue in a color, preceded by a # sign.
   
7. What are the three parts of an HSL color property?
   The three parts of HSL color property are: Hue, Saturation, and Lightness. Hue is represented as a color circle where the angle (between 0 and 360 degrees) represents the color. Saturation is the amount of gray in a color, represented as a percentage - 100% is full saturation and 0% is a shade of gray. Lightness is the amount of white (lightness) or black (darkness) in a color, also represented as a percentage 0% lightness is black, 100% lightness is white and 50% lightness is normal.
   
8. 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 have extra details on the ends of the main strokes of the letters, known as serifs, traditionally used in longer passages as it is considered easier to read. Sans-Serif font have straight ends to the letters creating a cleaner design, typically used if text is small to make it clearer to read. Monospace font has the same width for every letter, commonly used for code as they align well making it easier to read.
   
9. When specifying font-size, what are the main three units used?
   Three main units used to specify font-size are: pixels, percentages, and EMS.
   

Day 3
Chapter 7 HTML & CSS

1. If you're using an input element in a form, what attribute controls the behavior of that input?
   The "type" attribute will determine what kind of input will be created. (ie: text, password, radio, checkbox, file, submit)
   
2. What element is used to create a dropdown list?
   The select element.
   
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 "submit".
   
4. What element is used to group similar form items together?
   The fieldset element.
   

Chapter 13 & 15 HTML & CSS

1. Describe the differences between border, margin, and padding.
   Border is the outside lining of a box, whether or not it is visible, it is what separates the edge of one box from another. Margins sit outside of the border, margins can be set to create a gap between the borders of two adjacent boxes. Padding is the space between the border of a box and any content contained within it.
   
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
   The values are in clockwise order starting with top, right, bottom, and left.
   
3. Descirbe the difference between block-level and inline elements.
   Block-level elements always appear on a new line, while in-line elements continue to appear on the same line as neighboring elements.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
   Fixed positioning is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containg element. Elements with fixed positioning do not affect the position of surrounding elements and do not move when the page is scrolled up or down. The z-index property allows you to control which box appears on top because when you move any element from normal flow boxes can overlap.
   
5. What is the difference between a fixed and liquid layout?
   Fixed layouts do not change in size as the user increases or decreases the size of their browser window and measurements are given in pixels. Liquid layouts on the otherhand, stretch and contract depending on how the user increases or decreases the size of the browser, and is expressed in percentages.
   

Day 4
Chapter 5 HTML & CSS

1. In an image element, why is the alt attribute important?
   The alt atribute is important because it provides a text description of the image if you cannot see it.
2. What determines if an image element is inline or block?
   An image will either be inline or block depending on where the image is placed in your code. If the image is followed by a block level element then the block level element will sit on a new line after the image. If the image element is placed inside a block level element any text and other elements will flow around the image.
   
3. What are the benefits of jpg or png image file formats?
   When there are manyn different colors in an image, or even a picture with colors that are subtly different it is best to save the image as jpeg. When saving images with few colors or large areas of the same color such as logos it is best to save as gif or png.
   

Chapter 16 HTML & CSS

1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
   Specifying height and weight of your pictures through CSS instead of HTML keeps rules that affect presentation of a page in the CSS and out of HTML markup. Specifying image sizes can help pages load more smoothly as it will allow the browser to leave room for the images since CSS and HTML code will often load quicker than images.
2. What is an image sprite, and why is it useful?
   When a single image is used for several different parts of an interface. The web browser only needs to request one image rather than many images, which can make the web page load faster.
   

Chapters 1 & 2 Eloquent JavaScript

1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
   Numbers are numeric values this includes integers (-) and (+). Strings are used to represent text, the content is always enclosed in quotes (single/double) "hello". Booleans are a value of true or false, it distinguishes between two possibilities
2. What are the three logical operators that JavaScript supports?
   It supports and, or and not.
   
3. What is the naming convention used for variables?
   Variables can be any non reserved word, such as var, they may include digits, but no spaces and must not start with a digit. A variable can only include $ and _ as punctuation.
   
4. What is the difference between an expression and a statement?
   An expression is a piece of code that produces a value but nothing more. A statement takes expressions and performs an action, statements are what programs are made of.
   
5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
   var, keyword, break, null, switch are just some examples of words that have special meanings and are "reserved" which means that they cannot be used for variable names as they will not work as intended if used for a name.
   
6. What is control flow, and why is it useful for programming?
   Control flow is the order in which statements are executed, usually from top to bottom. It is useful because it allows you to run code under certain conditions. Looping control flow allows you to go back to some point before in the program and repeat it with the current program state.
   

Day 6
Chapter 3 Eloquent JavaScript

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?
   If you enter sayHello it will show you the complete function, on the other hand if you enter sayHello() it will complete the task the function is meant to do in this case "Hello!" will be the result.
2. What is the keyword return used for?
   Return statements determine the value the function returns, the returned value is given to the code that called the function.
   
3. What are function parameters?
   Parameters are variables that we can set when we call a function. The value is given by the caller of the function not the code in the function.
4. What is the naming convention used for function names?