Skip to content

Instantly share code, notes, and snippets.

@StarPerfect
Last active August 11, 2019 15:11
Show Gist options
  • Save StarPerfect/a991fe4324fbd0b2c76c6c031a1710ec to your computer and use it in GitHub Desktop.
Save StarPerfect/a991fe4324fbd0b2c76c6c031a1710ec to your computer and use it in GitHub Desktop.
1906 BE Mod 2 Intermission/Pre-Work

B2 Intermission Work

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

HTML

  1. What is HTML? Hyper Text Markup Language

  2. What is an HTML element? tags that tell the browswer how to display content, everything from the start tag to the end tag

  3. What is an HTML attribute? pieces of code added to a tag to provide additional info about the element, attributes are always specified in the start tag, usually come in name/value pairs

  4. What is the difference between a class and an id? When would you use one vs. the other? When you want to apply the same styling to multiple elements, you give them the same class, class names are case sensitive, JavaScript can also call the elements of the same class. ID attribute gives a unique ID for a particular element in the HTML document. An ID is only allowed to be given to one single element, cannot be shared across multiple elements like Class can. ID's are useful to create bookmarks in a long document so you can have links that will jump around to different sections of your page. Class is used to apply the same styling across the document.

  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" name="age"> </form>

  6. What are semantic tags? When would you use them over a div? elements with meaning, div and span don't tell the browser or developer much about the element while form, table or article all having meaning so you'd use a semantic tag when you want to clearly convey the meaning

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

  • <h1>, <h2>, etc. header - when you want to make a larger sized text like the header or title of your page/doc
  • <p> paragraph - when you want to start a new paragraph of text
  • <body> this is the tag that differentiates the heading lines of code from code that is for visible elements of the HTML doc, it defines the document body
  • <a> and the href attribute - this is for links, href specifies the link's destination url
  • <img> and the src attribute - img for images, src is the detailed location of the image to be displayed
  • <div> a container unit that encapsulates other page elements and divides the html document into sections, a block-level element, literally a divider to separate different areas of the document's code
  • <section> a section is a thematic grouping of content, you'd use a section for say the about me section, then a contact me section, etc
  • <ul>, <ol>, and <li> - these are lists, specifically unordered/bullet list, ordered/numbered list, and li is opening tag for each list item or element
  • <form> HTML element creates a form that is used to collect user input
  • <input> the most important form element, can be displayed several ways depending on the type attribute

CSS

  1. What is CSS? Cascading Style Sheets: a language that describes the style of an HTML document, how the HTML elements should be displayed
  2. What is a CSS selector? How do you use the ID selector? The class selector? Selectors point to the HTML element you want to style. The ID selector uses the HTML ID to style a specific element and are written with a # in front of the actual element ID. The class selector, written with a . before the class name, is used to select elements of a certain class attribute.
  3. What are the three ways to include CSS in your HTML documents? What are the pros and cons of each? You can insert a style sheet via an external style sheet, an internal style sheet, or with inline styling. External style sheets can change the look of the entire website by changing just one file. Internal style sheets are used when you have one single page with unique styling different from the rest of the website. Inline styling is used to apply unique styling just for a sinlge element within the website. The down side to inline styling mixes content with presentation and therefore loses the big advantage of having separate style sheets to keep the content and styling separate.
  4. What is the Box Model? Describe each component of the Box Model. The box model describes design and layout in CSS. It's essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. The content box is where the text and images are. Padding clears an area around the content and is transparent. The border goes around the padding and content. The margin clears the area outside the border and is also transparent. The box model essentially allows us to define spacing between elements.

SQL

Jumpstart Lab Tutorial

  1. What is a database? A means of storing, fetching, calculating, and sorting data, especially large amounts.
  2. What is SQL? Structured Query Language is a programming language used to interact with most databases.
  3. What is SQLite3? A great database system for experimenting and local development.
  4. What is a Table? a set of data elements (values) using a model of identifiable verticle columns and horizontal rows, each row being an new element or entry into the table
  5. What is a primary key? a field in a table which uniquely identifies each row/record in a database table.
  6. What is a foreign key? a column that references a column (usually the primary key) of another table, used for relationships between tables
  7. Explain what each of the following SQL commands do:
  • insert - adds new data into a table
  • select - finds the given row(s) in the table
  • where - this says what rows should get effected by the command or change, only the rows which meet the WHERE criteria
  • order by - allows you to organize or re-order the data by whatever column you provide after the ORDER BY command
  • inner join - this is used to create a new table based on data from two or more existing tables and join the selected data together

PG Exercises

  1. How can you limit which columns you select from a table? by listing the desired columns after SELECT
  2. How can you limit which rows you select from a table? by using the WHERE clause
  3. How can you give a selected column a different name in your output? you can use the AS clause which will allow you to label the column in the output
  4. How can you sort your output from a SQL statement? ORDER BY
  5. What is joining? When do you need to join? JOIN is for combining data from 2 or more tables
  6. What is an aggregate function? a function that computes a single result from multiple input rows
  7. List three aggregate functions and what they do. SUM - finds the total, MAX - finds the largest value, AVG - calculates the average value
  8. What does the group statement do? Groups rows in the table by the provided element
  9. How does the group statement relate to aggregates? Aggregates are used in conjunction with GROUP BY to find, for example, the SUM amount made each month or the total recommendations each member made. It allows the user to find aggregates for smaller collections of the data within the table.

Rails Tutorial: Task Manager

**Copy and Pase the link to your repo here: https://github.com/StarPerfect/rails_task_manager **

  1. Define CRUD: Create, Read, Update, Destroy - process or method in application design
  2. Define MVC: Model View Controller - a desigh pattern that's the basic architectural structure in which most programs are built upon
  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. update the routes.rb config file, the task_controller.rb file and the appropriate tasks view html.erb file
  4. What are params? Where do they come from? params is the basic hash element created when we create a new Task.new object. The params for our Task Manager project include the title and description of each task as well as the task id.
  5. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task? Because just creating or editing doesn't display the changes we just made. So the second route either shows the newly created task or shows the updated tasks with the edits just made.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment