Skip to content

Instantly share code, notes, and snippets.

@jasonhughes1
Last active June 13, 2017 02:26
Show Gist options
  • Save jasonhughes1/a9537a30642f20c93498a8c610cfdcda to your computer and use it in GitHub Desktop.
Save jasonhughes1/a9537a30642f20c93498a8c610cfdcda to your computer and use it in GitHub Desktop.
Pre Work

Day One

1.)

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

2.)

What is the difference between an element and a tag? Tags are labels you use to mark up the begining and end of an element. ... The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag. HTML is all about elements.

3.)

Why do we use attributes in HTML elements? An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element's start tag.

4.)

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

5.)

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

6.)

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.

  1. heading

  2. body
  3. The HTML element provides general information (metadata) about the document, including its title and links to its scripts and style sheets
  4. element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.
  5. <style> The HTML <style> element contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.</style>

7.)

What are empty elements? Empty HTML Elements. HTML elements with no content are called empty elements.
is an empty element without a closing tag (the
tag defines a line break). Empty elements can be "closed" in the opening tag like this:
.

8.)

What is semantic markup? Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look

9.)

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

Defines a footer for a document or section Specifies a header for a document or section Specifies the main content of a document Defines marked/highlighted text

Empathy:

What role does empathy play in your life and how has it helped you? Empathy has helped me see the best in others. Everyone has their own story and come from different backgrounds, empathy helps you see the good in everyone.

How does empathy help you build better software? Empathy helps create passion. Coming up with an idea without directly seeing how it could change lives, doesnt have the same effect as meeting the people whose lives might be chances.

Why is empathy important for working on a team? Empathy helps you better understand your teammates. It can make you connect to someone on a deeper level, increasing the potential for a successful group effort.

Describe a situation in which your ability to empathize with a colleague or teammate was helpful. A colleague of mine was a blind former golf pro. He was older than me, but we had a connection through the game of golf. I would help him with certain things at work that made our relationship stronger, which made our team at work stronger.

When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios? It's hard for me to be empathetic when I feel that people exaggerate situations. I tend to be pretty laid back, so when people stress out over little things, it's hard for me to put myself in their shoes. I could improve my understanding of their stress and not be so quick to judge.

Day Two

1.)

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

  • Ordered list: are lists where each item in the list is numered. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be indentified by a section number.
  • Unordered lsit: are lists that begin with a bullet point (rather than characters that indicate order).
  • Definition lists: are made up of a set of terms along with the definitions for each of those items.

2.)

What is the basic structure of an element used to link to another website? <a href= >

3.)

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

4.)

How do you link to a specific part of the same page? using an ID attribute

CSS:

What is the purpose of CSS? to style a webpage

What does CSS stand for? What does cascading mean in this case? Cascading style sheets.. to arrange things.

What is the basic structure of a CSS rule? p { font-family: Arial; }

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

What is it useful to use external stylesheets as opposed to using interal CSS? When building a site whith more than one page, you should use an external CSS style sheet. This allows all pages to use the same style rules(rather than repeating them in each page), keeps the content separate from how the page looks, means you can change the styles used across all pages by altering just one file (rather than each individual page).

Describe what a color hex code is. These are six - digit codes that represent the amount of red, green and blue in a color, preceded by a poound or hash # sign.

What are the three parts of an HSL color property? H : Hue, S: Saturation, L: Lightness

In the world of typeface, what are the three main categories of fonts? What are the differences between them? When specifiying font-size, what are the main three units used? Serif: serif fonts have extra details on the ends of the main strokes of letters. These details are known as serifs. Sans-Serif: have straight ends to letters, and therefore have a much cleaner design. Monospace: Every letter is the same width

Font size can be determined by: pixels, percentages, ems.

Day Three

If you're using an input element in a form, what attribute controls the behavior of that input? type= "text", name, size, and maxlength

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? file

What element is used to group similar form items together? fieldset

Chapter 13 + 15

Describe the differences between border, margin, and padding. Border: every box has a border(even if it is not visible or is specified to be 0 pixels wide). The border separates the edge of one box from another. Margin: Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes. Padding: Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.

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

Describe the different between block-level and inline elements. An inline element occupies only the space bounded by the tags that define the inline element. A block-level element occupies the entire space of its parent element (container), thereby creating a "block.

What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? fixed positioning: this is a form of absolute positioning that positions the element in relation to the brower window, as opposed to the containing element. Elements with fieed positioning do not affect the position of surrounding elements and they do not move when the user scrolls up or down the page.

  • When you move any element from normal flow, boxes can overlap. The z-index property allow your to control which box appears on top.

What is the difference between a fixed and liquid layout? fixed width layout designs do not change size as the user increases or decreases the size of their browser window. Measurements tend to be given in pixels. liquid layout designs stretch and contract as the user increases or decreases the size of their browswer window. They tend to use percentages.

Day Four

In an image element, why is the alt attribute important? The alt attribute provides a text description of the image which describes the image if you cannot see it. What determines if an image element is inline or block? Where you place the image in the code. What are the benefits of jpg or png image file formats?

jpg- photographs use png if you are creating an image that is partially transparent.

Chapter 16

What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? It will help the site load more quickly. What is an image sprite, and why is it useful when a single image is used for several different parts of an interface. The advantage of using printes is that the web browswer only needs to request one image rather than many images, which can make the web page load faster.

Day Five

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

What are the three logical operators that JavaScript supports? && AND || OR ! NOT

What is the naming convention used for variables? var

What is the difference between an expression and a statement? A fragment of code that produces a value is called an expression. A JavaScript statement corresponds to a full sentence in a human language. A program is simply a list of statements.

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

Words with a special meaning, such as var, are keywords, and they may not be used as variable names. There are also a number of words that are “reserved for use” in future versions of JavaScript. These are also officially not allowed to be used as variable names, though some JavaScript environments do allow them. The full list of keywords and reserved words is rather long.

break case catch class const continue debugger default delete do else enum export extends false

What is control flow, and why is it useful for programming? The control flow is the order in which the computer executes statements in a script.

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