Skip to content

Instantly share code, notes, and snippets.

@aperezsantos

aperezsantos/cfu_mod_2_intermission_work.md

Last active March 15, 2020 23:05
Show Gist options
  • Save aperezsantos/e086b19f69016c36a744a5659a9cc347 to your computer and use it in GitHub Desktop.
Save aperezsantos/e086b19f69016c36a744a5659a9cc347 to your computer and use it in GitHub Desktop.
Download ZIP
CFU: BE Mod 2 Intermission Work
Raw
cfu_mod_2_intermission_work.md

B2 Intermission Work

Deliverables are due 5:00 pm Saturday, Mar 14th. Submissions will not be accepted after that time. Prework must be completed in its entirety in order to attend class on Monday.

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

HTML

  1. What is HTML?
    • HTML or Hyper Text Markup Language, is the standard markup language for webpages, which consists of elements that hold instructions on how to structure a webpage (the bones of a webpage)
  2. What is an HTML element?
    • An element, which is represented by tags that label content to be displayed, tell the browser how to display that content
  3. What is an HTML attribute?
    • Specified in the opening tag, attributes provide additional information about HTML elements, showing up as a name/value pair
  4. What is the difference between a class and an id? When would you use one vs. the other?
    • The class attribute defines a style that is shared across all elements with the same class name
    • The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document), and is used to perform certain tasks for the element assigned with the specific id
    • An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements
  5. What HTML would you write to create a form for a new dog with a "name" and an "age"?
<!DOCTYPE html>
<html>
<body>

<h2>A New Doggo</h2>
<p>What is the name and age of your new doggo?</p>

<form action="/action_page.php">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>
  1. What are semantic tags? When would you use them over a div?
    • Elements that clearly describe their meaning to the browser and developer, such as <form>, <table>, and <article>
    • When you want the data to be fully open-source (shared and reused across all apps, companies, users)
  2. Explain what each of the following HTML tags do and when you would use them:
  • <h1>, <h2>, etc.
    • Creates a header with the number correlating to its importance, 1 being the most important
  • <p>
    • Begins a new paragraph
  • <body>
    • Holds the content that is actually reflected on a webpage
  • <a> and the href attribute
    • Together, the element and attribute define a link and provide its destination
  • <img> and the src attribute
    • Together, the element and attribute define an image and provide the filename of image source
  • <div>
    • A block element that starts on a new line, taking up the full width, stretching out from left to right, is used as a container for other HTML elements or to style blocks of content
  • <section>
    • A semantic element that defines a section in a document
  • <ul>, <ol>, and <li>
    • The first tag defines an unordered/bullet point list, the second tag defines an ordered/number list, and the last tag lists an item that you want listed within the specified list
  • <form>
    • Defines a form with form elements used to collect user input
  • <input>
    • Being the most important form element, it defines getting user input in different ways such as a single-line text, a radio button (for selecting one of many choices), and a submit button (for submitting the form)

CSS

  1. What is CSS?
    • CSS, which stands for Cascading Style Sheets, is responsible for the design or style of websites, including the layout, visual effects and background colors, and has the ability to change multiple webpages simultaneously, saving developers time
  2. What is a CSS selector? How do you use the ID selector? The class selector?
    • A selector is used to find the HTML element you want to style by specifying the element's name/id/class, relationship with other elements, state, part, or attribute
    • The id selector uses the unique id attribute of an HTML element to select a unique element (only one)
    • The class selector selects HTML elements with a specific class attribute, meaning all elements with that class attribute will be selected
  3. What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
    • External CSS: changes the look of an entire website by changing just one file, can be saved in any text editor
    • Internal CSS: used if one single HTML page has a unique style, defined inside the <style> element, inside the head section
    • Inline CSS: used to apply a unique style for a single element by adding the style attribute to the relevant element
  4. What is the Box Model? Describe each component of the Box Model.
    • The box model referst to the design and layout of a page
    • Content - where text and images appear
    • Padding - area around the content that is transparent
    • Border - border that goes around the padding and content
    • Margin - area outside the border that is transparent

SQL

Jumpstart Lab Tutorial

  1. What is a database?
    • Means of storing, fetching, calculating, and sorting data
  2. What is SQL?
    • Structured Query Language is how we interact with most databases by giving instructions to create, modify, or delete tables, find existing data within tables, insert new data, or change data.
  3. What is SQLite3?
    • A database engine used to create tables with data
  4. What is a Table?
    • Related data that is organized according to categories, using rows and columns
  5. What is a primary key?
    • A column or a group of columns that uniquely identifies each row in a table
  6. What is a foreign key?
    • A column or group of columns in one table that refers to the primary key (column or groups of columns) in another table
  7. Explain what each of the following SQL commands do:
  • insert
    • Adds new data to an existing table
  • select
    • Finds data in a table that you want to display
  • where
    • It scopes into the data by specifying what attributes the data should match in order to be displayed
  • order by
    • It specifies which order the data should be displayed, descending or ascending
  • inner join
    • Joins tables based on a specified relationship between data

PG Exercises

  1. How can you limit which columns you select from a table?
    • By specifying the names of the columns you want in your queries using SELECT
  2. How can you limit which rows you select from a table?
    • By specifying a condition that must be met using WHERE
  3. How can you give a selected column a different name in your output?
    • The AS command is used to rename a column or table with an alias
  4. How can you sort your output from a SQL statement?
    • order allows you to sort the output data in descending or ascending order
  5. What is joining? When do you need to join?
    • Joining is the process of returning matching data from two or more tables
    • You would do this when you're comparing tables, and want to access data that matches
  6. What is an aggregate function?
    • Performs a calculation on data, such as count and sum
  7. List three aggregate functions and what they do.
    • Count: counts the rows that meet a specifed condition
    • Sum: calculates the sum of a set of values
    • AVG: calculates the saverage of a set of values
  8. What does the group statement do?
    • Groups data/values according to a specifed column
  9. How does the group statement relate to aggregates?
    • Combining the group statement with aggregates, allows you to further narrow down the scope of data you want

Rails Tutorial: Task Manager

Copy and Paste the link to your Task Manager repo here: https://github.com/aperezsantos/static_challenges Copy and Paste the link to your Static Challenge here: file:///Users/aperezsantos/turing/2_mod/static_challenges/index.html

  1. Define CRUD.
    • CRUD stands for Create, Read, Update, and Delete, and are functions used by applications to manipulate data within databases
  2. Define MVC.
    • The Model View Controller framework is an architectural pattern that divides how an application functions into three procecess: model, view, and controller
    • The controller handles incoming requests for specific data
    • The model gathers the data requested
    • The view presents the gathered data
  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.
    • routes in configuration, task_controller in controllers, html file in views/tasks
  4. What are params? Where do they come from?
    • params are objects created from the information (parameters) entered into a form in an application
    • they appear as a nested hash that includes the information sent in through an application form in the form of a key with a value of another hash that match up with the form fields and the information that a user sends in when they submit that form
  5. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
    • routes speicify what an application should do with a request from a user
    • two routes are necessary when creating and updating because new views are being created as data changes
@aperezsantos
Copy link
Author

Attempted the static challenge. It was fun! And super hilarious!

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