Skip to content

Instantly share code, notes, and snippets.

@jusrez

jusrez/justin_ramirez_m2_intermission_work.md

Last active July 2, 2022 16:39
Show Gist options
  • Save jusrez/3fc9a5253c4c45500e32e193f3a78038 to your computer and use it in GitHub Desktop.
Save jusrez/3fc9a5253c4c45500e32e193f3a78038 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
justin_ramirez_m2_intermission_work.md

B2 Intermission Work

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

HTML

  1. What is HTML?
  • HTML stands for "Hyper Text Markup Language". It's the language used by browsers to format and display webpages.
  1. What is an HTML element?
  • An HTML element is responsible for telling the browser how to structure and interpret a part of the HTML document based on the tag that is used. Everything between the start and the end tag is considered the element. The
    element is an example of an "empty" element and has no end tag.
  1. What is an HTML attribute?
  • An HTML attribute provides additional information about an HTML element. They are always specified in the start tag and typically come in a name/value pair (ex: name="value")
  1. What is the difference between a class and an id? When would you use one vs. the other?
  • A class can be shared by multiple HTML elements, while an id can only be used by a single element in a given HTML document. You would use a class when you want multiple elements to share the same style and you would use an id when you're working with an element you want to remain unique.
  1. What HTML would you write to create a form for a new dog with a "name" and an "age"?
  • I would use the following: <form><label for="name">Dog name:</label><br><input type="text" id="name" name="name"><br><label for="age">Dog age:</label><br><input type="text" id="age" age="age"></form>
  1. What are semantic tags? When would you use them over a div?
  • Semantic tags are elements with meaning that clearly define their content. You would use them (when possible) over a div to help partition a site more clearly and make it easy for other developers working with you understand the structure of an html document.
  1. Explain what each of the following HTML tags do and when you would use them:
  • <h1>, <h2>, etc. - h1 through h6 are used to define a heading.
  • <p>- this is used to define a paragraph. You would use this to start whatever text you're adding on a new line.
  • <body> - this is used to define the body section of the HTML document. This section will contain all the visible elements of the web page.
  • <a> and the href attribute - is used to define a hyperlink. The 'href' attribute is used to designate the path where the user should be taken to if they click the hyperlink.
  • <img> and the src attribute - is used to define an image. The 'src' attribute is used to designate the "source" url for the image that needs to be pulled in.
  • <div>- this is a non semantic tag used to define a division or section on the web page.
  • <section> - this is a semantic tage used to define a section on the web page.
  • <ul>, <ol>, and <li>- ul is used to define an unordered list, ol is used to define an ordered list, and li is used to define a list item.
  • <form> - this is used to define a form to collect user input.
  • <input> - this is used to define the input within a form. It is usually followed by the attribute 'type' that allows the developer to specify how data will be collected(for example, accepting a text input or a checkbox with pre-existing items).

CSS

  1. What is CSS?
  • CSS stands for "Cascading Style Sheets". It is the language used to style a web page.
  1. What is a CSS selector? How do you use the ID selector? The class selector?
  • The CSS selector is what to points to the HTML element that you want to style.
  • To use the ID selector, you must first use a hash/octothorpe (#) followed by the id of the element.
  • To use the class selector, you must first put a period (.) before the class name.
  1. What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
  • The first way is to use external CSS. If you use an external style sheet, the pro is that you can change the look of the whole website by just changing that one CSS file. The con is that your pages won't render correctly until the external CSS is loaded.
  • The second way is to use internal CSS. If you use an internal style sheet, the pro is that you can make changes to the style directly within the html file, making it easier to see all changes made to a specific page in one place. The con is that if you're managing multiple pages, it can be easy to forget that a specific page is utilizing internal CSS and makes the process of managing style more time consuming.
  • The third way is to use inline CSS. The pro is that you can use the style attribute to customize an element on the same line, which is quick and easy. The con is that if you want to add a lot of attributes, it can quickly get messy and will need to be repeated elsewhere if you desire to make those same changes to another element.
  1. What is the Box Model? Describe each component of the Box Model.
  • The box model describes the box that wraps around every HTML element and it's various components. This is used to change the design and layout. The components of the box model are:
  • Content: The content of the box. This is where you'll see text and/or images.
  • Padding: The transparent area around the content.
  • Border: The border that goes around the the padding.
  • Margin: The transparent area around the border.

SQL

Jumpstart Lab Tutorial

  1. What is a database?
  • A database is a container for data that allows users to store, retrieve, sort, and manipulate data.
  1. What is SQL?
  • SQL stands for Structured Query Language. It is the language used to interact with databases.
  1. What is SQLite3?
  • SQLite3 is a lightweight SQL database used for experimentation and local development. It stores data in a plain-text file and allows you to move, rename, delete, or transfer the database.
  1. What is a Table?
  • A table is a collection of data organized by rows and columns (like a spreadsheet).
  1. What is a primary key?
  • A primary key is a field in a table that identifies each row/record in a table. It cannot be null and must always be unique.
  1. What is a foreign key?
  • A foreign key is used to identify columns whose values match a primary key in a different table. Foreign keys are sometimes called a referencing key.
  1. Explain what each of the following SQL commands do:
  • insert - creates a new value and adds it to the column of a table.
  • select - finds rows in a table.
  • where - can be used with select to limit the rows shown by the attributes provided.
  • order by - sorts data by the requested attribute.
  • inner join - joins tables that match primary/foreign keys.

PG Exercises

  1. How can you limit which columns you select from a table?
  • You can limit which columns you select by referencing the columns you want to see after SELECT but before FROM: SELECT facid, name FROM cd.facilities;
  1. How can you limit which rows you select from a table?
  • You can limit which rows you select by referencing the rows you want to see after WHERE: SELECT * FROM cd.members WHERE memid = 2;
  1. How can you give a selected column a different name in your output?
  • You can give a selected column a different name in your output by specifying the different name after AS: SELECT name AS different_name FROM cd.facilities
  1. How can you sort your output from a SQL statement?
  • You can sort your output by using ORDER BY after your SELECT clause: SELECT surname FROM cd.members ORDER BY surname
  1. What is joining? When do you need to join?
  • Joining is when you combine rows from multiple tables to create a new table. You need to join when you're try to retreive data that needs to reference rows from two different tables. By combining the tables, all of your data is in one table and you can use the various clauses to narrow down on the data you'd like to retrieve from the new table.
  1. What is an aggregate function?
  • An aggregate function calculates a set of specified values and gives you back a single value.
  1. List three aggregate functions and what they do.
  • COUNT: returns the number of rows that meet the specified criteria provided after COUNT.
  • SUM: returns the sum of the numbers within the specified column after SUM.
  • MAX: returns the largest value within a given column.
  1. What does the group statement do?
  • The GROUP BY statment allows you to batch data together in groups, typically after using an aggregate function like count that only returns a single value.
  1. How does the group statement relate to aggregates?
  • GROUP BY will allow you to create a table that ties the result from an aggregate function like COUNT/SUM/MAX to another attribute and will display them all in a table.

Rails Tutorial: Task Manager

  1. Define CRUD.
  • CRUD stands for:
  • Create: Generate content that is stored in the database.
  • Read: Access existing content in the database.
  • Update: Modify existing content within the database.
  • Delete: Remove content from the database.
  1. Define MVC.
  • MVC stands for Model View Controller. It's an application design model with three parts:
  • Model: The data that will be used the the app. Can be a database, file, or object.
  • View: The user interface.
  • Controller: Allows the model and view to be updated and changed via inputs.
  1. 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.
  • config/routes.rb
  • app/controllers/tasks_controller.rb
  • app/models/task.rb
  1. What are params? Where do they come from?
  • Params are an object created via rails magic. They come from the parameters received via the request and allow us to use and manipulate the data contained within it.
  1. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
  • Because each route has a specific request (one for reading (get) and one for updating(post/patch).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment