B2 Intermission Work

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

HTML

What is HTML?

It is the standard 'language' for websites
What is an HTML element?

It is essentially what tells the website how a specific piece of information will be displayed. If it's a 'body' element, that tells the webpage the information to follow is meant to be put in the pages' body space. It is everything between the '<..>' and '</..>'.
What is an HTML attribute?

An attribute is like defining something special about a specific element. For example, the '' attribute is meant to notify the webpage that what follows is an image I want to display, it will then put where that image can be found (after src=). One can have width and height attributes, alternate text (which increases accessibility), etc.
What is the difference between a class and an id? When would you use one vs. the other?

Using either a class or ID allows one to define an element's behavior or attributes. One can only have one element which uses a specific ID, whereas multiple HTML elements can share one class. An example of a class would be a specific style for a title; you'd want several titles to share this attribute. An example of an ID would be using a specific style for one image on your homepage.
What HTML would you write to create a form for a new dog with a "name" and an "age"?

I would do the following...

<html>
  <body>
   <form>
     <h1>New Dog</h1>
      <label for="name">Name:</label><br>
      <label for="age">Age:</label>
   </form>
  </body>
 </html>

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

One would use a semantic tag when one wants to convey meaning to the browser and/or developer. Another reason to use semantic tags is to communicate to someone using a text reader. A 'div' attribute doesn't convey any meaning of the content inside of it. For example, I can use the semantic tag OR 'div' to build a navigation bar, but only
will convey meaning to the browser that what is inside those attributes are navigational links/tools.
Explain what each of the following HTML tags do and when you would use them:

<h1>, <h2>, etc.

This is the heading attribute. Meant not to make a text more bold or loud, but to denonte a heading. It's important to use because that's how search engines structure the web pages
<p>

**This attribute tells the web page that what follows is a paragrah (usually filled with text).
<body>

The 'body' attribute shows the webpage where the 'meat' of the website is. We'll put text, images, tables, links, etc. inside the 'body' attribute.
<a> and the href attribute

The 'a' attribute is a hyperlink and the 'href' tells the webpage where to find the link of that attribute.
<img> and the src attribute

The 'img' attribute tells the webpage that what follows is meant to be a displayed image, and the 'src' is where the source of the image can be found.
<div>

The 'div' element is something that will span the entire width of whatever it is in. If it's inside a table, it'll span to the entire width of the table. If it's just floating on the webpage, it'll span the entire width of the window.
<section>

**This defines a separate seciton inside a webpage. It let's the web browser know that there are different sections of the webpage.
<ul>, <ol>, and <li>

The 'ul' means an 'unordered list'-- a list without numbers. Whereas the 'ol' means an ordered list. The 'li' is what one must put underneath their 'ol' or 'ul' to show the 'listed item'-- it's the actual content of the list.
<form>

This is used to create a method for a user to input some data. It appears as a box (often with a title) for the user to enter their name, age, height, or really any information they please.
<input>

**This attribute is used to style the type of user input one wants. Want them to type in their name? Use type="text". Want them to select 'yes' or 'no'? Use type="radio".

CSS

What is CSS?

CSS Stands for Cascading Style Sheets. CSS is a way to style one's webpages. One could use HTML to style their webpages but it would take much more time, CSS saves time and space.
What is a CSS selector? How do you use the ID selector? The class selector?

**A CSS selector is something you use to indicate in CSS what element(s) you want to have the specified attributes. It's a way to tell CSS where to apply specific styling. For example, the ID selector allows you to use a blanket statement and apply the specified characteristics to all elements with the specified ID. Whereas a class selector applies it to everything within a specific class (like all tables, text boxes, buttons, etc.).
What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?

The first way to include CSS is to use an external file. The pro's with using this technique is that all of your CSS for that specific webpage is confined in one file, keeps things a bit organized. A con to using this technique is that if you're to change that CSS file, you change ALL files with that inclusion, it's not too customizable when compared to webpages within a website.

A second way to include CSS is called 'internal', which is essentially just typing CSS into your HTML files. The pro of this is it allows a lot of customization but the obvious con is it introduces A LOT more code, so your code isn't as clean anymore. You also put yourself at higher risk of repeating yourself.

The last way to include CSS into an HTML file is by using inline CSS. This has the same pro's and con's as using internal. Another con is that if you have any inline CSS code, that code will take precendence over any other CSS (like an external file). So, if you wanted to change the style to that particular element, you'd have to find it first.
What is the Box Model? Describe each component of the Box Model.

The box model is a principle of CSS and HTML design that guides one into imagining how to style any particular part of a webpage. The idea is that you've got your content (text, image, etc.), and that is wrapped in what's called 'padding', or the first border between your content and other styling design in your 'box'. Next is the border, which goes around the padding. This could be an actual border (like a line around a box, dotted lines, or a shadow), or no border at all. The last part is the margin, which is the space between that particular box and anything else (like the edge of a table, the edge of the window/webpage, another iamge/text-box, etc.).

SQL

Jumpstart Lab Tutorial

What is a database?

A database is a place where structured information (data) is held. It's often held in the format of rows and columns, and it's where information is retrieved.
What is SQL?

SQL's are how we interact with databases. We need an intermediary between a database and our local computer, that intermediary is SQL (structured query language).
What is SQLite3?

SQLite is a way to access and manipulate databases
What is a Table?

A table is a way to represent the data. Often a table will have a top row indicating what values to expect in the coming rows. Things such as; name, id number, height, etc. can be found in the top row of a table. The following rows will all be instances of whatever information one is storing, with that instances specific information according to the top row of the table.
What is a primary key?

This is a feature that when a new instance (or row) is inserted into the table, the program will automatically assign a unique ID number to it.
What is a foreign key?

When we have multiple tables where we want to keep track of different things, we'll use foreign keys. For example, if I wanted to create a table of students in a school, where I record their grade level, age, and last name, I'd have one table that does all of that. Then, in a separate table, I want to keep track of all students who show up for a particular event and spend money. I won't duplicate the students information from the original table, instead, I'll use a foreign key that references the actual student info in the first table.
Explain what each of the following SQL commands do:

insert

This will insert information (like a row) into a table we tell it.
select

This will search for what you input after the 'select'. In our example, we used the symbol * to tell the program to look for ALL rows in this table (display all rows).
where

This is much like the 'find' or 'select' method in Ruby; it'll find you whatever 'argument' you pass to it.
order by

This is much like the 'sort_by' method in Ruby, it'll sort the elements according to the argument you pass to it.
inner join

Any 'join' command is used to combine information of rows from 2 or more tables based on a related column between the 2. We can have 'inner join', which means to return records that have matching values in both tables. Or 'outer join', which, depending on which side you indicate, will return all records from one side (let's say the left), and only the records on match with those left, from the right.

PG Exercises

How can you limit which columns you select from a table?

You limit what columns you select from by commanding what columns you'd like to retrieve. The symbol star symbol is an argument, but it says 'grab all'. To select only the 'names' column, you'd put SELECT ____.names FROM ____.
How can you limit which rows you select from a table?

By passing an argument of which row(s) you'd like. For example, SELECT * from _____ WHERE ______;. The 'WHERE' is your argument, and after that you put what row(s) you'd like. Names with a length of 5 characters or less, ID numbers above 10, etc.
How can you give a selected column a different name in your output?

You can use a case statment and after the 'end' you put a 'as' statment then the name of the column you'd like to display.
How can you sort your output from a SQL statement?

I'm sure there are several ways, but one of the ways we've learned is to use the operator 'like'. One can use something like SELECT * FROM table_name WHERE column LIKE '%g%'; This would choose all rows whose 'column' column has a 'g' in it.
What is joining? When do you need to join?

Joining is when you compare 2 or more tables. You'd need to do that a lot, but perhaps one table doesn't have a specific identifier that the first table does have. For example, if one table I need to use has customer ID's on it but another one has the amount the customers have spent, I'd need to join the 2 to use the customer's ID's in the first, and the amount customers have spent in the other.
What is an aggregate function?

An aggregate function is a function that calculates just one value from the array of values in question. Some examples in SQL are; SUM, AVG, MIN, MAX, COUNT.
List three aggregate functions and what they do.

There is; SUM (which computes the sum of the values in an array of numbers), MAX (which figures the highest value in an array of values, also works with dates), and COUNT (calculates the number of values in an attribute).
What does the group statement do?

Group by takes all of the elements in a specific column, combines the duplicates, then outputs the result.
How does the group statement relate to aggregates?

We can use 'group' and MAX in order to produce a maximum value for each unique element.

Rails Tutorial: Task Manager

Copy and Paste the link to your Task Manager repo here:
https://github.com/TravisGM92/task_manager_rails

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

Define CRUD.

CRUD is an acronym that stands for Create, Read, Update and Delete. These 4 words refer to the major commands used in SQL, or any relational database.C stands for create and that uses the command 'insert' in SQL, R stands for read and that uses the command 'select', U stands for update and it uses the command 'update', and lastly, D stands for delete or destroy and it uses the command 'delete'.
Define MVC.

MVC is an acronym that stands for model-view-controller. It's a model that is used to explain and understand how applications, such as (but not exclusive to) Ruby. It's the idea that an application or program should divide into 3 major components, the model, view and the controller. The model layer is where the 'work' happens, it's where data and logic are both stored and manipulated, it's the 'behind-the-scenes' part, or the cooks in a restaurant.

The view is where users interaction come into play. The users never directly interact with the model or controller, just the view.

The controller is what handles the interactions between the view and model. The controller will send data to the view layer for the customer to see. It'll also take 'requests' from the user and send a request for information from the model, before sending it to the view layer.

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.

First we'd need to update the routes file to include /tasks, then we need to add tasks to the controller, and finally add some kind of code to our view so that the user can see it.
What are params? Where do they come from?

The params in our new app include user input. When we put something in the top and bottom text boxes and hit submit, Rails takes that information and makes a hash with it. One key of this hash is an 'authenticity token', and the value of this is a string of numbers and letters. The second key/value pair has a 'task' as a key and the value is what we put in as 'title' and what we put in as 'description; the top and bottom boxes.
Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?

We need to tell Ruby where to get the input and where to send the user once they hit a specific button. When they hit the edit button, we expect that button to be hit in the tasks/:id/edit. We will then send the user to 'tasks#edit', which is a method we defined in the task controller class.

TravisGM92/Mod_2_intermission_work.md

B2 Intermission Work

HTML

CSS

SQL

Jumpstart Lab Tutorial

PG Exercises

Rails Tutorial: Task Manager