ajpulzone/Mod 2 BE Pre-work

## Mod 2 BE Pre-work
B2 Intermission Work
Answer these Check for Understanding questions as you work through the assignments.

HTML
What is HTML?
  *The standard markup language for creating web pages. HTML stands for Hyper Text Markup Language.

What is an HTML element?
  *An HTML element is everything from the start tag to the end tag (ex. <tagname> Content goes here... </tagname>
  *There are some elements that do not have any content (ex. <br>). These are called empty elements.
  *An element can contain other elements

What is an HTML attribute?
  *They are used to provide additional information about HTML elements
  *All HTML elements can have attributes
  *They are always specified in the start tag
  *They usually come in name/value pairs (ex. name="value")

What is the difference between a class and an id? When would you use one vs. the other?
  *Class: can be used on ANY HTML element. The class name IS case sensitive. Syntax is .class
    then define CSS properties within {}. Multiple HTML elements can share the same class
  *ID: used to specify a unique id for and HTML element. One ID, one element in the HTML document; you can't have
    more than one element with the same ID. Syntax is #idname, then define CSS properties within {}. The id name
    IS case sensitive, must contain at least one character, can't start with a number and must not contain
    white spaces (spaces, tabs, etc). Can be used to create bookmarks.
  *You would use a class when you want to specify characteristics for more than one element. You would use an ID
    when you want to specify characteristics for only one element.

What HTML would you write to create a form for a new dog with a "name" and an "age"?
  <form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age">
  </form>

What are semantic tags? When would you use them over a div?
  *Semantic tags clearly define what the content is (to both the browser and developer)
  *Allows data to be shared and reused accross applications
  *Using semantic tags improves the automated processing of the website (website ranking, search engine results,
    etc), so using them instead of divs can improve how the computer accesses the website

Explain what each of the following HTML tags do and when you would use them:
<h1>, <h2>, etc.
  *Used to designate a header. <h1> is the biggest (defines the most important heading)
  down to <h6> which is the smallest header (designates the least important heading)

<p>
  *Used to define a new paragraph. A paragraph always starts on a new line, and browsers automatically add some
  white space (a margin) before and after a paragraph.

<body>
  *Defines the body of the document. Contained within the html element
  *Use when you want to define the body portion of a website

<a> and the href attribute
  *The <a> tag defines a hyperlink
  *The href attribute specifies the URL of the page that the link goes to.

<img> and the src attribute
  *The <img> tag defines an image
  *The src attribute specifies the path to the image to be displayed.

<div>
  *Is a block element
  *Always starts on a new line and always takes up the full width available
  *Often used as a container for other HTML elements
  *Has no required attributes (however style, class and id are common)
  *When used with CSS, can be used to style blocks of content

<section>
  *An element that defines a section in a document. A thematic grouping of content, usually with a heading
  *ex. of sections: chapters, introductions, news items, contact info, etc
  *Use when you want an easily defined section when creating a website.

<ul>, <ol>, and <li>
  *ul - defines an unordered list. Use when you would like to list things with bullets
  *ol - defines and ordered list. Use when you would like to list things with numbers by default.
  *li - defines a list item. Use when designating an item to be listed

<form>
  *An html element used to create a form for user input.
  *Use when you want to create a website form that takes user input.

<input>
  *The most used form element
  *Has multiple ways to be displayed (depending on the type attribute) to get user input in some form
  *Use when you want to get user input on a website (like prefered mailing types, name and email, etc)


CSS
What is CSS?
  *The language we use to style an HTML document. It describes how the HTML elements should be displayed

What is a CSS selector? How do you use the ID selector? The class selector?
  *A CSS selector is a set code phrase/character that specifies which element(s) we want to style.
  *To use the ID selector you use the # and the id name to specify which id it is you want to style
    ex.) #dogname {color: blue;}
  *To use the class selector you use the . and class name to specify which class you want to style.
    ex.) p.dogbreed {background-color: purple;}

What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
  *Inline - used to apply a unique style to a SINGLE HTML ELEMENT. Apply CSS rules for specific element
    Pros: You can quickly/easily insert CSS rules to an HTML page which makes this way great for testing changes
      and performing a quick fix, ou don't need to create and upload a seperate document for this way.
    Cons: Very inefficient as you would have to add a CSS rule to every HTML element, also makes the appearance
      very messy. Styling multiple elements can affect the web page size and download time.
  *Internal - used to define a style for a SINGLE HTML PAGE. Add <style> tab in the <head> secton of
   the HTML document.
    Pros: you can use class and ID selectors, you don't have to upload multiple files since you will only add the
      code within the same HTML file
    Cons: adding the code within the document can increase the pages size and load time, you may will have to upload
      the same code multiple times if you want to create several identically formatted pages
  *External - used to define a style for MANY HTML PAGES. Link the HTML sheet to a seperate .css file
    Pros: because the CSS code is held in a seperate document, the HTML file will be smaller in size. You can also
      use the same .css file for multiple pages
    Cons: your pages may not render correctly until the external CSS file is loaded, linking to multiple CSS files
      can increase a websites download times

What is the Box Model? Describe each component of the Box Model.
  *The box model is a box that wraps around every HTML document; used when talking about design and layout.
    Consists of the margin, border, padding, content (outside --> in)
  1.) Margin - clears an area outside of the border. The margin in transparent
  2.) Border - a border that goes around the padding and content
  3.) Padding - clears and area around the content. The padding is transparent
  4.) Content - the content of the box, where text and images appear

SQL
Jumpstart Lab Tutorial
What is a database?
  *The means of storing, fetcing, calculating and sorting data

What is SQL?
  *Structured Query Language
  *How we interact with most databases

What is SQLite3?
  *A database, not recommended for production use, but good for local developement and expiriments

What is a Table?
  *A way to display data to make it easier to read and access

What is a primary key?
  *A unique identifier for each record in a table
  *Can consist of a single or multuple columns

What is a foreign key?
  *A column or combination of columns that is used to establish and enforce a link between the data in two
   tables to control tat data that can be stoored in the foreign key table. A key used to reference an item in
   another table.

Explain what each of the following SQL commands do:
 insert
   *Used to insert values into columns

 select
   *Finds rows in the table
   *Use SELECT * find all the data/columns

 where
   *Used to specify which data you are looking for. Limits the returned rows to only those with the specifed
    attribute matching.

 order by
   *Lets you order the data output but choosing a column and order option (descending, ascending, etc)

 inner join
   *Combines data from multiple tables into one table. This table is temporary and only available during the life
    of that ONE query

PG Exercises
How can you limit which columns you select from a table?
  *By using SELECT "state which columns you want to retrieve information from" FROM "table_name"

How can you limit which rows you select from a table?
  *By using the WHERE clause
    ex.) SELECT * FROM "table_name" WHERE "qualifiers"

How can you give a selected column a different name in your output?
  *By using the AS clause
    ex.) SELECT "value you want" AS "output name", "other values you want that don't have a name change" FROM
     "table_name"

How can you sort your output from a SQL statement?
  *By using the ORDER BY clause
     ex.) SELECT * FROM "table_name" ORDER BY "column info you want"

What is joining? When do you need to join?
  *Joining is combining the row information from 2 or more tables, based ona related column between them.
  *You need to join when you have multiple tables that each have pieces of information you need to access and
    the tables have something in common to use in the comparison

What is an aggregate function?
  *A function performs a calculation on mutiple values and returns a single value

List three aggregate functions and what they do.
  *Count --> returns the number of rows in a database table
  *Sum --> returns the total sum of a numeric column
  *Avg --> calculates the average of a set of values

What does the group statement do?
  *Group By groups tows that have the same values into summary rows

How does the group statement relate to aggregates?
  *Often used with aggregate functions to group the result-set by one or more columns


Rails Tutorial: Task Manager
Copy and Paste the link to your Task Manager repo here: https://github.com/ajpulzone/task_manager

Copy and Paste the link to your Static Challenge here: https://github.com/ajpulzone/static_challenges

Define CRUD.
  C: Create
  R: Read
  U: Update
  D: Delete
  *All of the above refer to actions taken on data in a database.

Define MVC.
 *Model View Controller: an architectual pattern that separates an application into 3 main logical components.
   1.) The model
   2.) The view
   3.) The contoller

What three files would you need to create/modify for a Rails application to respond to a GET request to /tasks, assuming you have a Task model.
  1.)routes.rb
  2.)controller.rb
  3.)index.html.rb

What are params? Where do they come from?
  *Params are objects created from parameters that are received in a request. We can use and manipulate these
    params inside of an application.

Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
  *One route (each) to take in the user input obtained during the creation/editing of the task and get it to the
    database and one route (each) to then take that info from the database and make a new instance of task/change
    that instance of the task
	B2 Intermission Work
	Answer these Check for Understanding questions as you work through the assignments.

	HTML
	What is HTML?
	*The standard markup language for creating web pages. HTML stands for Hyper Text Markup Language.

	What is an HTML element?
	*An HTML element is everything from the start tag to the end tag (ex. <tagname> Content goes here... </tagname>
	*There are some elements that do not have any content (ex. <br>). These are called empty elements.
	*An element can contain other elements

	What is an HTML attribute?
	*They are used to provide additional information about HTML elements
	*All HTML elements can have attributes
	*They are always specified in the start tag
	*They usually come in name/value pairs (ex. name="value")

	What is the difference between a class and an id? When would you use one vs. the other?
	*Class: can be used on ANY HTML element. The class name IS case sensitive. Syntax is .class
	then define CSS properties within {}. Multiple HTML elements can share the same class
	*ID: used to specify a unique id for and HTML element. One ID, one element in the HTML document; you can't have
	more than one element with the same ID. Syntax is #idname, then define CSS properties within {}. The id name
	IS case sensitive, must contain at least one character, can't start with a number and must not contain
	white spaces (spaces, tabs, etc). Can be used to create bookmarks.
	*You would use a class when you want to specify characteristics for more than one element. You would use an ID
	when you want to specify characteristics for only one element.

	What HTML would you write to create a form for a new dog with a "name" and an "age"?
	<form>
	<label for="name">Name:</label><br>
	<input type="text" id="name" name="name"><br>
	<label for="age">Age:</label><br>
	<input type="text" id="age" name="age">
	</form>

	What are semantic tags? When would you use them over a div?
	*Semantic tags clearly define what the content is (to both the browser and developer)
	*Allows data to be shared and reused accross applications
	*Using semantic tags improves the automated processing of the website (website ranking, search engine results,
	etc), so using them instead of divs can improve how the computer accesses the website

	Explain what each of the following HTML tags do and when you would use them:
	<h1>, <h2>, etc.
	*Used to designate a header. <h1> is the biggest (defines the most important heading)
	down to <h6> which is the smallest header (designates the least important heading)

	<p>
	*Used to define a new paragraph. A paragraph always starts on a new line, and browsers automatically add some
	white space (a margin) before and after a paragraph.

	<body>
	*Defines the body of the document. Contained within the html element
	*Use when you want to define the body portion of a website

	<a> and the href attribute
	*The <a> tag defines a hyperlink
	*The href attribute specifies the URL of the page that the link goes to.

	<img> and the src attribute
	*The <img> tag defines an image
	*The src attribute specifies the path to the image to be displayed.

	<div>
	*Is a block element
	*Always starts on a new line and always takes up the full width available
	*Often used as a container for other HTML elements
	*Has no required attributes (however style, class and id are common)
	*When used with CSS, can be used to style blocks of content

	<section>
	*An element that defines a section in a document. A thematic grouping of content, usually with a heading
	*ex. of sections: chapters, introductions, news items, contact info, etc
	*Use when you want an easily defined section when creating a website.

	<ul>, <ol>, and <li>
	*ul - defines an unordered list. Use when you would like to list things with bullets
	*ol - defines and ordered list. Use when you would like to list things with numbers by default.
	*li - defines a list item. Use when designating an item to be listed

	<form>
	*An html element used to create a form for user input.
	*Use when you want to create a website form that takes user input.

	<input>
	*The most used form element
	*Has multiple ways to be displayed (depending on the type attribute) to get user input in some form
	*Use when you want to get user input on a website (like prefered mailing types, name and email, etc)


	CSS
	What is CSS?
	*The language we use to style an HTML document. It describes how the HTML elements should be displayed

	What is a CSS selector? How do you use the ID selector? The class selector?
	*A CSS selector is a set code phrase/character that specifies which element(s) we want to style.
	*To use the ID selector you use the # and the id name to specify which id it is you want to style
	ex.) #dogname {color: blue;}
	*To use the class selector you use the . and class name to specify which class you want to style.
	ex.) p.dogbreed {background-color: purple;}

	What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
	*Inline - used to apply a unique style to a SINGLE HTML ELEMENT. Apply CSS rules for specific element
	Pros: You can quickly/easily insert CSS rules to an HTML page which makes this way great for testing changes
	and performing a quick fix, ou don't need to create and upload a seperate document for this way.
	Cons: Very inefficient as you would have to add a CSS rule to every HTML element, also makes the appearance
	very messy. Styling multiple elements can affect the web page size and download time.
	*Internal - used to define a style for a SINGLE HTML PAGE. Add <style> tab in the <head> secton of
	the HTML document.
	Pros: you can use class and ID selectors, you don't have to upload multiple files since you will only add the
	code within the same HTML file
	Cons: adding the code within the document can increase the pages size and load time, you may will have to upload
	the same code multiple times if you want to create several identically formatted pages
	*External - used to define a style for MANY HTML PAGES. Link the HTML sheet to a seperate .css file
	Pros: because the CSS code is held in a seperate document, the HTML file will be smaller in size. You can also
	use the same .css file for multiple pages
	Cons: your pages may not render correctly until the external CSS file is loaded, linking to multiple CSS files
	can increase a websites download times

	What is the Box Model? Describe each component of the Box Model.
	*The box model is a box that wraps around every HTML document; used when talking about design and layout.
	Consists of the margin, border, padding, content (outside --> in)
	1.) Margin - clears an area outside of the border. The margin in transparent
	2.) Border - a border that goes around the padding and content
	3.) Padding - clears and area around the content. The padding is transparent
	4.) Content - the content of the box, where text and images appear

	SQL
	Jumpstart Lab Tutorial
	What is a database?
	*The means of storing, fetcing, calculating and sorting data

	What is SQL?
	*Structured Query Language
	*How we interact with most databases

	What is SQLite3?
	*A database, not recommended for production use, but good for local developement and expiriments

	What is a Table?
	*A way to display data to make it easier to read and access

	What is a primary key?
	*A unique identifier for each record in a table
	*Can consist of a single or multuple columns

	What is a foreign key?
	*A column or combination of columns that is used to establish and enforce a link between the data in two
	tables to control tat data that can be stoored in the foreign key table. A key used to reference an item in
	another table.

	Explain what each of the following SQL commands do:
	insert
	*Used to insert values into columns

	select
	*Finds rows in the table
	Use SELECT find all the data/columns

	where
	*Used to specify which data you are looking for. Limits the returned rows to only those with the specifed
	attribute matching.

	order by
	*Lets you order the data output but choosing a column and order option (descending, ascending, etc)

	inner join
	*Combines data from multiple tables into one table. This table is temporary and only available during the life
	of that ONE query

	PG Exercises
	How can you limit which columns you select from a table?
	*By using SELECT "state which columns you want to retrieve information from" FROM "table_name"

	How can you limit which rows you select from a table?
	*By using the WHERE clause
	ex.) SELECT * FROM "table_name" WHERE "qualifiers"

	How can you give a selected column a different name in your output?
	*By using the AS clause
	ex.) SELECT "value you want" AS "output name", "other values you want that don't have a name change" FROM
	"table_name"

	How can you sort your output from a SQL statement?
	*By using the ORDER BY clause
	ex.) SELECT * FROM "table_name" ORDER BY "column info you want"

	What is joining? When do you need to join?
	*Joining is combining the row information from 2 or more tables, based ona related column between them.
	*You need to join when you have multiple tables that each have pieces of information you need to access and
	the tables have something in common to use in the comparison

	What is an aggregate function?
	*A function performs a calculation on mutiple values and returns a single value

	List three aggregate functions and what they do.
	*Count --> returns the number of rows in a database table
	*Sum --> returns the total sum of a numeric column
	*Avg --> calculates the average of a set of values

	What does the group statement do?
	*Group By groups tows that have the same values into summary rows

	How does the group statement relate to aggregates?
	*Often used with aggregate functions to group the result-set by one or more columns


	Rails Tutorial: Task Manager
	Copy and Paste the link to your Task Manager repo here: https://github.com/ajpulzone/task_manager

	Copy and Paste the link to your Static Challenge here: https://github.com/ajpulzone/static_challenges

	Define CRUD.
	C: Create
	R: Read
	U: Update
	D: Delete
	*All of the above refer to actions taken on data in a database.

	Define MVC.
	*Model View Controller: an architectual pattern that separates an application into 3 main logical components.
	1.) The model
	2.) The view
	3.) The contoller

	What three files would you need to create/modify for a Rails application to respond to a GET request to /tasks, assuming you have a Task model.
	1.)routes.rb
	2.)controller.rb
	3.)index.html.rb

	What are params? Where do they come from?
	*Params are objects created from parameters that are received in a request. We can use and manipulate these
	params inside of an application.

	Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
	*One route (each) to take in the user input obtained during the creation/editing of the task and get it to the
	database and one route (each) to then take that info from the database and make a new instance of task/change
	that instance of the task