Skip to content

Instantly share code, notes, and snippets.

@mronauli

mronauli/b2_intermission_work.md

Last active January 25, 2020 13:43
Show Gist options
  • Save mronauli/903589088c4689cba9d28eaa0e9ac217 to your computer and use it in GitHub Desktop.
Save mronauli/903589088c4689cba9d28eaa0e9ac217 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
b2_intermission_work.md

B2 Intermission Work

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

HTML

  1. What is HTML?
  • HTML is the standard markup language for the web that allows you to create a website\
  • HTML also describes the structure of a Web page
  1. What is an HTML element?
  • elements tell the browser how to display content
  • represented by tags which identify pieces of content such as a heading, paragraph, list, etc.
  1. What is an HTML attribute?
  • attributes provide additional information about an element
  • always specified in the start tag
  • usually come in name/value pairs, e.g. name = "value"
  1. What is the difference between a class and an id? When would you use one vs. the other?
  • class - class attribute is used to define equal styles for elements with the same class name
  • id - specifies a unique id for an HTML element
  • use a class attribute for multiple elements
  • use an id attribute for unique elements, ow when you want to manipulate the text with JavaScript
  1. What HTML would you write to create a form for a new dog with a "name" and an "age"?

New Dog Information

Enter your dog's information:

Name:

Age:

  1. What are semantic tags? When would you use them over a div?
  • semantic tags clearly describes its meaning to the browser and developers
  • you would use them if you want data to be shared and reused across other applications
  1. Explain what each of the following HTML tags do and when you would use them:
  • <h1>, <h2>, etc.
    • use this when you want to create new headers and split up information logically
  • <p>
    • use this when you want to create a new paragraph and split up information logically
  • <body>
    • use this when you want to define the main content of the HTML document of the section that will be visible on your webpage
  • <a> and the href attribute
    • use and "href" in the body section and when you want an object to be created on the page and take the user to another location (not an empty element)
  • <img> and the src attribute
    • use and "src" when you when you want to insert an image into a document
  • <div>
    • use this when you want to define a division or section in a document
  • <section>
    • similar to
      use
      when you want to define a division or section in a document and integrate a screen reader
  • <ul>, <ol>, and <li>
    • ul - use for unordered list
    • ol - use for ordered list
    • li - use to define list item
  • <form>
    • use this when you want to collect user input
  • <input>
    • use this when you want to create interactive controls for web based forms in order to accept data from the user e.g. button, checkbox, etc.

CSS

  1. What is CSS?
  • a language that describes the style of an HTML document and how the HTML elements should be displayed
  • it can control the layout of multiple web pages all at once
  1. What is a CSS selector? How do you use the ID selector? The class selector?
  • a selector points to the HTML element you want to style eg. h1
  • id selector - uses id attribute of an HTML lement to select a specific element (selects one uniwue element)
  • class selector - selects HTML elements with a specific class attribute
    • use a period followed by class name eg. .center
    • can also specify that specific HTML elements should be affected by a class eg. p.center
    • can also refer to more than one class eg.

      your text here

  1. What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
    1. inline styles - use style attribute in the HTML start tag
    • pros - good for quick fixes/protyping, so you don't have to swap back and forth between the css document and HTML file
    • cons - not reusable across pages, fills up HTML space, takes bandwith
    1. embedded styles - use <style> element in the head section of a document
    • pros - same as above, but easer to cut out the final prototype and put into an external file when templates are done
    • cons - some e-mail clients do not allow styles in the head as head tags are removed by most webmail clients
    1. external style sheets - use element, pointing to an external CSS file
    • pros - easy to maintain and reuse across websites with more than one page, less bandwith/faster rendering, faster download and user experience
    • cons - removed from HTML mails, makes an extra HTTP request per file (more resources used in Firewalls/routers)
  2. What is the Box Model? Describe each component of the Box Model.
  • the box model represents each element in the HTML document in an invisible rectangular layered box. The different parts of the box are the margin, border, padding and content
    • margin - the space outside of an element
    • border - where you set the width, style and color properties
    • padding - adding space to this gives the visual effect of increasing the size of the content layer (defines all four sides of an elemnt in one declaration)
    • content - innermost box that contains the text or other elements of the target element

SQL

Jumpstart Lab Tutorial

  1. What is a database?
  • a means of storing, fetching, calculating and sorting data
  1. What is SQL?
  • a way to interact with databases
  • create, modify and delete tables
  • find existing data within tables, insert new data or change whats there
  • scope down our queries to only entries matching certain criteria by adding modifiers or calculate aggregates
  1. What is SQLite3?
  • a good place to experiment and local development
  1. What is a Table?
  • a place where data is stored
  1. What is a primary key?
  • allows database to automatically assign a unique id number to a row in the table
  1. What is a foreign key?
  • a key in a table that references a key in another table
  1. Explain what each of the following SQL commands do:
  • insert - allows you to add a new column of data into a table
  • select - allows you to find rows in the table
  • where - allows you to scope down your queries
  • order by - allows you to order your data (descending, ascending)
  • inner join - connecting tables together with they have common data

PG Exercises

  1. How can you limit which columns you select from a table?
  • use SELECT and specify which columns you want using the column name(s)
  1. How can you limit which rows you select from a table?
  • use FROM and then use WHERE to filter for rows you want
  1. How can you give a selected column a different name in your output?
  • use AS
  1. How can you sort your output from a SQL statement?
  • use ORDER BY
  1. What is joining? When do you need to join?
  • JOIN combines rows from two or more tables based on a related column between them
  • use it when you need data from more than one table
  1. What is an aggregate function?
  • it perfoms a calculation on a set of values and returns a single value
  • they ignore NULL values (except count)
  1. List three aggregate functions and what they do.
    1. COUNT - returns number of items found in a group --> returns an integer
    2. MAX - finds the highest value
    3. SUM - gets the sum of ALL values unless you specify you want the sum of unique values (DISTINCT)
  2. What does the group statement do?
  • arrange identical data into groups
  1. How does the group statement relate to aggregates?
  • the group statement is related to aggregates in that group is often used alongside aggregate functions to group the results by one or more columns

Rails Tutorial: Task Manager

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

  1. Define CRUD.
  • create, retrieve, update and delete
  1. Define MVC.
  • the basic structure where most web applications, mobile applications, and desktop programs are built on
  1. 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.
    1. route
    2. view
    3. controller
  2. What are params? Where do they come from?
  • a method to access form and URL query data
  • a series of key value pairs
  • they come from the user's browser when they request the page
  1. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
  • having two routes allows us to create new objects and return to them later if we need to update information
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment