Skip to content

Instantly share code, notes, and snippets.

@brueck1988

brueck1988/mod_2_prework.md

Last active March 20, 2021 22:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save brueck1988/0973d0f168865dd028a002832b17038a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save brueck1988/0973d0f168865dd028a002832b17038a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mod_2_prework.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 creating Web pages. HTML stands for Hyper Text Markup Language. HTML elements tell the browser how to display the content.

  2. What is an HTML element? An HTML element is defined by a start tag, some content, and an end tag. Note: Some HTML elements have no content (like the
    element). These elements are called empty elements. Empty elements do not have an end tag!

  3. What is an HTML attribute? Attributes are used to provide additional information about HTML elements. Attributes are always specified in the start tag

  4. What is the difference between a class and an id? When would you use one vs. the other? A class is used to define repetitive CSS properties. The HTML id attribute is used to specify a unique id for an HTML element, and is also used by JavaScript to access and manipulate the element with the specific id. A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page.

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

          <form>
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name"><br>
      <label for="age">Age:</label><br>
      <input type="text" id="age" name="age">
      </form>

  6. What are semantic tags? When would you use them over a div? div is a non-semantic block level element that starts a new line and takes up the full width available. Semantic tags can be used to more clearly define content.

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

  • <h1>, <h2>, etc. h1 makes a large heading. h2 makes a slightly smaller heading, etc down to h6
  • <p> Defines new paragraphs
  • <body>Defines the visible portion of the HTML document
  • <a> and the href attribute a defines links. href defines the link address.
  • <img> and the src attribute HTML images are defined with the tag. src defines the image source file.
  • <div>div is a non-semantic block level element that starts a new line and takes up the full width available.
  • <br> Defines line break
  • <hr> Defines thematic break
  • <section> Defines a section. Sections can be used to "start over" and create new headers and paragraphs etc. A section is a thematic grouping of content, typically with a heading.
  • <ul>, <ol>, and <li> ul creates unordered lists. ol creates ordered lists.
  • <form> The form element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
  • <input> The input element is the most used of the form elements. An input element can be displayed in many ways, depending on the type attribute. Some examples of these attributes include: single-line text input field, radio buttons, check boxes, and clickable buttons.

CSS

  1. What is CSS? CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files
  2. What is a CSS selector? How do you use the ID selector? The class selector? CSS selectors are used to "find" (or select) the HTML elements you want to style.
  3. What are the three ways to include CSS in your HTML documents? What are the pros and cons of each? External CSS, internal CSS, and inline CSS. With an external style sheet, you can change the look of an entire website by changing just one file! This does not allow styling to vary throughout the website where and if desired. With an internal style sheet, you can uniquily style just one page on a website! This does not allow you to change the look of an entire website by changing just one file. With an inline style sheet, you can change the styling of only one element. It would be very cumbersome to do this for every element on a website, but the inline approach gives you the flexibility to change only one element if needed. All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:
    1. Inline style (inside an HTML element)
    2. External and internal style sheets (in the head section)
    3. Browser default
  4. What is the Box Model? Describe each component of the Box Model. Content, padding, border, margin. The content is the HTML to be displayed. The padding is the area between the content and the border. The border is the border that may be defined around the content. The margin is the extra empty space that may be defined outside of the border.

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.
  2. What is SQL? Structured Query Language is how we interact with most databases. Through carefully constructed SQL instructions we can create, modify, or delete tables. We can find existing data within tables, insert new data, or change what’s there. We can add modifiers to our queries to scope them down to only entries matching certain criteria, or calculate aggregates on the fly.
  3. What is SQLite3? SQlite3 is an SQL based database system that is good for experimentation and local development, but should never be used in production
  4. What is a Table? A Table is a data set with rows of data in columns
  5. What is a primary key? A primary key is a unique identifier in a table
  6. What is a foreign key? A foreign key is when a table refers to a primary key located within another table.
  7. Explain what each of the following SQL commands do:
  • insert INSERT inserts new data into a table
  • select SELECT displays data
  • where WHERE limits the rows returned by SELECT to only those with the specified attribute matching
  • order by ORDER BY organizes the rows returned by SELECT per the specified attribute.
  • inner join INNER JOIN combines data from two different tables and makes a new table out of them.

PG Exercises

  1. How can you limit which columns you select from a table? By using "select" and "from". select column_1_name, comlumn_2_name from cd.table_name;
  2. How can you limit which rows you select from a table? By using "where" and some conditional.
  3. How can you give a selected column a different name in your output? By using "select" and "as"
  4. How can you sort your output from a SQL statement? By using "select" and "order by"
  5. What is joining? When do you need to join? Joining combines two or more tables. It allows you to create a tables that meet your needs exactly.
  6. What is an aggregate function? An aggregate function is a built in function that takes in a column of data, performs some function upon it, and outputs a scalar (single) value.
  7. List three aggregate functions and what they do. MAX--returns the maximum value in a column, MIN--returns the minimum value in a column, SUM--returns the sum of the values in a column, AVERAGE return the averageof the values in a column
  8. What does the group statement do? GROUP allows entire columns to be further reduced into only the elements that meets the specified criteria.
  9. How does the group statement relate to aggregates? If you only want to perform an aggregate function on certain elements, you can create a group and then perform the aggregate function on only that group.

Rails Tutorial: Task Manager

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

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

  1. Define CRUD. CRUD stands for "Create, Read, Update, Delete"
  2. Define MVC. Model view controller is an architectural pattern that helps create dynamic web sites by sending requests to databases and returning specific information.
  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. Tasks controller(controller), index action in the controller(route), & index.html.erb for the controller action(view).
  4. What are params? Where do they come from? Params is an object of parameters similar to a hash that we create in our app and can then access as needed.
  5. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task? For new tasks, we need one route that takes the user to a new page, and another route to actually create a new task. To edit tasks, we need one route that will get us an edit form, and one route that will update a specific task based on user input. We need a separate route for "writing" an edit and "writing" a new task, because there is already data in the task when it is being edited, so we need to use PATCH to overwrite the HTML in lieu of writing the HTML for the first time with POST.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment