brennacodes/mod-2-intermission-gist.md

## mod-2-intermission-gist.md

      
    Raw
  

              mod-2-intermission-gist.md
            
          
    B2 Intermission Work

Answer these Check for Understanding questions as you work through the assignments.
HTML


What is HTML?

HyperText Markup Language - it is the standard markup language for creating websites, and defines the structure of  a webpage.


What is an HTML element?

It is pieces of content on a website, like ‘headings’, ‘lists’, ‘paragraphs’, etc. It is defined by a start tag and an end tag. The element is everything that comes between the two. (Some elements like <br> do not have an end tag)


What is an HTML attribute?

They usually come in name='value' pairs and they provide additional information about the content and is always located within the start tag. Some tags include title, lang, width, height, style, alt…
You should always quote attribute values attribute="value"


What is the difference between a class and an id? When would you use one vs. the other?

Classes are often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name. Multiple elements can share the same class. A id is a unique identifier for a single element.


What HTML would you write to create a form for a new dog with a “name” and an “age”?
<div class="newdog">
	<h3>New Dog</h3>
		<form>
			<label for="name">Enter a Name:</label>
			<input type="text" id="name" name="name">
			<label for="age">Enter an Age (in years):</label>
			<input type="number" id="age" name="age" min="0" max="25">
		</form>
</div>


What are semantic tags? When would you use them over a div?
1.


Explain what each of the following HTML tags do and when you would use them:

<h1>, <h2>, etc.

These are heading tags. Heading 1 is the most important, and as the heading number increases, the importance decreases.


<p>

This is a paragraph tag used to define text that will be displayed on a new line.


<body>

This is a body tag used to define the body of the webpage; that is, anything that can visually render on the page.


<a> and the href attribute

This is a link tag used to define links to websites.


<img> and the src attribute

This is an image tag used to define what image should appear. src tells the page where the source for the image file is located. You should always specify the width and height of an image. To use an image as a link, nest the image element inside of the link element, after the opening link tag.


<div>

This is a divider tag. It is a block element and helps defines sections of the webpage.


<section>


<ul>, <ol>, and <li>

unordered list, ordered list, and list item


<form>

defines a form where input will be received from the user


<input>

defines an input element


Links


On links:
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window


Blocks

Every element has a default display value, that is either a block or inline.


Semantic Elements

Clearly describes the meaning to both the browser and the developer: <form>, <table>, <article>... A semantic Web allows data to be shared and reused across applications, enterprises, and communities.
A section is a thematic grouping of content, typically with a heading." Examples of where a <section> element can be used:

Chapters
Introduction
News items
Contact information


Form Elements

<input> - The <input> element can be displayed in several ways, depending on the type attribute.
<label> - defines a label for several form elements and is useful for accessibility features. The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
<select> - defines a drop-down list
<option> - options in a drop-down list
<textarea> - defines a multi-line input field (a text area)
<button> - defines a clickable button
<fieldset> - used to group related data in a form.
<legend> - defines a caption for the <fieldset>
 element
<datalist> - specifies a list of pre-defined options for an <input> element. User will see a drop-down list of the pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
<output> - represents the result of a calculation (like one performed by a script).
<optgroup> - Defines a group of related options in a drop-down list


Input Types

<input type="button"> - button
<input type="checkbox"> - checkbox
<input type="color"> - color picker
<input type="datetime-local"> - datetime picker with no timezone
<input type="month"> -month selection
<input type="week"> - week selection
<input type="date"> - date picker
<input type="time"> - time input
<input type="email"> - email input
<input type="file"> - defines a file-select field and a "Browse" button for file uploads.
<input type="hidden"> - defines a hidden input field (not visible to a user). A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record that needs to be updated when the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!


<input type="image"> - image input
<input type="number"> - numeric input/selection
<input type="password"> - password input
<input type="radio"> - radio button
<input type="range"> - defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes
<input type="reset"> - reset button
<input type="search"> - search input
<input type="submit"> - submit button
<input type="tel"> - telephone input
<input type="text"> - text input
<input type="url"> - url input


Input Attributes

value - starting value for the input
readonly - specifies that a field is read-only
disabled - specifies that the input should be disabled
size - specifies the visible width, in characters, of an input field, and it works with the following input types: text, search, tel, url, email, and password.
maxlength - specifies the maximum number of characters allowed in an input field.
min and max attributes specify the minimum and maximum values for an input field.
multiple attribute specifies that the user is allowed to enter more than one value in an input field, and it works with the following input types: email, and file.
pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted, and it works with the following input types: text, date, search, url, tel, email, and password.
placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
required attribute specifies that an input field must be filled out before submitting the form. The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
step attribute specifies the legal number intervals for an input field. Example: if step="3", legal numbers could be -3, 0, 3, 6, etc. Tip: This attribute can be used together with the max and min attributes to create a range of legal values. The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.
autofocus attribute specifies that an input field should automatically get focus when the page loads.
height and width attributes specify the height and width of an <input type="image"> element.
list attribute refers to a <datalist> element that contains pre-defined options for an  element.
autocomplete attribute specifies whether a form or an input field should have autocomplete on or off. Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values. The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.


CSS


What is CSS? Cascading Style Sheets - it describes how HTML is displayed.
What is a CSS selector? How do you use the ID selector? The class selector?

A CSS selector tells the browser which element should be handled. An ID selector is determined by putting an octothorpe in front of the id name at the beginning of CSS code block, whereas a class selector has no octothorpe.


What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?

External - one file that controls the look for an entire website;
Internal - in the actual HTML doc; helpful if one page has a unique style compared to others; If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used, so placement matters
inline - style applied to a single element by using the style attribute; mixes style with content; has highest priority


What is the Box Model? Describe each component of the Box Model.

All HTML elements can be considered as boxes. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
the different parts:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent


SQL

Jumpstart Lab Tutorial


What is a database?

a means of storing, fetching, calculating, and sorting data


What is SQL?

structured query language


What is SQLite3?

a SQL-based database built-into macOS


What is a Table?

rows and columns that contain data, each row is a record


What is a primary key?

A constraint that uniquely identifies each record in a database table


What is a foreign key?

A constraint that is a key used to link two tables together


Explain what each of the following SQL commands do:

insert -

INSERT INTO Inserts new rows in a table
INSERT INTO SELECT Copies data from one table into another table


select - extracts all of the contents of a table
where - filters a result set to include only records that fulfill a specified condition
order by - sorts the result set in ascending or descending order
inner join - returns rows that have matching values in both tables


PG Exercises


How can you limit which columns you select from a table? with a comma-delimited list of column names specified to the select statement (after SELECT, before FROM)
How can you limit which rows you select from a table? SELECT <> FROM <> WHERE <condition>
How can you give a selected column a different name in your output?  SELECT column-name [ AS ] alias
How can you sort your output from a SQL statement?

SELECT * FROM table_name ORDER BY column_name ASC|DESC
//Where 
table_name: name of the table.
column_name: name of the column according to which the data is needed to be arranged.
ASC: to sort the data in ascending order.
DESC: to sort the data in descending order.
| : use either ASC or DESC to sort in ascending or descending order//


What is joining? When do you need to join? combines tables based on a given expression
What is an aggregate function? it performs a calculation on a set of values, and returns a single value
List three aggregate functions and what they do.
COUNT counts how many rows are in a particular column.
SUM adds together all the values in a particular column.
MIN and MAX return the lowest and highest values in a particular column, respectively.
AVG calculates the average of a group of selected values.
What does the group statement do? allows you to separate data into groups, which can be aggregated independently of one another
How does the group statement relate to aggregates? other functions aggregate across an entire table, whereas group lets you aggregate across only part of a table

Rails Tutorial: Task Manager

Copy and Paste the link to your Task Manager repo here:
https://github.com/brennacodes/task_manager_rails
Copy and Paste the link to your Static Challenge here:
https://github.com/brennacodes/static_challenges

Define CRUD. Create, Read, Update, Delete
Define MVC. Model (interacts with database), View (renders data for front end user), Controller (decides how to manipulate data between the model and the view)
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. routes.rb, tasks_controller.rb, task_index.rb
What are params? Where do they come from? Parameters. They are pieces of resource data sent as a hash with HTTP request methods.
Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task? The process by which a new item is created vs edited is different. One sends a PUT request and the other is a PATCH request. On the database end, one doesn't need to "find" or locate an existing database object to modify if you are creating something new, whereas if you wanted to edit something, you would need to locate the object in order to retreive/modify/update it.