Skip to content

Instantly share code, notes, and snippets.

@joshsherwood1

joshsherwood1/backend_mod_2_prework_questions.md

Last active August 11, 2019 06:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joshsherwood1/8e3d61deb03950301c6297371ce09b93 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joshsherwood1/8e3d61deb03950301c6297371ce09b93 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
backend_mod_2_prework_questions.md

B2 Intermission Work

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

HTML

  1. What is HTML?

    HTML is considered the standard markup language for creating websites

  2. What is an HTML element?

    An HTML element is everything contained within a start and end tag.

  3. What is an HTML attribute?

    Attributes are additional information provided about HTML elements, and attributes are contained in the start tag of an element. Attributes usually begin with a name/pair value, like: name="value"

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

    An HTML class is styling used for multiple elements. An ID is created just for a single elements. Therefore, if we are trying to style multiple elements, we would use a class. If we are styling one element, we can 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>
<head>
   <title>New Dog</title>
</head>
<body>

<h1>New Dog</h1>

<form>
  <b>Name:</b><br>
  <input type="text" name="firstname">
  <br>
  <b>Age:</b><br>
  <input type="text" name="lastname">
</form>

</body>
</html>

  6. What are semantic tags? When would you use them over a div?

    The div tag is very general and does not describe its content. Div is a non-semantic tag. For example, a div element can contain multiple other elements such as a header, paragraph, image, and other elements with semantic tags. Semantic tags are the opposite: they very specifically describe what kind of content the element is. We would use semantic tags when we are creating something specific that requires a semantic tag. We would use a div when dividing or defining an entire section of a webpage, which will likely contain many elements with semantic tags.

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

  • <h1>, <h2>, etc.

    These are header tags. These will output a header. h1 will output a large header and h6 will output a much smaller header. We use these tags to display headers.

  • <p>

    This is a paragraph tag. We use this to display a text paragraph.

  • <body>

    This is a body tag. We use this tag when we want everything that is contained within the tag to be displayed on the webpage.

  • <a> and the href attribute

    The a tag defines a hyperlink element. The href attribute will give the hyperlinks destination. We use these when we want to show a hyperlink on a webpage.

  • <img> and the src attribute

    The img tag defines a picture on a webpage, and the src attribute will give the source of the image so that it can be accessed/displayed on the webpage. We use img and src to display images on a webpage.

  • <div>

    A div tag defines a section of a HTML document. It is used to section of a part of an HTML document. Div tags to not convey any meaning as to the content within, as opposed to the section tag. Div is usually used for styling purposes.

  • <section>

    The section tag will also define a section of a HTML document. However, all content and elements inside should be defined as a group, such as a header, footer, etc. Section is typically used if the content of the element will be listed in the HTML document's outline.

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

    Ul and li together create an unordered list. Ol and Li together create an ordered, numbered list.

  • <form>

    The form tag is used to create a form that receives user input.

  • <input>

    The input tag is used within the form tags. Input tags specify what kind of input can be received from a user, such as text, etc.

CSS

  1. What is CSS?

    CSS stands for Cascading Style Sheets. CSS is used to show how HTML elements should be displayed in media form.

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

    CSS selectors are used to select the content that you want to style. They are used to select HTML elements based on their ids, attributes, etc.

    A CSS ID selector finds and selects specific HTML elements using the HTML ID attribute. The CSS class selector finds and selects HTML elements with a certain and specified class attribute.

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

    CSS is added to HTML documents with inline, internal, and external CSS.

    Inline CSS applies styling to a single HTML element. Inline CSS rules often overrides internal and external CSS rules, so they have priority in that sense. The drawback would be that inline CSS may override another CSS style rule that you did not intend to override. In addition, inline CSS requires a lot of code if used on a lot of elements. If multiple elements will have the same style, then perhaps internal and external CSS would be a better fit.

    Internal CSS defines the style for an entire HTML page, using style tages at the top of the HTML document. This is the preferred use of CSS if we want many or all elements of a page to be styled a certain way. Internal CSS also receives priority over any styling from external CSS. The downside would be if we wanted to use the same style on many different HTML pages, then internal CSS would not be efficient since the code would have to be reproduced for each page.

    External CSS, used in an external styple sheet, defines the style for many HTML pages (or even an entire website). This CSS is included in the head element of an HTML page, and references a separate CSS file that has the styling. External CSS is used to apply the same style to multiple HTML documents. However, external CSS receives the lowest priority and will be overridden by any internal and inline css that contradicts it. External CSS is so important to an HTML document that the HTML document may not even be visible if the external style sheet is not correct. In addition, it is not used for making specific style changes to specific elements on HTML documents

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

    The CSS box model explains the design and layout of an HTML element. There is essentially a box that contains every HTML element, and there are four layers to the box:

    • Content: This is the actual content of the html element that would be displayed to a user, such as text, images, lists, tables, etc.

    • Padding: the padding is a transparent area around each HTML element. This is used so that elements do not appear right next to each other.

    • Border: a border can make a border outside of the padding.

    • Margin: A margin serves as spacing for the border, much like the padding serves as the padding for the content.

SQL

Jumpstart Lab Tutorial

  1. What is a database?

    Databases store, fetch, calculate, and store data for websites.

  2. What is SQL?

    SQL stands for Structured Query Language and is the how we interact with a lot of databases. We can filter through information to find what we want, insert new data, or change the data that is there with SQL. SQL is a programming language.

  3. What is SQLite3?

    It is used for experimenting and developing database use for personal use, but not professional use.

  4. What is a Table?

    A table is regular table with columns and rows, that store information that we tell it to in SQL.

  5. What is a primary key?

    This is a unique id number that is assigned to each row in the table. Ids will not be repeated.

  6. What is a foreign key?

    When another table needs to reference/know data from another table, it has to know the unique ids of the data from the other table. This is called a foregin key, when another table needs to reference it.

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

  • insert

    Insert puts data into the rows/columns that we have previously made.

  • select

    Select finds rows in a table and can display those specified rows to us in terminal.

  • where

    Where returns the rows that only have the data that you specified after the where command. This is very helpful with large data sets where it may be impossible/impractical to return the whole table of information.

  • order by

    Order by will change the order to the data from the order it was inserted to the order that you want (it could be alphabetically, increasing/decreasing order of numerical data, etc.)

  • inner join

    Inner join combines tables to create a whole new table. You can specify where to join the data of both tables (for example, you can specify that the row/column of one table matches the row/column of another table, and the data tables will be merged)

PG Exercises

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

    You use select and then list the columns that you want viewed after select.

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

    After using select, we use from to select the table from which we want the rows. We can add conditions such as where and like that will return a certain selection of rows.

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

    Use as to give column a different name than it is in table.

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

    Use order by to sort results by a certain column(s)

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

    Joining combines the results of multiple tables (or even data from a single table) based on matching data from each table. We need to join if we want to output data that is contained in multiple tables

  6. What is an aggregate function?

    An aggregate function looks at a column and outputs a single value.

  7. List three aggregate functions and what they do.

    • min: outputs the minimum value from data from a table or data that is calculated from a table
    • max: outputs the maximum value from data from a table or data that is calculated from a table
    • sum: outputs the average value from data from a table or data that is calculated from a table

  8. What does the group statement do?

    Group by sorts data into groups based on specified attribute

  9. How does the group statement relate to aggregates?

    Group by allows us to get the aggregate for distinct values in specified columns.

Rails Tutorial: Task Manager

https://github.com/joshsherwood1/rails_tutorial_task_manager/tree/master/task_manager

  1. Define CRUD.

    It stands for create, read, update, and delete. These are four actions that every app should probably have.

  2. Define MVC

    It sands for Model View Controller. The controller will handle a request from a user. The view is the HTML that the user sees once the user request is processed. The model is what the data that the user has requested appears as in the application.

  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.

    • We would first have to add a route to a routes.rb file. File path: config/routes.rb
    • We would also have to add a method to the tasks_controller.rb. File path: app/controllers/tasks_controller.rb
    • We would finally have to add the html to show to the user. Example file path: app/views/welcome/index.html.erb

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

    Paramaters are essentially hashes that contain what a user has submitted in a form. Our rails app can access that information by calling on param, and then the key for the information that it needs. It appears when a user has requested something on their end on the website.

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

    Create will simply create a new task, but edit takes an existing task and lets the user keep the existing information or change it. These are two very different functions.

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