1703 Prework

ChristieLynam_prework.md

Day 1

HTML and CSS

1. On a website, what is the purpose of HTML code? {page structure}
2. What is the difference between an element and a tag? {elements are composed of the characters within the <> and usually consists of 2 tags (opening <> and closing </ >); tags act like containers... they tell you something about the information that lies between their opening and closing tags}
3. Why do we use attributes in HTML elements? {attributes provide additonal information about the contents of an element; they appear in the opening tag of the element and are made up of a name and value, separated by an equals sign}
4. Describe the purpose of the head, title and body HTML elements. {head: contains information about the the page; title: usually sits within the head element and appears in the title bar (or tabs) at the top of the browser window; body: everything inside this element is shown in the main browser window}
5. In your browser (Chrome), how do you view the source of a website? {in browser menu, select View > Developer > View Source}
6. List 5 different HTML elements and what they are used for. {<h1> thru <h6>: 6 levels of headings; <p>: create paragraph; <b>: bold; <i>: italicize; <br />: line break; <hr />: adds a horizontal line between sections}
7. What are empty elements? {consists of only 1 tag with a space and forward slash before the closing angled bracket}
8. What is semantic markup? {text elements that do not affect the structure of web pages, but add extra information to the pages; describes the content of your web pages more accurately}
9. What are 3 new semantic elements introduced in HTML 5? {<header>, <footer>, and <nav>}

CodePen

https://codepen.io/clynam/pen/gmgRGY

Gear Up

Empathy makes us better designers... more helpful and generous

Important in navigating interpersonal issues... enables people to communicate better with each other and to function more effectively as a team

Empathetic listening changes the listener... enhances your ability to receive information

Day 2

HTML

1. There are 3 main types of lists in HTML: ordered, unordered, and definition. What are their differences? {ordered: each list item is numbered; unordered: each list item begins with a bullet point; definition: a set of terms and their definitions}
2. What is the basic structure of an element used to link to another website? {<a href="link">Text</a>}
3. What attribute should you include in a link to open a new tab when the link is clicked? {target}
4. How do you link a specific part of the same page? {# followed by the id attribute of the element you want to link to}

CSS

1. What is the purpose of CSS? {styling}
2. What does CSS stand for? What does cascading mean in this case? {cascading style sheet; cascading means that styles can fall (or cascade) from 1 stylesheet to another, enabling multiple stylesheets to be used in 1 HTML document}
3. What is the basic structure of a CSS rule? {a CSS rule contains a selector and a declaration; a declaration is inside curly brackets and consists of a property and a value}: p {font-family: Arial;}
4. How do you link a CSS stylesheet to your HTML document? {<link href="css/styles.css" type="text/css" rel="stylesheet" />}
5. Why is it useful to use external stylesheets opposed to internal stylesheets? {allows all pages to use the same style rules; leeps the content separate from hoe the page looks; you can change the styles used across all pages by altering just one file}
6. Describe what a color hex code is. {six digit codes that represent the amount of red, green, and blue in a color; begins with a #}
7. What are the 3 parts of a HSL color property? {hue, saturation and lightness}
8. In the world of typeface, what are the 3 main categories of fonts? What are the differences between them? {serif, sans-serif, and monospace}
9. When specifying font-size, what are the main 3 units used? {pixels, percentages, and ems}

Day 3

HTML

1. If you're using an input element in a form, what attribute controls the behavior of that input? {type}
2. What element is used to create a dropdown list? {select}
3. If you're using an input element to send form data to a server, what should the <type> attribute be set to? {submit}
4. What element is used to group similar form items together? {fieldset}

CSS

1. Describe the differences between border, margin, and padding. {the border separates the edge of one box from another; margins sit outside the edge of the border; padding is the space between the border of a box and any context contained within it}
2. For a CSS rule padding: 1px 2px 5px 10px, what side of the content box does each pixel value correspond to? {1px: top; 2px: right; 5px: bottom; 10px:left}
3. Describe the difference between block-level and inline elements. {block-level elements appear on different lines; inline elements appear on the same line}
4. 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 poaitions the element in relation to the browser, as opposed to the containing element; elements with fixed positioning do not affect the position of surrounding elements and they do not move when the user scrolls up or down the page; the z-index property allows you to control which box appears on top}
5. 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; liquid layout designs stretch and contract as the user increases or decreases the size of their browser window}

Day 4

HTML

1. In an image element, why is the alt attribute important? {provides a text description of the image which describes the image if you cannot see it}
2. What determines if an image element is inline or block? {inline elements sit within a block level element and do not start on a new line; block elements always appear on a new line}
3. What are the benefits of jpg or png image file formats? {JPEG should be used whenever you have many different colors in a picture; PNG should be used when saving images with few colors or large areas of the same color}

CSS

1. What is the benefit of specifying the height and width of images in CSS compared to specifying them in HTML? {whenever you use consistently sized images across a site, you can use CSS to control the dimentions of the images instead of putting the dimentions in the HTML}
2. What is an image sprite, and why is it useful? {when a single image is used for several different parts of an interface; it is useful because the web browser only needs to request one image rather than many images, which makes the webpage load faster}

Day 5

JavaScript

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

• numbers: numeric values; often used to perform arithmetic
• strings: text; enclosed by quotes
• booleans: has only 2 values (true and false)

2. What are the 3 logical operators that JavaScript supports?

• and, or, and not

3. What is the naming convention used for variables?
4. What is the difference between an expression and a statement?
5. What are a few JavaScript reserved words, and why is it important to avoid using them for variable names?
6. What is control flow, and why is it useful for programming?

Day 6

JavaScript

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?
2. What is the keyword return used for?
3. What are function paramaters?
4. What is the naming convention used for function names?