Skip to content

Instantly share code, notes, and snippets.

@the-oem

the-oem/JasonCollins_prework.md

Last active March 9, 2017 23:11
Show Gist options
  • Save the-oem/ef65228a1ea89d6841aebbb29217ea77 to your computer and use it in GitHub Desktop.
Save the-oem/ef65228a1ea89d6841aebbb29217ea77 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
JasonCollins_prework.md

This is my gist to track my pre-work for Turing School of Software and Design

Day 1

  1. Computer setup - DONE
  2. Create a gist - DONE
  3. Codepen account - DONE
  4. Chapters 1 & 2 (HTML and CSS: Design and Build Websites)

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

  • HTML uses various elements to provide structure to a web page.

What is the difference between an element and a tag?

  • Elements are generally made up of two tags. A starting tag and an ending tag.

Why do we use attributes in HTML elements?

  • To help provide more information about the contents of the element.

Describe the purpose of the head, title, and body HTML elements.

  • The head tag contains information about the page, such as meta data. The title tag shows its contents at the top of the browser and on the tab within the browser that is displaying your web page. The body element indicates that anything showin within it should be visible in the main browser window.

In your browser (Chrome), how do you view the source of a website?

  • Right click and choose View Page Source from the menu.

List five different HTML elements and what they are used for. For example, p is a paragraph element, and it is used to represent a paragraph of text.

  • h1 is a main heading element, used to show a heading in the largest heading size. h6 is a sub-heading element, used to show a heading in the smallest heading size. b is a bold element, and is used to make the characters appear bold, from a style point of view. i is a italic element, and is used to italicize the characters within it. sup is a superscript element, and is used to show words that shold be superscript, such as math concepts or suffixes of dates. sub is a subscript element, and contains characters that should be subscript, such as foot notes or chemical formulas.

What are empty elements?

  • Empty elements have no content between the opening and closing tags, and they are written differently, as a single tag.

What is semantic markup?

  • Semantic markup provides extra information, such as where emphasis is placed in a sentence.

What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.

  • article, aside, and header are all new semantic elements introduced in HTML 5.

CodePen Updates

  • DONE

  1. CodePen URL: http://codepen.io/theoem/pen/EWNpLd

  2. Gear-Up Questions: https://gist.github.com/the-oem/d7ac0dc7415f8180e7f5360f8255de59

Day 2

  1. Daily Warm-Up: DONE
  2. Read Chapters 3 and 4 on Lists and Links from HTML and CSS: Design and Build Websites

There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?

  • ordered lists are numbered, unordered lists are lists that begin with a bullet point, and definition lists are made up of terms and definitions of those terms.

What is the basic structure of an element used to link to another website?

  • The basic structure is an a tag and an href attribute that tells where the link should direct to.

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

  • You would include the target attribute and set the value to _blank.

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

  • In the href attribute, you would use #somename as the attribute value, and then you would use an id attribute on the tag elsewhere in the page that you want to link to, setting the id value to #somename.

CodPen Updates

  • DONE
  1. Read Chapters 10, 11, and 12 on What is CSS, Color, and Text from HTML and CSS: Design and Build Websites

What is the purpose of CSS?

  • CSS is intended to allow you to specify how the content of elements appears.

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

  • It stands for Cascading Style Sheet. Cascading means that rules will cascade in that the last rule processed for the exact same element will be the rule that is applied.

What is the basic structure of a CSS rule?

  • It includes a selector (identifying which element the rule should be applied to) and a declaration (specifying what style the rule should apply to the element).

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

  • You would use the link element inside of your head element.

Why is it useful to use external stylesheets as opposed to using interal CSS?

  • You can then maintain a single set of CSS rules and use them in multiple places.

Describe what a color hex code is.

  • It's a 6 digit code that specifies the levels of red, blue and green in the color.

What are the three parts of an HSL color property?

  • The 3 parts are the hue, saturation, and lightness levels.

In the world of typeface, what are the three main categories of fonts? What are the differences between them?

  • Serif (fonts that have extra details on the ends of the strokes), San-Serif (fonts that have straight ends to the strokes), and Monospace (fonts that have a fixed width to every letter).

When specifiying font-size, what are the main three units used?

  • Pixels, Percentages, and Ems.

CodePen Updates

  • DONE

Day 3

  1. Daily Warm-Up: DONE
  2. Read Chapter 7 on Forms from HTML and CSS: Design and Build Websites

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

  • The type attribute.

What element is used to create a dropdown list?

  • The select element.

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

  • It should be set to submit.

What element is used to group similar form items together?

  • fieldset is used to group form elements together.

CodePen Updates

  • DONE
  1. Read Chapters 13 and 15 on Boxes and Layout from HTML and CSS: Design and Build Websites

Describe the differences between border, margin, and padding.

  • border controls the border around a box element, margin controls the gap between boxes, and padding controls the amount of space between the contents of an element and its border.

For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?

  • 1px is top, 2px is right, 5px is bottom, and 10px is left.

Describe the difference between block-level and inline elements.

  • Block level elements start on a new line, and inline elements flow in between surrounding text.

What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning positions an element relative to the browser window as opposed to a containing element. Z-index is important in this because it will determine in what order fixed position elements are layered.

What is the difference between a fixed and liquid layout?

  • Fixed layouts do not change size as the user increases/decreases the size of the browser window. Liquid layouts stretch and contract as the user changes the window size.

CodePen Updates

  • DONE
  1. Professional Development https://gist.github.com/the-oem/74bdce2bff2a5fcd23743a4e53012059

Day 4

  1. Daily Warm-Up: DONE
  2. Read Chapter 5 on Images HTML from HTML and CSS: Design and Build Websites

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

  • It is displayed in the event that an image cannot be displayed. It is also read by screen readers.

What determines if an image element is inline or block?

  • The placement of the img element inside or outside of a block element determines whether it is inline or block.

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

  • jpg is a better choice when there are many colors, such as in a photograph. png is better when there are few colors or large blocks of the same color.
  1. Read Chapter 16 on Images CSS from HTML and CSS: Design and Build Websites

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

  • This allows you to control the size of all the images from a single place, rather than having to modify many different HTML pages.

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

  • A sprite is an image that is used in many different parts of an interface. It's beneficial because the browser only needs to make a single request to get the image, which helps increase page load times.

CodePen Updates

  • DONE
  1. Read the Introduction from Eloquent JavaScript: A Modern Introduction to Programming
  • DONE

Day 5

  1. Daily Warm-Up: DONE
  2. Read Chapters 1 and 2 (Data Types, Variables, and Control Flow) from Eloquent JavaScript: A Modern Introduction to Programming

There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.

  • Numbers are exactly that, number values. Strings are used to represent text. Booleans distinguishes between two possibilities and is represented by true and false.

What are the three logical operators that JavaScript supports?

  • and, or, and not.

What is the naming convention used for variables?

  • Variables can be named anything that isn't a reserved word, and they cannot contain spaces or special characters with the exception of $ and _.

What is the difference between an expression and a statement?

  • An expression is a fragment of code that produces a value. A statement stands on its own and only amounts to something if it affects the world.

What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?

  • var, break, case are a few reserved words. If you use a reserved word as the name of your variable, your program likely won't run or will have unexpected results.

What is control flow, and why is it useful for programming?

  • Control flow is the order in which expressions and statements are executed. It is important because it dictates the order in which the computer will evaluate the code. Without it, results would be unpredictable.

Chrome Dev Tools console practice

Day 6

  1. Daily Warm-Up: DONE
  2. Read Chapter 3 (Functions) from Eloquent JavaScript: A Modern Introduction to Programming

If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?

What is the keyword return used for?

What are function parameters?

What is the naming convention used for function names?

Console exercises

  1. Work through Command Line Crash Course

Day 7

  1. Daily Warm-Up: DONE
  2. Learn About Your Text Editor - Atom!
  3. Make A New Webpage Using Atom!
  4. User Interface/User Experience (UI/UX)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment