andrewckinstler/AndrewKInstler-mod-0-capstone.md

## AndrewKInstler-mod-0-capstone.md

      
    Raw
  

              AndrewKInstler-mod-0-capstone.md
            
          
    CodePen
Day 1


HTML's purpose on a webpage is to give the browser structural information, such as text or basic styling.
An element is what you're calling inside the tags. It's what lives inside the angled brackets. An element would be body and the tags would be <body> and </body>.
Attributes give extra information to the browser.
The head element gives the broswer information about the page, which often includes the title element and other meta information or links to your stylesheets. The title element will display what you put inside the tags on top of the page or within the tab for the page. The body element is meant to show what to display in the main broswer window.
The keyboard shortcut to view the source of a website is option+command+u.
The <h> tag can go from 1-6 and is used for headers.
The <b> tag will make everything before </b> bold.
The <s> tag will add a strikethrough to everything before </s>.
The <sup> tag will put everything before the closing tag into a superscript.
The <i> tag will make everything before </i> italic.
Empty elements are elements that only have one tag and are usually written with a space and a forward slash before the closing bracket.
Semantic markup is code that is meant to give meaning to the way you're laying out your HTML. In the past everything was layed out using divs with class id's but now we have tags like <footer> and <article> that are meant to give more meaning to the way you're laying out your foundation. It is also something that can give added weight in search engine optimization, as it helps the engine parse important information more clearly.
Some of the new additions that came in HTML5 are <nav>, which is where you can clearly build a navigation menu/bar. <header> is where you should be buiding top bars of your page where you can add some links and information on the company the site is for. The <article> tag is where you should be putting information that could be taken out of context of the website as a whole.

Day 2

HTML


An unordered list, tagged <ul> and then <li> for the list items, will be listed as bullet points (unless changed by CSS). An ordered list, tagged <ol> and then <li> for the list items, will be listed as numerical values. A definition list, tagged <dl>, <dt>, and <dd> won't have an indicator that it's a list at all, other than indentations.
An unordered list should be used in cases where things aren't going to rely on an order, such as grocery lists or menu items.
An ordered list should be used in places where things need to be read in a specific order, such as recipes or a task list.
Definition lists are used to list out multiple items and their definitions, like if you were trying to talk about different instruments, you could use something like this:

<dl>
   <dt>Guitar</dt>
      <dd>A six stringed instrument that can be strummed or plucked.</dd>
   <dt>Saxophone</dt>
      <dd>A woodwind instrument with felt keys that change the frequency</dd>
</dl>

And it would look like:

   Guitar
      A six stringed instrument that can be strummed or plucked.
   Saxophone
      A woodwind instrument with felt keys that change the frequency


The basic structure used to add a link to another website is <a href=example.com>link text here</a>.
The attribute to open in a new tab is target="_blank" so your whole piece of code there would be <a target="_blank" href="example.com">link text here</a>.
To link to a specific part of a page you need to know the section's id tag. To call that you use the # and write the code as <a href="example.com/#exampleid>link text here</a>

CSS


The purpose of CSS is to define to the browser how the information on the page should be presented. This can be any type of styling, from background colors to typefaces to how sections are shaped.
CSS stands for Cascading Style Sheets. In this case it means that your stylesheet is parsed from top to bottom. In implimentation, this means that something lower down in your stylesheet will override things higher up.
The basic structure of a CSS rule starts with the selector that you're trying to call, followed by {}, with all of the rules that you're trying to set inside of the brackets and ended with a ;. In your stylesheet it could look like this:

p {
   color: blue;
   font-size: 12px;
};


To link a stylesheet, you use the structure of <link href="example.css" type="text/css" rel="stylesheet">. In this you are telling the browser where the stylesheet is using href, using type to tell the browser what type of document you're linking to, and using rel to let the browser know that it is a stylesheet.  This is typically done in the head element.
The times that it is best to use an external stylesheet is when you're buiding a site with multiple pages. This allows for consistancy across all pages, keeps your code organized, and allows you to manipulate entire sites from one page, rather that having to change them one-by-one. It also allows your pages to run faster since the stylesheet can be downloaded once and apply across the board.
A color hex code is a six digit numerical code that represents the amount of red, blue, and green in a color. They are written using a # symbol and look like #000000. That example would represent black. \
The three parts of an HSL color property are hue, expressed as an angle between 0 and 360 degrees. saturation, expressed as a percentage. lightness, also expressed as a percentage. In CSS, HSL is written, for example, as:

p {
   color: hsl(16,100%,27%);
   };


The 3 catagories of typefaces are serif, sans-serif, and monospace.
The differences between them are that serif fonts, such as Times New Roman and Georgia, have extra details on the ends of the letters, aptly named serifs. Sans-serif fonts, such as Helvetica and Arial, do not have those details and were made because screens have lower resolution than print and therefore are easier to read on computer screens. Monospaced fonts, such as Courier and Monaco, are fonts where every letter is the same width. These are often used in code editors because they are more consistent to look at.
The three main ways to specify font size are percentages, pixels, and EMs. Pixels are relative to the users screen resolution. Browsers have a default of 16 pixels, written as 16px. Percentages are scaled from the root font size in your stylesheet or the browsers default. If you wanted a paragraph element to be at 24px and your page is still at the default 16px, you could write font-size: 150%;. EMs are equal to the width of the letter 'm'. The uses for this are for scaling text relative to the size of the font in the parent element. It is written as a float such as .75em.

Day 3

Forms


In the input element of a form the attribute that controls behavior is type. The value of the type attribute can drastically change the way your form will behave. You could set birthdate verification by setting the value as type="date" or do account login by setting the value as type="password".
The element used to create a dropdown menu is <select>.
The type attribute in this case is irrelevent because the purpose of a form is to send all types of information to the server.
The attribute used to group similar items together is <fieldset>.

CSS


Border, margin, and padding are all a part of the CSS 'Box Model'. In this model, the border represents the value of the line that your box is made of. Margin represents the value of the space right outside of your box. While padding represents the value of the space on the inside of your box.
When you're listing out all of the values, they will be represented clockwise starting at the top. In the example provided, the value 1px could be written as padding-top: 1px, the value 2px could be written as padding-right: 2px, and so on.
The difference between the two is that block-level elements have a box that can be manipulated, whereas inline elements take on the flow of the content that they're a part of.
The role of fixed-positioning is to enable elements to stay in the same place no matter where the user is scrolling on the page. The z-index enables you to stack items in the order that you choose by giving different elements higher and lower values. Items with higher values will sit on top of items with lower values.
A fixed layout will stay the same size, no matter how the user manipulates their browser window, while a liquid layout will resize boxes and move elements around based on how the window size is changed.

Day 4

CSS


The alt attribute is important because it allows people using screen readers or poor internet connections to have a text description of the image.


What determines how an <img> attribute behaves is it's position in your code. If it sits inside of a block level element, such as a paragraph, it will behave like a block level element. if it is in an inline element, it will behave as such.


The benefits of a .jpeg image is that they are better suited for images that have a lot of different colors and details, while .png images are better suited to 'flatter' images with more greyscales and solid images.


The benefit is that the browser is often going to render your stylesheet before it renders your images, so specifying image height and width lets the browser render to those parameters rather than loading and then having to change it.


An image sprite is the name for an image that is getting called multiple times on a page. The value of this is that it only has to be loaded once.


Day 5

JavaScript


You declare a variable by telling the program that you want to start a variable and then give it a name and a value. you do this with var. The equals sign is called the assignment operator, and it is used to assign value to your variable, such as: var age = 20;
A number is any integer or float, a string is anything surrounded by quotation mark, and a boolean is any true/false statement.


Names can only start with a letter, $, or an _.
No dashes, no periods.
No reserved words.
All variables are case-sensitive, it is bad practice to use the same word with a different case.
Use variable names that describe the content.
Camel-case your variables. ex. phoneNumber or carModel.


Some of the JavaScript reserved words are: if, this, and while.
4. Arrays are useful in a lot of different cases. They can hold lists that need to be added to later on and can be used to store a lot of complex data that needs to be called on later. You access an array by using the [] with the index number inside of it, starting at 0 NOT 1. you can change the value in an array by selecting it and using the assignment operator to give it the desired value.
5. An expression is something that returns a value, whereas a statement is something that preforms an action.
6. Three examples of operators are assignment operators, which gives variables value, arithmetic operators, which can perform basic math, and string operators which can combine the contents of strings.
Day 6

JavaScript


sayHello without the parenth is going to reference the function and sayHello() is going to actually call the function.
Parameters act as variables and are what the function needs to run. Arguments are what is actually getting passed into the function.
return is a reserved word that is used to tell your function to give information back to whatever called it.
Local variables are less inherently risky. Global variables can run into naming conflicts or speed issues. A time where you might want to use a global variable over a local variable is when multiple functions are going to read the same piece of information, like a user's name, for instance.