Skip to content

Instantly share code, notes, and snippets.

@mcat56

mcat56/b2_intermission_work.md

Last active September 26, 2019 20:33
Show Gist options
  • Save mcat56/00558eb4752e360b357d041ef8d87419 to your computer and use it in GitHub Desktop.
Save mcat56/00558eb4752e360b357d041ef8d87419 to your computer and use it in GitHub Desktop.
Download ZIP
B2 Intermission Work
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 mark-up language for webpages. HTML stands for hyper-text markup language.

  2. What is an HTML element?

    An HTML element is everything between the start and end tag, the start and end tag's are set on either end and the content is put between. Start tags use <> while closing tags use </>.

  3. What is an HTML attribute?

    HTML attributes provide extra information about an HTML element, they are specified in the start tag. They are usually structured as a name value pair (name="value").

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

    A class is an identifier that groups styling for elements in the same class. Many elements can include the same class name, and elements can have more than one class. ID's are unique identifiers used for their specific element only, they are not used on more than one element. Each are set in the start tag of the element as id or class, and refernced in your style tags either <style> .className { styling } </style> or <style> #idName { styling } </style>

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

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

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

    Semantic tags describe their meaning to the browser and the developer (clearly defines it's content). You would use them over div when you want to be explicit about the content you are putting in or you know there will be a preset data type or structure to the section (structure a navigation list, table, headers, footers, image and caption (figure), etc).

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

  • <h1>, <h2>, etc. - Create headers, h1-h6, h1 being the most important (and largest) and h6 being the least important and smallest. They are helpful to organize the webpage and search engines use the headings to index the content.

  • <p> - The paragraph element allows for the input of text. You can style the text. Spaces and empty lines are not considered, you must explicitly call for spaces with <br> or you can use the <pre> element for text you wish to be outputted as it is entered (preserve spacing,etc)

  • <body> - The body element defines the document body. The body is contained within your tags and holds all text values in headers and paragraphs.

  • <a> and the href attribute - The element is used for inserting links. The href attribute specifies the actual link - which can be an absolute URL or a local link within that webpage - in the same folder or in a subfolder (name.asp OR /html/name.asp)

    full example : <a href="www.wikipedia.com">Wikipedia</a>

  • <img> and the src attribute - The <img element is used to insert images. The src element specifies the URL(source) of the image file. An alt attribute is also require with an image - which is alternate text that describes the image.

    full example : <img src="puppies.jpg" alt="Puppies in the Sun">

  • <div> - The div element is a block level element (always starts on a new line and takes the full width available. It is often used as a container for other elements (headings and paragraphs). It has no required attributes though style class and ID are common. It can be used to syle blocks of content. It helps compartmentalize and organize the webpage.

  • <section> - Section elements define a section of the document, it is described as a thematic grouping of content, normally with a heading. Common sections could be intro, content, and contact information.

  • <ul>, <ol>, and <li> - <li> elements are used both in <ul> and <ol>, which respectively are used for unordered and ordered lists. Unordered lists can be styled with different bullets (square, circle, etc). Ordered lists are styled with numbers, letters, or roman numerals. Lists can be nested and the <li> element is used to specify a list element (one bullet point, etc).

  • <form> - Form elements defines a form that is used to collect user input, either as text fields, checkboxes, radio buttons, submit buttons, etc. The action attribute describes what should happen with the submitted form, the target attribute specifies if the submitted result will open in a new tab/window, frame, or the current window. The method attribute will specify the http method (POST or GET - GET is default, POST is better for larger files and secure data)

  • <input> - Input elements are used inside forms to specify the type of input, etc. Common input types can be text, radio buttons, checkboxes, etc. Inputs can be text, color, email, password, nummber, range, date, time, url, etc.

CSS

  1. What is CSS?

    CSS is a languge used to describe how HTML elements should be displayed in media. Covers styling, sizing, alignment, etc.

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

    A CSS selector is used to identify the elements you want to style. The ID selector can be used to style one unique element, and is selected with #idname {styling in brackets}. The class selector selects all elements with that class name and is used with .classname = {styling here}

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

    1. External - can load the styling for the entire page in one document. Can re-use to style many pages. Must include link in head element, CSS file must be saved with .css extension. Any changes must be addressed in the CSS file.

    2. Internal CSS - include CSS code in style element in head in document. This can be used if one HTML page needs unique styling. May look better if there isn't a lot of CSS code, otherwise you will be adding a lot to the HTML file. Useful for customizing pages.

    3. Inline - Apply unique stlye for single element by adding the style attribute to the element and the pertaining code. Useful for small individual changes, but mixes content with presentation, preferred to be used sparingly.

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

    The box model is boxes that wrap around every HTML element. The actual element is the content itself, which is surrounding by a given padding, wrapped in a border, and enclosed within a margin. From the inside to outside - content, padding, border, margin. Content - content of element - where text and images appear Padding - Clears area around content (transparent) Border - Goes around padding (can be styled) Margin - Clears area outside border (transparent)

SQL

Jumpstart Lab Tutorial

  1. What is a database?

    A database is a stored collection of data. They are structured to facilitate easy and fast storage, search, retrieval, modification, and deletion of data.

  2. What is SQL?

    SQL (structured query language) is a programming language used to interact with databases. You can use this language to create, modify, and delete data within databases.

  3. What is SQLite3? s. SQLite3 is arelational database management system (free software library/embedded database engine). Specifically SQLite3 is the version (3). SQLite is best for experiments and local development, not for use in production.

  4. What is a Table?

    It is the key component of the database which holds the data. It consists of rows and columns.

  5. What is a primary key?

    The primary key is the unique identifier for every row in a table. Every table must have a primary key, no two rows have the same primary key value.

  6. What is a foreign key?

    A foreign key is a reference between two tables in a database that refers to the primary key in the "parent" or referenced table from a "child" or referencing table.

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

  • insert - adds data into a table (no output response)
  • select - finds rows in table according to the code you pass in after - returns that set of data
  • where - a way to scope your data/filter what you want by limiting your matches to the rows that match the specified conditions/attributes
  • order by - a clause you can use to sort the data so that the output is in the order you specify
  • inner join - combines data from 2 or more tables into a new table based on the criteria you specify that will connect/align it.

PG Exercises

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

    Yes you can explicitly select only the columns you want using SELECT (column) VS SELECT () ( - all columns)

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

    You can limit the rows you select based on a condition given in a WHERE clause, the LIMIT keyword also allows you to limit the amount of outputted rows you return.

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

    You can SELECT column AS name_column

    Use the AS keyword

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

    Using the ORDER BY clause (you can also do order by desc to reverse numberical/alphabetical order)

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

    Joining is creating one table from two or more other tables. You need to join when you need information that cannot be found in one table alone.

  6. What is an aggregate function?

    Aggregate functions are those that perform a calculation on a set of values to give you a single output, such as max, min, avg, sum, count, etc.

  7. List three aggregate functions and what they do.

    avg - given a numeric type input it gives the average of all the input values sum - given a numeric type input again it gives the sum of the given expression for all inputs max - evaluates the maximum value based of the given experession over all input

  8. What does the group statement do?

    The GROUP BY statement groups rows based on the given argument

  9. How does the group statement relate to aggregates?

    The GROUP BY statement is often used with aggregates to return values for subsets of data

Rails Tutorial: Task Manager

Copy and Pase the link to your repo here:

Static Challenge : https://github.com/mcat56/static_challenges

Task Manager: https://github.com/mcat56/task_manager_rails ***ON COMPLETE BRANCH - COULD NOT MERGE TO MASTER

  1. Define CRUD.

    The CRUD acronym represents create, read, update and delete - the operations you can perform on a database/resource in Rails.

  2. Define MVC.

    MVC stands for Model-View-Controller and represents the relationship between the user and the application. The controller is what knows the possible methods/paths the user can take, and gets the user selection. The controller tells the model what the user wants. The model knows how to create/render the desired output. The controller gets the output from the model and passes it to the view. The final output is the View which the user sees.

  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.

    You would need to create/modify the route.rb, the view (.html.erb) and the controller.rb

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

    Params are objects made from the information that was taken in the request (sent in through the form). They come from the form and are stored as key value pairs in a hash.

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

    One route takes in the command (the action desired) and the other sends the response command (route to action).

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