Skip to content

Instantly share code, notes, and snippets.

@rebeckahendricks

rebeckahendricks/B2 Intermission Work.md

Last active August 21, 2022 12:54
Show Gist options
  • Save rebeckahendricks/63519b6ccc4264b862bce960e7afa766 to your computer and use it in GitHub Desktop.
Save rebeckahendricks/63519b6ccc4264b862bce960e7afa766 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?
    It is the markup language used on web pages. (Hyper Text Markup Language)
  2. What is an HTML element?
    Tells the browser how to display content. Each element labels a piece of content and has a start tag, some content, and then an end tag.
  3. What is an HTML attribute?
    All elements can have them; they provide additional information about elements. They always appear in the start tag and come in name/value pairs.
  4. What is the difference between a class and an id? When would you use one vs. the other?
    A class can apply attributes to multiple elements while an id is unique to one specific element. Use a class when you want to apply attributes (style) to across multiple elements, and use id when attributes are specific to one element. You can also use id to create bookmarks that allow readers to jump to a specific element with a link.
  5. What HTML would you write to create a form for a new dog with a "name" and an "age"?
<form>
<label for="dog_name">Name:</label><br>
<input type="text" id="dog_name" name="dog_name">
<label for="dog_age">Age:</label><br>
<input type="text" id="dog_age" name="dog_age">
</form>
  1. What are semantic tags? When would you use them over a div?
    Semantic tags clearly define their content like <form>, <table>, or <article>. From what I understand, their functionality is similar to non-semantic tags like <div> (they are just containers for code) but being descriptive is important for developer empathy.
  2. Explain what each of the following HTML tags do and when you would use them:
  • <h1>, <h2>, etc.
    ** Create a header/title for content. It creates larger or smaller text. <h1> is the largest (most important) and <h6> is the smallest.
  • <p>
    ** Contains a paragraph
  • <body>
    **A container for the body of the webpage. The majority of the content of the webpage goes within this tag (headers, paragraphs, etc.)
  • <a> and the href attribute
    **A tag for a hyperlink. The href attribute is the location of the link.
  • <img> and the src attribute
    **A tag to insert an image. The src attribute specifies the path to the source file.
  • <div>
    **Used as a container for other elements. It has no required attributes, but style, class, and id are common. (When used with CSS it can be used to style blocks of content).
  • <section>
    **Thematic grouping of content, usually with a heading. Examples are Chapters, Introduction, News Items, Contact Info, etc.
  • <ul>, <ol>, and <li>
    **<ul> is the container for an unordered list, <ol> is the container for an ordered list, and <li> is to specify list items. In an unordered list, the <li> appears as bullet points, and in an ordered list, the <li> appears as numbers.
  • <form>
    **Container for different types of input elements such as text-inputs, radio buttons, checkboxes, and submit buttons.
  • <input>
    **The most-used form element, input elements that allows users to input information for submission.

CSS

  1. What is CSS?
    It is the language used for styling webpages (Cascading Style Sheets). It describes how HTML elements should be displayed and can control the layout of multiple webpages at once. External stylesheets are stored in css files; the entire style of a webpage can change just by changing one file.
  2. What is a CSS selector? How do you use the ID selector? The class selector?
    A CSS selector points to the HTML element(s) that you want to style.
    To use the ID selector:
#elementID {
 text-align: center;
 color: red;
 }

To use the class selector:

.elementClass {
 text-align: center;
 color: red;
 }
  1. What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
  • External
    Pros: Can be applied to multiple webpages, very easy to change a webpage's style sheet (with just one file)
    Cons: Works universally, applies style to all elements.
  • Internal
    Pros: Use when one webpage has a unique style, applies to the entire page
    Cons: Doesn't apply to multiple pages, would have to re-use/duplicate code if you wanted to apply the same style to multiple pages.
  • Inline
    Pros: Applies to one specific element within its attributes. Overrides internal and external style sheets.
    Cons: Code can get lengthy and repetitive if each HTML element includes inline styling. Defeats the purpose of having a style sheet.
  1. What is the Box Model? Describe each component of the Box Model.
    Every HTML element has an invisible "box" around its content with padding, a border, and a margin.
  • Content
    The inner most part of the Box Model where the text and images appear. You can define a height and width of the content box.
  • Padding
    The transparent space around the content, clears space between the content and the border.
  • Border
    The border goes around the padding and the content.
  • Margin
    The transparent space between the border and other elements.

SQL

Jumpstart Lab Tutorial

  1. What is a database?
    The means to store, sort, fetch, and calculate data.
  2. What is SQL?
    SQL stands for Structured Query Language and is the language that we use to interact with databases.
  3. What is SQLite3?
    It is a database engine that is good for experimenting and local development, but you would never use it in production.
  4. What is a Table?
    A means to store data in rows and in columns.
  5. What is a primary key?
    An ID assigned to each data entry in numerical order at its entry.
  6. What is a foreign key?
    An ID associated with each item name in a table. (i.e. 1 always refers to 'apples')
  7. Explain what each of the following SQL commands do:
  • insert - Adds a row / line of data
  • select - Scopes data / finds a particular row of data based on certain attributes
  • where - Defines the attributes of data that you're querying
  • order by - Sorts the data by whatever attribute you define
  • inner join - Combines two tables into one based on certain criteria.

PG Exercises

  1. How can you limit which columns you select from a table?
    By using SELECT and then naming which columns you want to display from the table.
  2. How can you limit which rows you select from a table?
    Use the WHERE to limit which rows you select.
  3. How can you give a selected column a different name in your output?
    Use SELECT to choose the column you want to rename, and then use AS and then name the new column.
  4. How can you sort your output from a SQL statement?
    Use ORDER BY and then the criteria / column to sort your output by.
  5. What is joining? When do you need to join?
    Joining can be performed on multiple tables, or a table can also join itself. Joining is when you line up data sets. You need to join when the data you want to display doesn't exist in a row together.
  6. What is an aggregate function?
    An aggregate function does calculations on tables and outputs a singular value.
  7. List three aggregate functions and what they do.
    COUNT() does a total of how many rows exist in the column specified.
    SUM() totals the values within the rows in the column(s) specified.
    MAX() and MIN() find the minimum or maximum values within a column.
  8. What does the group statement do?
    Batches data together in groups.
  9. How does the group statement relate to aggregates?
    Sometimes you don't want to run an aggregation function on an entire data set, so you can group data into batches and run the aggregation function on the groups of data instead.

Rails Tutorial: Task Manager

Copy and Paste the link to your Task Manager repo here: https://github.com/rebeckahendricks/task_manager Copy and Paste the link to your Static Challenge here: https://github.com/rebeckahendricks/static_challenges/tree/master/stylesheets

  1. Define CRUD.
    C: Create, R: Read, U: Upload, D: Delete
  2. Define MVC.
    Model, View, Controller
  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.
    The GET request lives in the the routes.rb file, the methods live in the app/controller file, and then the HTML is in the views directory.
  4. What are params? Where do they come from?
    params is an object that holds the data that is input through the forms.
  5. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
    Because there are two different methods used (they are two different actions).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment