Skip to content

Instantly share code, notes, and snippets.

@fentontaylor

fentontaylor/mod_2_intermission.md

Last active August 10, 2019 22:06
Show Gist options
  • Save fentontaylor/e6c4abc6c54f5bff97bf6931e9272e07 to your computer and use it in GitHub Desktop.
Save fentontaylor/e6c4abc6c54f5bff97bf6931e9272e07 to your computer and use it in GitHub Desktop.
Download ZIP
CFU for Mod 2 Intermission Work
Raw
mod_2_intermission.md

B2 Intermission Work

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

HTML

  1. What is HTML?
    Hypertext Markup Language: A series of elements represented by tags that tell the browser how to represent the contents.
  2. What is an HTML element?
    Answer: A piece of of the page with a start and end tag. Elements include: body, headings, paragraphs, images, line breaks, etc.
  3. What is an HTML attribute?
    Answer: An attribute, located in the start tag of an element, provides additional information about the element such as style, size, image source, etc.
  4. What is the difference between a class and an id? When would you use one vs. the other?
    Answer: Classes can be used by multiple elements, but ids are unique to that element. If I wanted to style different headers h1, h2, h3, etc. the same way, I would use a class. If I wanted to be sure that the styling was only for that partucular element, I would use an id.
  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 action="/action_page.php">
  Name:<br>
  <input type="text" name="firstname">
  <br>
  Age:<br>
  <input type="text" name="lastname">
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>
  1. What are semantic tags? When would you use them over a div?
    Answer: Semantic tags are new elements in HTML5. Previously, developers used div with styling for almost everything, but that made it impossible for search engines to identify the correct webpage content.
  2. Explain what each of the following HTML tags do and when you would use them:
  • <h1>, <h2>, etc.
    • Headers, 1-6, in descending order of importance.
  • <p>
    • Paragraphs, plain text on the page/
  • <body>
    • The part of the webpage that is displayed
  • <a> and the href attribute
    • Links, href is the url or path to the page
  • <img> and the src attribute
    • Images, src is the url or path to the image
  • <div>
    • A container that takes up maximum width of the page. Can contain other elements: headings, paragraphs, images, etc.
  • <section>
    • For a thematic grouping of content, usually with a heading: intro, content, contact info
  • <ul>, <ol>, and <li>
    • Unordered list, ordered list, and list item, respectively. Unordered lists use bullet points, ordered lists use numbers or letters.
  • <form>
    • To take user input by text, radio buttons, etc.
  • <input>
    • User input to be processed by the server.

CSS

  1. What is CSS?
    Answer: Cascading Style Sheets. Used to put styling code in a different file from the html content to simplify design.
  2. What is a CSS selector? How do you use the ID selector? The class selector?
    Answer: Selector is the element that will be affected by the styling.
  • The element selector will affect ALL elements of that type: p { /* styling */ } affects all <p> elements.
  • The ID selector will affect only one element where the id is declared: #para1 { /* styling */ } will only affect <p id="para1">.
  • Class selector can work for multiple types of elements and multiple instances of that element where class is declared: .center { /* styling */ } will affect any element with class="center".
  1. What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
  • Inline Styling <p style="styling">
    • Pro: Can overwrite previous styling
    • Con: Messy
  • Styling in Header (Internal)
    • Pro: All styling in one place
    • Con: HTML doc can get long
  • Styling in Separate Stylesheet (External)
    • Pro: Clean HTML doc
    • Con: Can be confusing if using multiple stylesheets.
  1. What is the Box Model? Describe each component of the Box Model.
  • Margin: Area outside the border, transparent
  • Border: Border that goes around padding and content
  • Padding: Area between border and content, like a margin, transparent
  • Content: Text, images, etc.

SQL

Jumpstart Lab Tutorial

  1. What is a database?
    Data organized in tables.
  2. What is SQL?
    Structured Query Language. A way of selecting, adding, deleting, updating, calculating data in a database.
  3. What is SQLite3?
    A light version of a database querying language, great for learning and experimenting, but not for production.
  4. What is a Table?
    A set of rows and columns, rows for observations, columns for variable names.
  5. What is a primary key?
    A unique identifier for a row of data.
  6. What is a foreign key?
    A reference to a primary key in another table.
  7. Explain what each of the following SQL commands do:
  • insert: add a row of data
  • select: pick a subset of data
  • where: gives criteria of variable qualities to query
  • order by: sort data, DESC for descending order
  • inner join: A way to combine data from multiple tables where keys match

PG Exercises

  1. How can you limit which columns you select from a table?
    Give the names of the columns you want to select from that table.
  2. How can you limit which rows you select from a table?
    Use the keyword WHERE to select only the rows that meet those criteria
  3. How can you give a selected column a different name in your output?
    Use the key words AS: SELECT memid as member_id
  4. How can you sort your output from a SQL statement?
    Use keywords ORDER BY and give the column to sort by, use DESC for descending order.
  5. What is joining? When do you need to join?
    Joining combines tables that share at least one unique identifier. Joining is necessary when the data we need is in multiple tables.
  6. What is an aggregate function?
    An aggregate function compute a single result from a set of input values.
  7. List three aggregate functions and what they do.
    COUNT() counts the number of records in the selection
    MAX() finds the maximum value in the selection
    SUM() computes the sum of the selection
  8. What does the group statement do? GROUP BY groups the selection according to the values of the given column
  9. How does the group statement relate to aggregates? GROUP BY is often used in conjunction with aggregates to compute aggregates for each group, instead of for a total aggregate

Rails Tutorial: Task Manager

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

  1. Define CRUD.
    Create, Read, Update, Delete: The four basic functions that models should do.
  2. Define MVC.
    Model, View, Controller: A design pattern that dictates each of these three pieces of functionality be different objects. User input goes to controller, controller passes info/actions to model, model does the action and passes output to view, view shows output to user.
  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.
    app/views/whatever_the_task_is.html.erb : user input, model output view config/routes.rb : Tell app what page to load app/controllers/task_controller.rb : Define how to interact with the model
  4. What are params? Where do they come from?
    Params are the values from a form submission. They are stored in a hash with the keys being the names of the field we defined, and the values being the user input.
  5. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task? Creating a new task uses the HTTP action POST to create a new id in the database, whereas editing a task uses PATCH to modify an existing id.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment