Skip to content

Instantly share code, notes, and snippets.

@Shock253
Last active March 15, 2020 22:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Shock253/61337c54d1b6cf2c8ef186fe66be63c6 to your computer and use it in GitHub Desktop.
Save Shock253/61337c54d1b6cf2c8ef186fe66be63c6 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 stands for "hyper text markup language" , and defines formatting for displaying fonts, color and positioning of text/elements on a page

  1. What is an HTML element?

a component of html files with either starting and ending tags or just the starting tag (an "empty" element)

  1. What is an HTML attribute?

attributes are pieces of information attached to their respective elements. The attributes are specified in the opening tag of the element, in the form name="value".

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

Both are used to define traits for elements, but classes select multiple elements, whereas ids are unique to their element. A class would be used to format all elements of a similar type, while ids could be used to jump to certain elements in the document or create specific behavior for one element.

  1. What HTML would you write to create a form for a new dog with a "name" and an "age"?
<form>
  <label for="name">dog name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="age">dog age:</label><br>
  <input type="text" id="age" name="age">
</form>
  1. What are semantic tags? When would you use them over a div?

Semantic tags are more specific about what they contain, and they make it easier to translate into different contexts. If the type of information that I want to contain can be defined in any of the ways that semantic tags are available for, good practice is to use the semantic tag.

  1. Explain what each of the following HTML tags do and when you would use them:
  • <h1>, <h2>, etc.

    The heading tag, which creates a title-like block of text, with it's size based on the number following the h, decreasing in size from 1-6

  • <p>

    The paragraph tag, which is used to create paragraphs of text that are divided from the rest of the html file

  • <body>

    The body tag defines the main document body, and the attributes on this tag can be used to alter things like the background color.

  • <a> and the href attribute

    The a tag is a hyperlink tag, which defines the contained text to link to the web address defined by the href attribute when the text is clicked.

  • <img> and the src attribute

    The img tag is used to imbed an image into a webpage, and the src points to the web address that the image is located at.

  • <div>

    The div tag is used to create an element that is displayed as a block, and can contain other elements.

  • <section>

    The section tag is a semantic tag, similar to the div tag, and usually has a grouping of headers and related content.

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

    These tags stand for "unordered list", "ordered list", and "list item". They are used for creating bulleted and numbered lists in blocks.

  • <form>

    The form tag defines a form for user input, for things like adding new items to a database

  • <input>

    The input element defines an element that the user can use to provide input, like a radio button, checkbox, or text input

CSS

  1. What is CSS?

CSS defines a consistent display style for html elements, and can be used across multiple websites.

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

CSS selectors are used to target and apply formatting to elements. The id selector uses the element id (ie. #para1) to find it's element, while the class selector uses the element classes (ie. .titletext) to find all elements with that class.

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

CSS can be implemented in three ways: Internal, External, and Inline.

Internal CSS is done by putting the <style> tag in the actual html document, and within that tag defining the styling for the webpage. You'll only need to upload and download one file, but it'll increase the page's size and loading time.

External CSS is created by making a file with the extension .css, and adding a reference to it in your html document. It's useful for applying the same styling to multiple pages, and your files will be cleaner and smaller. However, if the files don't load, your webpage won't display properly, and it can get slow if you're loading multiple css files at once.

Inline CSS is implemented by adding the style tag to each individual element. Obviously, this would take a very long time, but in certain situations it can be useful, like when you only need to apply styling to a single individual element.

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

The box model is a way to describe the form that elements take on when they are displayed. It consists of four elements: content, padding, border, and margin.

  • The content is the actual text, image, etc. that is contained in the element.

  • The padding is the transparent area around the content to give it space

  • The border is an area around the padding (like a line box around text)

  • The margin defines the minimum space between this element and the other elements around it

SQL

Jumpstart Lab Tutorial

  1. What is a database?

Databases are at the core of almost every web application. They are our means of storing, fetching, calculating, and sorting data.

  1. What is SQL?

SQL stands for structured query language, which we use to interact with a database.

  1. What is SQLite3?

SQLite3 is an SQL that stores its data in a plain-text format, which makes it useful for experimentation and local development

  1. What is a Table?

A storage structure for data with named columns and rows for each element (or set of related data)

  1. What is a primary key?

Essentially an id that is associated with a particular object in the table

  1. What is a foreign key?

A foreign key is a field (or collection of fields) in one table that refers to the primary key in another table

  1. Explain what each of the following SQL commands do:
  • insert

    Adds the given data to a table

  • select

    Finds data based on given parameters (ie. name, id, ect.)

  • where

    WHERE limits the returned rows from select to only those with the specified attribute matching.

  • order by

    Sorts the returned data by a parameter (ie. alphabetically by name)

  • inner join

    Combines the data from two different tables into one table

PG Exercises

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

use the SELECT command with the parameters for the table columns, like so:

SELECT name, membercost FROM cd.facilities

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

use the FROM clause in the selection, like so:

SELECT * FROM cd.facilities WHERE membercost > 0

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

Use the AS clause in the select command, like so:

SELECT fruitid AS id FROM fruits

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

Use the ORDER BY clause and passing in a sorting parameter, like "name" for sorting alphabetically by name

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

Joining gives you a new table with combined data from two other tables, which for example can be used to replace ids with readable names, or associating scores with futbol teams

  1. What is an aggregate function?

A function that preforms a calculation on a set of values and then returns a single value.

  1. List three aggregate functions and what they do.
  • MIN – gets the minimum value in a set of values.
  • MAX – gets the maximum value in a set of values.
  • SUM – calculates the sum of values.
  1. What does the group statement do?

The GROUP statement will take a column and collapse the rows by the unique values, and associate them with values from other sources, like an aggregate function

  1. How does the group statement relate to aggregates?

Often the GROUP BY function will work with aggregate functions to group the result-set by one or more columns.

Rails Tutorial: Task Manager

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

Copy and Paste the link to your Static Challenge here: Static Challenge

  1. Define CRUD.

CRUD stands for four actions:

  • C - Create
  • R - Read
  • U - Update
  • D - Delete
  1. Define MVC.

MVC stands for:

  • Models - Data logic, or how the app interacts with the database
  • Views - Presentation logic, or how the app presents the data from the models
  • Controllers - Buisness logic, or Application logic, the translator between both Models and Views that handles finding and sending data
  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?

config/routes.rb

tasks_controller.rb

app/views/tasks/index.html.erb

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

params are a set of data that gets passed through an http request

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

One route is getting the info to do the action, the other is for posting the changes to the database.

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