B2 Intermission Work

GUIDELINES

Deliverables are due 5:00 pm the Saturday before the module begins.
This Gist will be your submission for your intermission work.
Each of the assignments includes a Check for Understanding that you must complete in your Gist.
Some of the assignments will also ask you to include a link to a GitHub repo.
Submissions will not be accepted after that time.
Prework must be completed in its entirety in order to attend class on Monday.

ACTIVITIES

Work on the following assignments in order. Ruby v2.5.3 and Rails 5.2.4.3 are required
Ruby and Rails versions installation guide
Get Module 2 Tools
Styling
Intro to SQL
Rails Tutorial: Task Manager
Submission
When you are finished, fill out this form

CHECK YOUR UNDERSTANDING

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

HTML

What is HTML?
- HTML (Hyper Text Markup Language) is the standard markup language for Web pages
What is an HTML element?
- The building blocks of HTML pages: these are represented by tags (< >)
What is an HTML attribute?
- A space to define additional information about the HTML element. These are always specified in the start tag and usually come in name/value pairs
What is the difference between a class and an id? When would you use one vs. the other?
- ID's create specific unique identifiers for an html element. Classes allow for multiple HTML elements to be associated with the identifier. From what I can see, IDs are case sensitive, are noted with an octothorp followed by your assigned identifier, and must be at least 1 character long without whitespace. Classes are denoted with a period folowed by identitier. Unsure if this follows same requirements as ID, but I would assume yes. You would use a class over an ID when multiple elements within your page will use the same attributes.

What HTML would you write to create a form for a new dog with a "name" and an "age"?

HTML Element: Forms would collect user input that you could define for "age" and "name". In this case you would most likely write something like this:

<html>
<body>
  
<form>
    <label for="name">Dog's name?</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="age">Dog's age?</label><br>
    <input type="text" id="age" name="age">
</form>
</body>
</html>```

What are semantic tags? When would you use them over a div?
- Semantic tags describe and define the element clearly and with context. Non-semantic tags don't tell you about the content. Not only does it make it easier for the human to read, it makes it easier for the "automated processing of documents", aka, if the machine understands your code better, it's going to read it faster because you've sent them information that is very clearly defined.
Explain what each of the following HTML tags do and when you would use them

TAG	UNDERSTANDING
`<h1>`, `<h2>`, etc.	Level # headings - 1 would be like a title, 2 subtitles, 3 smaller heading, 4 even smaller, etc, etc....)
`<p>`	Paragraph - the body of the text
`<body>`	The body of the html document
`<a>` and the `href` attribute	This tag represents a link, however, to make an actual link you need the href attribute, example as such <a href="https://turing.io">Link</a>
`<img>` and the `src` attribute	This tag represents an image, however, to put an image you need the src attribute, example as such <img src="https://upload.wikimedia.org/wikipedia/commons/a/a1/Alan_Turing_Aged_16.jpg">
`<div>`	This is one of the generic container tags in html. It can create dividers and can be used in place of semantic tags with more details added.
`<section>`	The section tag breaks up a page into "sections" so you can group content together (typically related to a certain theme).
`<ul>`, `<ol>`, and `<li>`	These tags all fall into the lists category. You would begin with either ul or ol which represent unordered (bullets) and ordered (numbered) lists. Inside the ul/ol you would use li around each actual list item. Example would look like (except with new lines) <ol> <li>Mod 1</li> <li>Mod 2</li> <li>Mod 3</li> <li>Mod 4</li> <li>Success</li> </ol>
`<form>`	Creates a custom form that takes user input.
`<input>`	This can be used in a variety of places, but it takes input information. This allows for use of interactive conrols as you accept data from a user.

HTML Activities

CSS

What is CSS?
- CSS, or Cascading Style Sheets, are used to describe HTML elements and how they ar displayed and used. The benefit of CSS versus basic HTML elements is that using CSS is quicker and user friendly because it controls the layout of multiple elements at once.
What is a CSS selector? How do you use the ID selector? The class selector?
- CSS selectors ar like queries or search toold. They allow us to select HTML elements that we want to style. The simple selectors, ID and class, will select elements based off of the ID or Class, respectively. The ID selector will use the id attribute of of an HTML element, which is defined within the page, and assign styles. The syntax for these is #ID { style }. For the class selector, this selects elements based off the class attribute. The syntax for these is .Class { style }.
What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
1. Interal CSS
  - This method (also called Embedded CSS) requires you to add the style tag in the head section of your html document. You include all the style at the beginning for the page.
  - PROS: Great for styling single pages; You can use class/id selectors; You don't need to upload multiple files
  - CONS: Not ideal for multiple pages since you need to put the CSS rules on every page of the website; Increases page size; Increases loading time
2. External CSS
  - This method lets you link external .css files
  - PROS: Effective for large websites because you only need to edit the .css file to change the style of the entire site; Cleaner and smaller HTML files/pages; You can use the .css file for multiple pages (or even other projects)
  - CONS: Your webpage may not load correctly until the .css file loads; linking to .css files can increas sites download time
3. Inline CSS
  - This method lets you style an HTML element directly - it does NOT use selectors
  - PROS: Useful when you don't have access to the .css file or need to apply styles only to a single element; Quickly add CSS rules - great for testing/previewing/quick-fixes; You don't need to upload seperate files
  - CONS: Not recommended for entire page or website styling; Time consuming and messy code; Large page sizes and increased download times
What is the Box Model? Describe each component of the Box Model.
- Essentially a box that wraps around every HTML element; It allows us to add a border around elements and define the size of the space between elements
- Parts
  1. Margin - Creates a transparent area outside the border
  2. Border - Visible (I believe can be set transparent) border that goes around the padding/content
  3. Padding - Creates a transparent area around content
  4. Content - Text and images appear

CSS Activities

Static Challenge

Fork/Clone Repo
Pick a challenge #1
Complete challenge: Add HTML to index.html; Add CSS to stylesheets/main.css; Timebox = 2hours
- Repo
If time - complete another challenge

SQL

Jumpstart Lab Tutorial

Work through the Jumpstart Lab SQL Tutorial

What is a database?
- A database stores data so you can access, store, sort, fetch, calculate, etc.
What is SQL?
- A programming language used to interact with most databases
What is SQLite3?
- A database engine that is great for experiments/local development. Should NOT be used in production
What is a Table?
- A way to organize data in a row and colum format
What is a primary key?
- A unique identifier for every record in the table; cannot contain NULL values
What is a foreign key?
- A unique identifier that is used to link two tables together
Explain what each of the following SQL commands do:
- insert - inserts new data into the database
- select - extracts data from a database
- where - this clause is used to filer records; it can extract records specified by the where condition
- order by - this keyword will sort the records; default is ascending, you must use order by desc for descending
- inner join - this keyword selects records that match conditions/values from both tables. Example:

PG Exercises

Work through PG: Basics
Work through PG: Joins
Work through PG: Aggregates

How can you limit which columns you select from a table?
- There are many ways to do this, the most common is to use SELECT columnname FROM database. You can also use the WHERE statement to make conditions.
How can you limit which rows you select from a table?
- Useing the SELECT LIMIT statement you can declare the number of rows returned
How can you give a selected column a different name in your output?
- You can use the SELECT AS statement. The origin column is in the select syntax, your new name for output comes after "AS"
How can you sort your output from a SQL statement?
- You can use statements like Order By or Order By Desc
What is joining? When do you need to join?
- This is a clause function that allows us to combine rows from two or more tables based on relationships between their columns; This allows us to create new output tables that are combined data from various databases
What is an aggregate function?
- Agg functions perform calculations and returns values
List three aggregate functions and what they do.
- MAX/MIN. - returns highest/lowest values from column
- COUNT - returns number of rows in column
- SUM - adds all values in column
- AVG - calcs average of values in column/group
What does the group statement do?
- This groups rows that have the same values into "summary rows" - aka based on what you have stated as condition, this will return the number of repeated instances of the condition
How does the group statement relate to aggregates?
- These are often used together to sort or use output data, for example, calculating the number of repeated countries in a database and then ordering it by count number

Rails Tutorial: Task Manager

Copy and Paste the link to your Task Manager repo here: Task Manager
Copy and Paste the link to your Static Challenge here: Static Repo

Define CRUD.
- CRUD, Create, Read, Update, and Delete are tehe four basic types of functionality we want our models to provide.
Define MVC.
- MVC, Model, View, Controller, is a acronym for a popular way to organize your code
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.
- The 'GET' request will be in a config/routes.rb file
- The behavior would be a new definition in app/controllers/tasks_controller.rb
- Finally, you would need a view file, under apps/views/tasks/FILENAME.html.erb
What are params? Where do they come from?
- Params are parametric methods that can use querys, submit forms, or use the URL itself; they come from ActionController:Bases - aka they return an ActionController::Parameter object that behaves like a hash in practice
Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
- Because we have to think about the path that this information takes. To create a new task, we can "get" the user info, but where does it save? How does the app save the new task and display it for the user? Hence the second route that is needed for new: where will it save the info for display. Same with the route for Editing. You can edit, however, will it display the new updates, or truly, save the new updates? This is why these task behaviors needed two routes, to store/save/etc the information for use or user display.

priyapower/be_Mod2_Intermission_Work.md