Front-End Curriculum Pre-work

MikeDuke_Prework.md

Codepen Link

https://codepen.io/aithon/pen/VBxBWV?editors=1100#0

Chapters 1 and 2 from HTML and CSS: Design and Build Websites

1. The purpose of HTML code is to describe the structure of a website.
2. An HTML tag is a single set of characters within angle brackets. An element is both the opening and closing tag and any text in between.
3. We use attributes to provide additional information about the contents of an element.
4. The HTML head element contains information about a webpage. The title element appears inside the head and contains the name of the website, which will be displayed at the top of the browser window. The body element appears after the head and contains the information that will be displayed in the main browser window.
5. To view the source of a website in Chrome, command + option + U will open the source into a new window. Command + option + I will open the developer tools "drawer" where the HTML can be viewed under the elements tab.
6. • The link element provides a reference to an external resource, like a CSS style page.
   • The article element contains a self-contained composition that is intended to be independently distributable, like an article or blog post.
   • The em element is meant to contain text to be emphasized. It appears italicized by default.
   • The cite element is meant to contain the title of a work, like a book or movie.
   • The button element creates a clickable button.
7. An empty element is one that does not have any text in between the tags. They can be written as a single tag with a slash at the end.
8. Sematic Markup is a text element that is not intended to affect the structure of the webpage, only add information, like the article element.
9. The new semantic elements for HTML5 are article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, and time.

Chapters 3 and 4 of HTML and CSS: Design and Build Websites

1. An ordered list has numbers at the beginning of each list item. An unordered list has only bullet points by default. A definition list consists of a series of terms and definitions.
2. The "a" element is used to create a link to another website. It takes the attribute "href", where the website address is stored. Any text between the tags is what will appear on the page as a clickable. Finally, it takes a closing "a" tag.
3. To open a link in a new window, the "a" tag requires a "target" attribute with the value of "_blank".
4. To link to specific part of the same page requires the "a" tag, but the value of the "href" attribute must be the id name of the section where the user should go preceded by a hashtag.

Chapters 10, 11, and 12 of HTML and CSS: Design and Build Websites

1. CSS allows us to control the styling of the content on a website.
2. CSS stands for Cascading Style Sheets. Cascading, in this instance, refers to how a CSS rule is prioritized. In the case of two identical selectors, the later will be prioritized. In other cases, the more specific selector will be prioritized.
3. A CSS rule is made up of a selector that corresponds to an HTML element, and a declaration, which consists of property/value pairs surrounded by curly brackets.
4. To link a stylesheet to an HTML document, you use the link element, which takes the attributes of href, type, and rel.
5. It is more common to use external stylesheets as opposed to internal. With an external sheet, the sheet can be shared across several html documents, the HTML will be easier to read, and the styling will be easier to change even within the same HTML document.
6. A color hex code is a six digit code (beginning with a hash tag) that represents the amount of red, green, and blue are in a single color.
7. HSL stands for hue, saturation, and lightness.
8. Fonts come in serif, sans-serif, and monotype.
9. Font size is measured in pixels, percentages, and ems.

Chapter 7 from HTML and CSS: Design and Build Websites

1. The type attribute controls the behavior of an input element.
2. The element to create a dropdown list is "select".
3. In order to send a form to a server, the type attribute of the input element should be "submit".
4. The fieldset element groups similar items together in a form.

Chapters 13 and 15 from HTML and CSS: Design and Build Websites

1. A border is the area around a box that separates the edge of one box from another. The margin is the area around the box, which will set the spacing between box borders. Padding is the area inside the box between the border and the content.
2. For a CSS property like padding, the first value is the top, the second is the right side, the third the bottom, and the fourth the left side of a box.
3. Block level elements create a new line while inline elements sit within a block level element and do not create a new line.
4. Elements in fixed position do not move when a page scrolls and do not effect the surrounding content. The z-index property is important in this case because it controls which element appears on top of another.
5. A fixed layout uses a layout that does not change when the shape of the browser window changes. A liquid layout does change.

Chapter 5 from HTML and CSS: Design and Build Websites

1. The alt attribute is important because it provides a text description of the image for screen readers and search engines.
2. The placement of the img tag in relation to a block element determines whether the image is inline or block.
3. A jpeg file is best for images with lots of color like photographs. A png file is best for logos or other images that have fewer colors or large areas of a single color.

Chapter 16 from HTML and CSS: Design and Build Websites

1. Setting the width and height of an image in CSS means that you can use a standard size and use that code over and over again.
2. An image sprite is an image that is used repeatedly for different parts of a website, like a logo. These are useful because the website only has to load the image once.

Chapters 1 and 2 from Eloquent JavaScript

1. In JavaScript, numbers are numerical values, booleans are the values true and false, and strings are a value meant to represent any text, surrounded by quotes.
2. JavaScript supports the logical operators and, or, and not, which are represented by &&, ||, and ! respectively.
3. A variable name can be anything that is not a reserved keyword as long as it does not include spaces or punctuation and does not start with a digit. $ and _ can be used.
4. An expression evaluates to a value but does not need to be completely executable. A statement is a unit of executable code.
5. Let, const, and for are examples of reserved keywords. These either cannot be used as variable names or should not be used in order to avoid confusion.
6. Control flow is the order in which statements are executed in a program. This allows a programmer to predict--and change, if need be--the order that operations will be executed.

Chapter 3 from Eloquent JavaScript

1. In the case provided, simply typing sayHello will output the function code, while typing sayHello() will execute the function.
2. The keyword return is used to define the value that a function returns, or makes available outside the function. It also stops the execution of the function.
3. Function parameters are variable declarations that can be used in a function but do not yet have a set value, as that value will be included in the function call.
4. The name of a function can be the same as any variable name, but it must be defined in such a way as to indicate that it is a function (function declaration, function expression, etc.)

5 Questions from Daily UX Crash Course

1. How much does the user have to do to get what they want? Expedia, AirBnB
2. Are you being clear and direct or is this a little too clever? University of Colorado at Denver, USA dot gov
3. Does it communicate the purpose and function without words? KingSoopers, YouTube
4. Does (the copywriting) reduce anxiety? Arapahoe Community College, Target
5. Can you use analysis to make improvements? United States Congress