Mod 0 Capstone

CodySmith-mod-0-capstone.md

New comment for each day of the capstone

1. The purpose of HTML is to give structure to a website
2. Elements tell the browser about the text in between the two tags. Tags function as something like an on/off switch to the element by using opening and closing tags.
3. Attributes are used to provide more specific information about an element. (ex. Languages)
4. Head: Contains info about the web page that isn't seen by the user.
   Body: The content seen by the user
   Title: Title of the site, often found in the tab or the top of the browser window.
5. In Chrome, view source of the website by going to the toolbar, clicking View > Developer > View Source.

• < html > - Used to indicate any content between this tag and the closing tag is HTML code.

• < body > - Indicates anything between the body tags should be seen by the user.

• < h1 > - Main heading, largest text

• < h2 > - Sub heading, smaller text etc.

• < title > - Used to display content in the tab or top of browser window.

7. Empty elements do not require a closing tag. Examples include line break or horizontal rule.

8. Semantic markup is added to HTML to improve functionality for use with screen readers, as well to supply important context about the content of the site. Examples include < em >, to add emphasis to information. < em > makes text appear italic but is also interpreted on screen readers.

9. New semantic functions in HTML5:

• < article > a section of a page that could stand alone, or be syndicated.
• < aside > if in an article element, provides related information.
• < section > groups related content together. (contact, bio, portfolio, etc.)

CODEPEN: https://codepen.io/monstaro/pen/bPmrmr

• Ordered list: Meant to indicate the importance of chronological order of a list (ex. steps in a recipe). Interpreted as numbers.
• Unordered list: Meant to indicate a general list, with no emphasis on order (ex. ingredients in a recipe). Interpreted as bullet points.
• Definition list: Includes term and definition tags. As the name suggests, it is used almost exclusively for the purpose of definitions.

2. < a href="web address" > click here to go < /a > is the basic structure for an external link.

3. To make your link open in a new tab/window, add target="_blank" at the very end of your href tag.

---

(Chapters 10, 11, 12...)

1. The purpose of CSS is to style the HTML. This includes text color, typeface, size, etc. as well as borders, backgrounds, and more.

2. CSS stands for Cascading Style Sheet. Cascading, in this sense, means that that the CSS reads top to bottom, so any conflicting information within the CSS will default to whichever rule was closest to the bottom. There is also a hierarchy of specifity, for example selecting h1 would be more specific than doing a universal target. You can also add !important after a value to indicate that it is more important than other rules applying to that same element.

3. CSS rules are made up of two parts, the selector and the declaration. A selector 'selects' which HTML element to apply, or declare the instruction for. You could select a paragraph p and declare that all p elements use font-family: Arial;. Declarations are also made up of two parts: property and value. In our example, font-family is the property. The value is Arial. Another example would be using the property color with the value of blue

4. You link to a CSS file within the head element of an HTML document and put the CSS code after the HTML. It is also worth noting that these links to not require a closing tag.

5. External style sheets are advantageous over internal because externals allow you to change the style of all pages on your site by just altering one file. You also don't have to repeat the same rules on every page.

6. HEX is a 6-character color code, preceded by a hash #. The six characters represent Red, Green & Blue.

7. HSL is made up of Hue, Saturation, and Lightness. It allows for far more control over the character of a particular color.

8. Three main categories of fonts: Serif (details or lines at the end of the letters) Sans Serif (without Serif) and monospace, in which every character is the same width.

9. Three main ways you can adjust the size of the font is by changing the pixel value (ex 12px, 14px, etc) . or you can choose a percentage of the default 16px. You can also use ems to default to the width of the letter 'm' which is also 16px.

CODEPEN: https://codepen.io/monstaro/pen/bPmrmr

1. The type attribute controls the behavior of an input element

2. The select attribute is used to create a dropdown list.

3. The type attribute should be set to method="post" to send the form data to the server.

4. The formset element is used to group similar items in a form together in a box.

---

5. Border: Separates the edge of the box from another.
   Margin: Size of the gap between two adjacent borders.
   Padding: Space between the border and the inner content of the box.

6. 1px 4px 5px 10px Would correspond to 1px on top, 4 px on the right side, 5 px on the bottom, and 10px on the left.

7. Block elements will stack vertically down the page, where inline elements continue horizontally and flow in between surrounding text.

8. Using fixed positioning will position an element in relation to the browser window instead of the parent element. Usingz-index you can dictate the layer order of the different elements to control what appears on top. This can be used to position a header to always be showing while you scroll through a paragraph underneath.

9. A fixed layout keeps the dimensions of its elements the same no matter what the screen size is. Liquid layouts have a responsive design and will expand or contract depending on screen size.

1. An alt attribute provides information about the image if a user cannot see it. This applies especially for search engines and users with screen readers.

2. An image element is inline if it is within a block level element. It will not start on a new line. An image element is block if it is placed before another block element, such as <p> or <h1>

3. What are the benefits of jpg or png image file formats? .jpg formats are suited for images with many different colors such as photographs. .png and .gif are better suited for images with few colors that cover larger areas, such as logos. .png photos can also be saved to feature transparency on rounded edges and semi-opaque colors.

---

Chapter 16

1. Indicating image size in CSS is important because it helps the webpage load more smoothly. The code typically loads before the images, so specifying image size 'reserves' the space for them on the website so the images won't move all the words around when it loads.

2. An image sprite is when a website has multiple uses of the same image, which allows for the page to load faster.

To declare a variable, type the keyword var and then whatever variable you are using, for example, quantity
The equals sign is an assignment operator. It assigns a value to the variable, for example, if your variable name and value is a quantity of 3, you could type quantity = 3; and the equals sign assigns the value to the name.

Strings: Strings consist of letters and other characters such as symbols & punctuation. They are enclosed in a pair of single or double quotes, and are usually used to add new content into a page.
Numbers: Probably the most self-explanatory. This data type stores numbers, including positive and negative numbers, as well as fractional numbers/decimals.
Booleans: Booleans return one of two values: true or false. Possibly the most complex of the three data types (at least at first) it can help return results to a user such as color preference of a car or location information.

What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?

• The name cannot start with a number. It must begin with a letter, dollar $ign, or under_score.
• The rest of the name can contain anything listed above, with the addition of numbers as well. Do not use a dash - or a period . in a variable name.
• Cannot used a reserved word or keyword. There are full lists available for reserved words in JavaScript. An example would be var because it is already a keyword, so you cannot name a variable a keyword that already exists.
• Variables are case sensitive. Always use consist casing when naming variables, and it is good practice not to create two variables with the same word but different casing.
• Use a relavent name when naming variables. For example, hairColor eyeColor instead of characteristicA and characteristicB
• If the variable name is more than one word, you want to keep the first word entirely lowercase, and for every following word, capitalize the first letter. forExampleThis. This is called camelcase. You can also use underscores, but not dashes.

How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?

Arrays are useful when you are creating a list and you don't know how many items it will contain. This way, you don't have to create enough variables for a long list. To access a value in an array, you type array_name[array_value] or put into context, colors[2] using the example from the book. To change that value, simply add an equals sign and new value in quotes. The full statement would look like this: `array_name[array_value] = 'new value'

What is the difference between an expression and a statement?
A statement simply is a line of instructions, like `array_name[array_value] = 'new value'
An expression can either assign a value to a variable, or use multiple variables to return a single variable.
Basically, an expression is meant to return a single value from one or multiple values, but a statement is more like an instruction.

Three types of operators covered in Chapter 2 are assignment, arithmetic and string operators.
Assignment Operators assign a value to a variable, ex. size = 'large'
Arithmetic Operators perform basic math. ex. hoursPerMonth = 40 * 4;
String Operators can combine two strings 'Today is' + 'September 24th';