Skip to content

Instantly share code, notes, and snippets.

@JesseMcBrennan
Last active March 5, 2018 23:27
Show Gist options
  • Save JesseMcBrennan/8149d3d120f40ab436775a88579f3d46 to your computer and use it in GitHub Desktop.
Save JesseMcBrennan/8149d3d120f40ab436775a88579f3d46 to your computer and use it in GitHub Desktop.
Jesse's Prework

Day One:

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

HTML Describes the structure of pages.

H2 What is the difference between an element and a tag?

HTML Elements tell the bowswer something about the information that sits between its opening and closing tags. Tags act like containers. They tell you something about the information that lies between their opening and closing tags.

Why do we use attributes in HTML elements?

Attributes provide additional information about the contents of an element and require a name and a value.

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

Head: Contains information about the page.

Title: Contents of the title element are either shown in the top of th ebrowser, where you usually type the URL, or on the tab for that page.

Body: The Body is everything inside the main browser page.

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

Right click and select "Inspect".

List five different HTML elements and what they are used for. For example,

is a paragraph element, and it is used to represent a paragraph of text.

  <h1></h1> Indicates the largest header of the webpage.
  <h6></h6> Indicates the smallest header of the page.
  <li></li> Indicates a list
  <ul></ul> Indicates an unordered list
  <link></link> Is used to prepresent a link.

What are empty elements?

Empty Elements are elements that do not have any words between an opening and closing tag.

What is semantic markup?

Semantic Markpup provides extra information such as where emphasis is placed in a sentence, that something you have written is in quotations, the meaning of acronyms, and so on.

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

  <article></article> 
  <aside></aside>
  <footer></footer>

CodePen Exercise:

https://codepen.io/JesseMcBrennan/full/RQgKxR

Day Two:

Answer these questions about the reading in your prework gist:

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

  • Order Lists are lists where each item in the list is numbered.

  • Unordered lists are lists that begin with a bullet point.

  • Definition list are made up of a set of terms along with the defintitions of those terms.

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

<link rel="stylesheet" type="text/css" href="">

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

Add add a target="_blank" to the tag.

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

By creating an ID to the specific part of the page you wish to link to then refer to that link in your ID NAME

Chapter 10, 11, and 12

What is the purpose of CSS?

CSS Allows you to create reules that control the way that each individual box (and the contents of that box) is presented.

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

Cascading Style Sheet - Cascading means you can create generic rules that aply to most elements and then override the properties of inidividual elements that need to appear differently.

What is the basic structure of a CSS rule?

A CSS rul contains two parts: a selector and a declaration or a property and a value.

  Property (IE Element) {
          Value (IE Font: Color:) 
          }

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

By linking to the specific style sheet in your HTML file

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

In general it is always better to use external style sheets, but in some cases, such as making adjustments to specific pages, you should use an internal CSS.

Describe what a color hex code is.

Six-digit codes that represent that amount of red, greem and blue in a color precded by a pound or hash #(Octothorp)

What are the three parts of an HSL color property?

Hue, Saturation, Lightness

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

Serif, Sans-Serif, and Monospace

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

Weight, Style and Stretch

With the page you created in CodePen, add to it:

Add a color to the text of all of your headings (using hex codes). For your h1 heading, add a background color. Make your headings a serif font, and make the paragraph text a sans-serif font. Change a snipet of paragraph text to be italic using the font-style property (do not use the in this case).

Day Three:

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

The Action attribute: IE

What element is used to create a dropdown list?

<select>

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

...method="post">

What element is used to group similar form items together?

<fieldset>

With the page you created in CodePen, add a form that could be used to submit your top three music artists. It should include:

Text boxes for each artist (three artists total). Labels for each text box. Dropdowns for the genre of each artist. Submit button.

Describe the differences between border, margin, and padding.

  • Border:
  • Margin:
  • Padding:

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

  • 1px: top
  • 2px:right
  • 5px:bottom
  • 10px:left

Describe the different between block-level and inline elements.

  • Block-level elements always appear on a new line.
  • Inline elements always appear in line.

What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?

Fixed positioning is a form of absolute positioning that positions the element in relation to the browser window as opposed to the containing element. Z-index property allows you to control which box appears on top when boxes overlap using normal flow.

When using fixed positioning, boxes have the ability to overlap, blocking content. Z positioning allows you to dictate which box appears on top, mitigatint the affects of overlapping.

What is the difference between a fixed and liquid layout?

(Assuming this question refers to fixed width layouts)

Fixed width layout designs do not change size as the user increases or decreases the size of their browser dinow.

Liquiod layout designs stretch and contract as the user increases or decreases the size of their browser window.

Fixed postion positions the element in relation to the browser dinow. Therefore, when a user scrolls down the page it stays in the exact same place.

Chapter 5

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

The alt attribute is important because allows screen software the ability to describe the content of the photo.

What determines if an image element is inline or block?

If the is followed by a block level element then the block level element will sit on a new line.

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

JPG: Should be used when an image contains many different colors GIF and PNG: Should be used when saving images with few colors or large areas of the same color.

Chapter 16

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

Using CSS to dictate height and width keep the rules affecting the presentation of my page in CSS and out of the HTML markup.

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

A sprite is a single image being used for several different parts of an interface. The advantage of using sprites is that the web browser only needs to request one image rather than many images which helps load time.

Continue working with the page you created in CodePen, and add a couple relevant images to your paragraph text.

Eloquent JavaScript Chapter 1 and 2

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

Numbers: Numeric values that represent larger numbers. Javascript uses 64 bits to store a single number. Numbers are mainly used for doing arithmetic.

  • and * symbols are operators

Strings: Strings are used to represent text they are written by enclosing their content in quotes. IE "Patch my boat with chewing bum", 'Monkeys wave goodbye'.

Booleans:Distinguishes between two possibilities like "yes" and "no" or "on" and "off". Booleanse have just two values: true and false.

console.log(3 > 2) // > true

Other Operators(Page 16):

= greater than or qual to, <= less than or equal to, == equal to, != not equal to

One value in JS that is not equal to itself is NaN consoel.log(Nan == NaN) // > False

What are the three logical operators that JavaScript supports?

and (&&), or (||) and not (!)

What is the naming convention used for variables?

var

What is the difference between an expression and a statement?

An expression responds to a sentence fragment where as a statement corresponds to a full sentence.

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

var,break, case, catch ,continue, debugger, defeault, delete, do, else, false, finally, for , function, if, implements, in, instanceof, interface, let, new, null, package, private, protected, publid, return, static, switch, throw, true, try, typeof, var, void, while, with, yield, this.

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

Control Flow is a program executing more than one statement one after the other from top to bottom and is helpful because it allows you to string statements together.

var num

Chapter 3 Eloquent JS

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

By entering sayHello() we are expressing the function of say hello, not just recalling the variable "Hello".

What is the keyword return used for?

A return statement determines the value the function returns.

What are function parameters?

Function parameters behave like regular variables, but theri initial values are given by the caller of the function, not the code in the function itself.

What is the naming convention used for function names?

function()

for / while loops Global / Local Parameters Functions in general

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