Skip to content

Instantly share code, notes, and snippets.

@aripp2

aripp2/AmyRippeto_mod-0-capstone.md

Last active April 26, 2019 09:28
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save aripp2/f09a601a2525c4cc222cb3a228be44aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AmyRippeto_mod-0-capstone.md

Turing Pre-work

Day 1

Chapters 1 & 2

  1. On a website, what is the purpose of HTML code?

To structure the content of a website

  1. What is the difference between an element and a tag?

The difference between an element and a tag is the opening and closing tags are what define the beginning and end of the specified element. The element will vary depending on the character within the tags.

  1. Why do we use attributes in HTML elements?

To provide additional information about the element's content.

  1. Describe the purpose of the head, title, and body HTML elements.
  • <head> to contain information about the page, but not shown on the main browser window
  • <title> to provide a name, title, or description of the page displayed; contents within the title element will appear at the top of the browser or the browser tab
  • <body> to contain all the content to be displayed in the browser window
  1. In your browser (Chrome), how do you view the source of a website?

Using the shortcut option + command + i

  1. List five different HTML elements and what they are used for.

    1. <h1></h1> for main headings (h2-h6 for sub headings)
    2. <b></b> to make characters appear bold
    3. <i></i> to make characters appear italic
    4. <sup></sup> to contain characters that should be superscript
    5. <sub></sub> to contain characters that should be subscript

  2. What are empty elements?

An element without an opening and closing tag. It usually only has one tag and a space before the forward slash and closing bracket.

  1. What is semantic markup?

Semantic markups are elements that are not intended to affect the structure of the web page. Instead they describe the content of the page more accurately.

  1. What are three new semantic elements introduced in HTML5?
 <header>
 <footer>
 <nav>

Here is a link to my first pen in CodePen

Day 2

Chapters 3 & 4

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
  • In an ordered list each item is numbered.
  • An unordered list begins with a bullet point, not characters defining the order.
  • A definition list is made up of terms and their definitions.
  1. What is the basic structure of an element used to link to another website?

<a href="www.website.com">link text</a>

  1. What attribute should you include in a link to open a new tab when the link is clicked?

target="_blank"

  1. How do you link to a specific part of the same page?

Start by adding and id attribute to different HTML elements on the page to identify those sections. Then you will use the <a> element to link to a specific id attribute. The value of the href attribute will start with the # symbol, followed by the value of the id attribute of the element you want to link to.

An example of what this could look like is: <p><a href="#top">Top</a><p>

This link would take you to the top of the page where the HTML element was identified as shown: <h1 id="top">This is the top of the page</h1>

Chapters 10, 11, & 12

  1. What is the purpose of CSS?

To add style to your web page making it more attractive.

  1. What does CSS stand for? What does cascading mean in this case?

Cascading Style Sheet

Cascading refers to the order of rules, and what will take precedence for a specific element.

  1. What is the basic structure of a CSS rule?

Selector { (new line) Declaration (Property: Value;) }

  1. How do you link a CSS stylesheet to your HTML document?

By using the <link> element within the <head> element of the HTML document. The <link> element should use three attributes: href, type, and rel

  1. When is it useful to use external stylesheets as opposed to using internal CSS?

When you want to use the same style sheet for multiple pages of the same site to avoid repeating code and minimize work when changes are made.

  1. Describe what a color hex code is.

A six digit code to represent the amount of red, green and blue in a color. This code is preceded by the # symbol.

  1. What are the three parts of an HSL color property?
  • Hue
  • Saturation
  • Lightness
  1. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
  • Serif - extra details on the ends of the main strokes of the letters
  • Sans-Serif - straight ends to letters, cleaner design
  • Monospace - letters have a fixed-width, every letter is the same width
  1. When specifying font-size, what are the main three units used?
  • Pixels
  • Percentages
  • EMS

Day 3

Chapter 7

  1. If you're using an input element in a form, what attribute controls the behavior of that input?

name attribute

  1. What element is used to create a dropdown list?

<select>

  1. If you're using an input element to send form data to a server, what should the type attribute be set to?

type="submit"

  1. What element is used to group similar form items together?

<fieldset>

Chapters 13 & 15

  1. Describe the differences between border, margin, and padding.
  • border: every box has a border even if it isn't visible, it separates the edge of a box from another
  • margin: is the space outside the border, adjusting the margin will change the space between the borders of adjacent boxes
  • padding: is space within the box, between the border and any content inside that box
  1. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?

The values are listed in clockwise order:

  • 1px = top
  • 2px = right
  • 5px = bottom
  • 10px = left
  1. Describe the different between block-level and inline elements.
  • block-level elements: each element starts on a new line, vertically down the page
  • inline elements: the elements flow in between surrounding text, will appear next to each-other in a horizontal line
  1. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
  • fixed positioning: is used to control the absolute position of an element on a page, other elements on the page will ignore the element with a position: fixed value that stays in the same place as the user scrolls
  • z-index: is important if you are using fixed postioning so you can control what content is seen as the boxes overlap
  1. What is the difference between a fixed and liquid layout?
  • fixed layout: the content doesn't change size as the user increases or decreses their browser window
  • liquid layout: the content stretches and contracts as the user adjusts the size of their browser

Day 4

Chapter 5

  1. In an image element, why is the alt attribute important?

It provides a description of the image if it can't be seen.

  1. What determines if an image element is inline or block?

  • block image: will appear on a new line

  • inline image: will appear within a block element, being wrapped by other content withing the element such as text

  1. What are the benefits of jpg or png image file formats?

  • jpg: best for photographs and images with lots of color and detail as it will display most acurately

  • png: best for images with flat colors, such as logos and diagrams, this will be a smaller file and load quicker

Chapter 16

  1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?

You can specify the dimensions for multiple images in CSS, especially helpful if you have a lot of images that need to be the same size. This helps the page load more smoothly.

  1. What is an image sprite, and why is it useful?

A single image that is used for several parts of a page. This will help the page load faster since the browser will only have to request the one image.

Day 5

Chapter 2

  1. How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
  • A variable is declared by giving it a name, also known as an identifier that describes the data the variable will hold.
  • The equals sign says you are setting or assigning a value to the given variable.
  • In JS the = is called the Assignment Operator.
  1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
  • numbers: numeric data that will be used for calculations and other tasks requiring numbers such as measurements, movement and time. The numbers 0-9 can be used whole or as decimals as well as positive or negative.
  • strings: are enclosed with quotes (single or double, as long as they match) and contain text and other charaters to be displayed on the page.
  • booleans: data that can have one of two values, either true or false which can help determine which part of a script should run.

  1. What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?

    1. The name must begin with a letter, dollar sign, or an underscore not a number.
    2. The name can contain letters, numbers, dollar sign, or underscore but you can not use a dash or period.
    3. You cannot use keywords or reserved words, which are special words that tell the interpreter to do something or reserved for future versions of JS.
    4. All variables are case sensitive, and you shouldn't use the same name using different cases.
    5. Use a name that describes the information for that variable.
    6. If using more than one word, use camel case, meaning all words are captitalized except the first word. You can also underscore between words, but not a dash.
    7. Some reserved words for JS include: function, public, break, with, new, in, package, class

  2. How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?

  • If you have multiple related values creating an array prevents you from having to create a variable for each, this is especially helpful if you don't know how many items a list will contain as you do not have specify how many values it will hold.
  • To access a value in an array you will need specify the array name and the value's index number in square brackets. The index number is the values numeric postion in the array, this count begins with 0 not 1. Below is an example of this:
   var fruits = ['strawberry', 'pineapple', 'blueberry', 'peach'];
   var itemFour;
   itemFour = fruits[3];
   fruits[3] = 'peach';
  • To change a value in an array, you select it and assign it a new value. Using the above example I will change pineapple to mango.
fruits[1] = 'mango';
var fruits = ['strawberry', 'mango', 'blueberry', 'peach'];
  1. What is the difference between an expression and a statement?

A statement is an individual instruction or step (line of code) ending with a semicolon. An expression is any section of the code that evaluates to a value; returning either a value for a variable or value of an operation.

  1. What are three types of operators and how are they used?

    1. Assignment Operators: assigns a value to a variable
    2. Arithmatic Operators: performs math
    3. String Operators: combines strings

Day 6

Chapter 2

  1. If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
  • sayHello: this simply names/identifies the function
  • sayHello(): the parentheses allow the function to be used/called repeatedly within the file, minimizing the amount of code that needs to be written
  1. What is the difference between function parameters and arguments?
  • function parameters: the names/variables within the parentheses of a declared function
  • arguments: actual/real values (provided as values or variables) provided within the parentheses when calling a function
  1. What is the keyword return used for?

It ends the execution of a function and it is used to give(return) a value to the code that called the function.

  1. How are local variables better than global variables? Are there instances you can think of where you might want to use a variable that is globally scoped over local?

  • Local variables are better than global variables especially when working on a project with multiple people as it will prevent naming conflicts that lead to error. They also help a page run more efficiently since they are only used while that specific function is being ran, requires less memory.

  • You may want to use a global variable when it is going to be used in several places throughout your script.

Day 7

User Interface/User Experience (UI/UX)

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