Skip to content

Instantly share code, notes, and snippets.

@tschaffer1618
Last active August 11, 2019 21:29
Show Gist options
  • Select an option

  • Save tschaffer1618/efc6f30d6805c22b2f43d60f1886e9cc to your computer and use it in GitHub Desktop.

Select an option

Save tschaffer1618/efc6f30d6805c22b2f43d60f1886e9cc to your computer and use it in GitHub Desktop.

B2 Intermission Work

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

HTML

  1. What is HTML?

    HTML (Hyper Text Markup Language) provides structure for a web page by telling the browser what content needs to be displayed.

  2. What is an HTML element?

    An element is a single component in an HTML web page. The element name is displayed in a tag like with the content in between the start tag and end tag.

  3. What is an HTML attribute?

    An attribute is an additional piece of info for an element that is specified in the start tag for that element.

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

    A class with its styles can be applied to as many elements as necessary, whereas an id with its styles can be applied to one unique element. You should use a class if a certain styling needs to be applied to multiple elements.

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

     <!DOCTYPE html>
     <html>
     <body>
    
     <h2>Dog Info</h2>
    
     <form>
         Name:<br>
         <input type="text" name="name">
         <br>
         Age:<br>
         <input type="number" name="age" min="0">
     </form>
    
     </body>
     </html>
    
  6. What are semantic tags? When would you use them over a div?

    Semantic tags are more specific element tags that indicate the purpose of a group of text/elements, as opposed to using the generic div tag. Semantic tags convey their purpose to the browser and to developers.

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

  • <h1>, <h2>, etc.

    Headers (of differing sizes): use these to break the body of the page into sections.

  • <p>

    Paragraph: use this to display a section of text.

  • <body>

    Body: all displayed elements on the web page are included in the body.

  • <a> and the href attribute

    Link: use this tag with the href attribute to include a link in the web page.

  • <img> and the src attribute

    Image: use this tag with the src attribute to display an image. Other attributes are alt, width, and height.

  • <div>

    Division: use this to group text/elements into a block that can be styled individually.

  • <section>

    Section: use this semantic element to be more descriptive than a div.

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

    List: use ul for an unordered list or ol for an order list. All elements in the list are tagged with li.

  • <form>

    Form: use a form if you need to get user input.

  • <input>

    Input: the specific element within a form to collect user input in various ways, specified by the type attribute.

CSS

  1. What is CSS?

    CSS (Cascading Style Sheets) sets the style, design, and layout for how html elements are to be displayed.

  2. What is a CSS selector? How do you use the ID selector? The class selector?

    A CSS selector indicates which html element is being styled. An ID selector starts with a # and styles a specific element with that id. A class selector starts with a . and styles all elements of that class.

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

    -External style sheet: a separate .css that is linked into the html page. An external style sheet can be reused for many html documents.

    -Internal style sheet: the css styling is grouped in a style element in the html document. An internal style sheet will apply only to the html document it is written in.

    -Inline styling: the css style attribute is used in a specific element. The inline styling will affect only the specific element it is written in.

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

    Each html element can be thought of as a box. That box has 4 parts (from inside out):

    -Content: text/image for the element

    -Padding: the space between the content and the border

    -Border: the fence for the content and padding

    -Margin: the space between the border and other elements/the sides of the page

SQL

Jumpstart Lab Tutorial

  1. What is a database?

    -A database holds all the data that programmers need to store/fetch and combine in order to perform necessary tasks.

  2. What is SQL?

    -SQL (Structured Query Language) is the way a programmer interacts with a database.

  3. What is SQLite3?

    -A version of SQL that is great for experimenting and local programming due to the accessibility of the data, but not for large-scale production.

  4. What is a Table?

    -A container for storing data in rows and columns.

  5. What is a primary key?

    -A primary key is a unique identifier for each row in a table.

  6. What is a foreign key?

    -A foreign key in a table is a reference to a primary key from a different table.

  7. Explain what each of the following SQL commands do:

  • insert

    -Insert: (INSERT INTO ) Creates a new row of data with specified values.

  • select

    -Select: (SELECT * / FROM ) Pulls all columns / specified columns with their data from the table.

  • where

    -Where: Adds a condition to pull specific data from a table.

  • order by

    -Order by: changes the order in which the data output is displayed.

  • inner join

    -Inner join: creates a new table from multiple tables that match a specified condition.

PG Exercises

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

    -Use select <columnname(s)> from <tablename> to specify which columns you want.

  2. How can you limit which rows you select from a table?

    -Use select <columnname(s)> from <tablename> where <boolean> to limit which rows are selected.

  3. How can you give a selected column a different name in your output?

    -Use as to rename a column.

  4. How can you sort your output from a SQL statement?

    -Use order by to sort results.

  5. What is joining? When do you need to join?

    -Joining is combining multiple tables into a single table. Joining is necessary when you need to combine/reference data that is in separate tables.

  6. What is an aggregate function?

    -An aggregate function combines multiple values into a single, more meaningful value.

  7. List three aggregate functions and what they do.

    -Avg: calculates the average of a group of values.

    -Min/max: finds the minimum/maximum value in a group

    -Sum: calculates the sum of a group of values.

  8. What does the group statement do?

    -The group by statement allows us to get multiple values by performing the calculation on a group at a time.

  9. How does the group statement relate to aggregates?

    -The group by statement is often used with aggregate functions to group the resulting calculation values into a column.

Rails Tutorial: Task Manager

Copy and Paste the link to your repo here:

https://github.com/tschaffer1618/task_manager_rails

  1. Define CRUD.

    -CRUD (Create, Read, Update, Delete) represents the four basic functions that models should be able to perform.

  2. Define MVC.

    -MVC (Model, View, Controller) represents the key components in the design framework. The model handles the data in the database. The view is what the user sees after a successful request. The controller handles passing the request from the user to the model and passing the data from the model back to the view.

  3. 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.

    -Create a route for the request (config/routes.rb), modify the controller to handle the request (tasks_controller.rb), and modify the actual html for the browser (tasks/index.html.erb).

  4. What are params? Where do they come from?

    -The params object is a hash of key-value pairs. This object comes from the GET request or the form data of a POST request.

  5. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?

    -We need to be able to get the new task and post the new task into the database. Similarly, we need to be able to get the edited task and patch the edited task into the existing database.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment