Skip to content

Instantly share code, notes, and snippets.

@Aferencz1987

Aferencz1987/MOD_2_Prework.md

Last active May 8, 2021 01:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Aferencz1987/a20d6da7919e372ad6f79893d7029a52 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Aferencz1987/a20d6da7919e372ad6f79893d7029a52 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
MOD_2_Prework.md

B2 Intermission Work

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

HTML

  1. What is HTML?
    Hyper text markup language. It is the language for creating web pages and describes the structure of a web page.

  2. What is an HTML element?
    Something that tells the browser how to display the content.

  3. What is an HTML attribute?
    A modifier of an html element. It can either modify default element functionality or provide functionality that otherwise wouldnt exist.

  4. What is the difference between a class and an id? When would you use one vs. the other?
    An ID is only used to identify one single element and a class can be used to identify more than one element. IDs are only used when one element on the page should have a particular style applied to it.

  5. What HTML would you write to create a form for a new dog with a "name" and an "age"?
    The form element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

    <label for="name">Name:</label><br>
<input type="text" id="name" name="name" value="Name Here"><br>
<label for="age">Age:</label></br>
<input type="text" id="age" name="age" value="Age"><br><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</form>

  6. What are semantic tags? When would you use them over a div?
    Semantic tags tell the browser what kind of content is within the tag. Use them if there is no other information letting you know what it is.

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

  • <h1>, <h2>, etc.
    header tags which are used for introductory content, typically a group of introductory or navigational aids.

  • <p>
    paragraph tags which are used for any structural grouping of related content, such as paragraphs, images or, form fields.

  • <body>
    body contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

  • <a> and the href attribute
    <a>is used to link from one page to another. The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the <a> tag will not be a hyperlink.

  • <img> and the src attribute
    The tag is used to embed an image in an HTML page. The src attribute is where the image is located.

  • <div>
    The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute.

  • <section>
    The <section> tag defines a section in a document.

  • <ul>, <ol>, and <li>
    Use the <ul> tag together with the <li> tag to create unordered bulleted lists. <ol> will create an ordered list. It also uses <li> to bullet the contents of the list.

  • <form>
    The <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the following form elements:
    <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label> <output>

  • <input>
    _It specifies an input field where the user can enter data. The <input> element is the most important form element and can be displayed in several ways, depending on the type attribute. The different input types are as follows:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (default value)
<input type="time">
<input type="url">
<input type="week">
Always use the <label> tag to define labels for <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.

CSS

  1. What is CSS?
    It is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML.

  2. What is a CSS selector? How do you use the ID selector? The class selector?
    CSS selectors are used to "find" (or select) the HTML elements you want to style. There are 5 categories of selector.

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)
  1. What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
  • Inline - by using the style attribute inside HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using a <link> element to link to an external CSS file
  1. What is the Box Model? Describe each component of the Box Model.
    The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent
    The box model allows us to add a border around elements, and to define space between elements.

SQL

Jumpstart Lab Tutorial

  1. What is a database?
    A means of storing, fetching, calculating, and sorting data.

  2. What is SQL?
    _Structured Query Language. It is how we modify, delete, and create tables in a database.

  3. What is SQLite3?
    An version of sql that is good for experiments but never used in production.

  4. What is a Table?
    A table is a structed database that we manipulate with sql.

  5. What is a primary key?
    It is the thing that identifies each item in the database

  6. What is a foreign key?
    The reference to a different table in a table.

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

  • insert
    Adds a new piece of data
  • select
    Chooses and returns a piece of data
  • where
    Narrows down the scope of what is being selected.
  • order by
    Gives the order of the items by whatever you choose.
  • inner join
    Combining tables into one.

PG Exercises

  1. How can you limit which columns you select from a table?
    Limit columns by specifying with FROM.

  2. How can you limit which rows you select from a table?
    Limit rows by specifying with WHERE.

  3. How can you give a selected column a different name in your output?
    You can change the name with UPDATE.

  4. How can you sort your output from a SQL statement?
    Sort with SORT BY.

  5. What is joining? When do you need to join?
    Joining is combining two tables. It would be used in order to streamline reading and make it make more sense to the user of said table.

  6. What is an aggregate function?
    It is combining values of different rows depending on certain criteria.

  7. List three aggregate functions and what they do.
    _COUNTreturns the total number of records, SUM totals the values, and AVG averages the values.

  8. What does the group statement do?
    It groups rows that have the same values into one row.

  9. How does the group statement relate to aggregates?
    It often used in conjunction with aggregate functions in order to group the result-set by one or more columns.

Rails Tutorial: Task Manager

https://github.com/Aferencz1987/task_manager_complete
https://github.com/Aferencz1987/static_challenges

  1. Define CRUD.
    Create, Read, Update, Delete. All apply to the data we work with in a program

  2. Define MVC.
    The model is the data, the view is the user interface, and the controller is the process that deals with the data and output.

  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.
    We would need a tasks controller, a data base, and a routes file.

  4. What are params? Where do they come from?
    Params are the pieces of information the user inputs that are then taken and made into a params object for us to be able to manipulate it.

  5. Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
    _We need the create and show to populate our newly created task. Then we need to select for editing, and update the already created task.

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