BenPorter_Prework.md

Day One

Chapters 1 and 2 on Structure and Text from HTML and CSS: Design and Build Websites

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

• HTML is used to provides/describes the structure of a web page. It dictates how browsers will display the elements of a page.

2. What is the difference between an element and a tag?

• Opening and closing tags are like containers that tell you something about the information between them. They are the markers that an element is starting or ending.Elements are comprised of the opening and closing tags as well as any content that lies between.

3. Why do we use attributes in HTML elements?

• Attributes provide additional information about the element. Attributes consist of the attribute name as well as the attribute value. These tell the browser something specific about how to handle the element.

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

• The HTML head element provides information about the page that will not be shown within the main browsing window. The head often contains elements like title, or the linking to your css doc. The title element is displayed above the url block or in the tabs of a browser. The body element is everything that will be displayed in the main browser window.

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

• You can view the source code of a page with command + option + u or by going to view > developer > view source code.

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

• <h1></h1> is a heading 1 element, and it represents the heading on a page. There are 6 heading elements which allows you to dictate size, font, etc. depending on what is needed for the heading and sub heads. <b></b> is an element used to set text to bold. All text between the tags will be displayed as bold. <i></i> is an element used to set text to italic.<sup></sup> is an element used to set text to a super script, raising a number to the power of 2 for example. <sub></sub> is an element used to set text to a subscript, chemical formulas are a good example of this.

7. What are empty elements?

• Empty elements are elements that do not have words between the opening and closing tags. Many empty elements do not have opening or closing tags, but rather one tag. The <br /> break tag is an example of a single tag empty tag.

8. What is semantic markup?

• Semantic markups are text element not intended to affect the structure of a web page, but do add additional information to the page.

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

• The three new semantic elements introduced in HTML 5 are , <header>, <nav> or navigation, and <article>.

CodePen Page

https://codepen.io/bbp5280/pen/MoEEJe?editors=1100

Day 2

Read Chapters 3 and 4 on Lists and Links from HTML and CSS: Design and Build Websites

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

• Ordered list are numbered and are used when order is important. A step by step guide to building a deck would need an ordered list. Unordered lists are bulleted list in which the order does not matter. Definition list are used for a list of terms with the definitions of those terms.

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

• <a href =“www.otherwebsite.com”> other website </a>

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

• The attribute to open a link in a new tab is target=“_blank”.

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

• When linking to a part of the same page, the elements in which you wish to link to must have id attributes. The link would be <a href=“≠id”>link text</a>

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

1. What is the purpose of CSS? -CSS is used to provide the styling of HTML elements. This creates the look, feel, and beauty of a page.
2. What does CSS stand for? What does cascading mean in this case?

• CSS stands for Cascading Style Sheet. The cascading refers to the fact that as the sheet is read/cascades from top to bottom the lowest style on a page will take effect. If an element only has one style that will be the style in effect, however if an element was given 2 color styles the color lower on the style sheet would be the color displayed.

3. What is the basic structure of a CSS rule?

• CSS rules are made up of a selector which identifies the HTML element being targeted, and a declaration which refers to the style to be applied. The Declaration is made up of property and value. Property being the aspect of the element you want to change and value being the specific setting like color.

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

• To link a CSS stylesheet to an HTML page the <link> element must be used and should be in the header. <link href=“location and name of style sheet” type=“text/css” rel=“stylesheet”>

5. What is it useful to use external stylesheets as opposed to using internal CSS?

• The main reasons to use a stylesheet rather than internal CSS are to allow multiple pages to use the same style rules, it keeps the content and the styling separate, and allows you to make global changes that will affect all pages with that style sheet rather than changing each page individually.

6. Describe what a color hex code is. -A color hex code represents the values for red, green, and blue as a hexadecimal code. Hex codes start with # and are 6 characters long. Characters can be a combination of numbers and letters only.
7. What are the three parts of an HSL color property?

• The three parts of an HSL color property are hue, saturation, and lightness.

8. In the world of typeface, what are the three main categories of fonts? What are the differences between them? -The tree main categories of font are serif, sans-serif, and monospace. Serif fonts have serifs on them. These are extra details at the ends of the main stroke. Sans-serif fonts do not have serifs on them. They have straight ends to the letters. Monospace font put every letter to a set fixed width. Non monospace fonts have different widths for letters.
9. When specifying font-size, what are the main three units used?

• The three main units used in font size are pixels (the number of pixels), percentages (the percent in relationship the the default of 16px), or Ems (size equivalent to the width of the letter m).

Day 3

Read Chapter 7 on Forms from HTML and CSS: Design and Build Websites

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

• The type attribute controls the behavior of an input element.

2. What element is used to create a dropdown list? -The <select></select> element is used to create a dropdown list.
3. If you're using an input element to send form data to a server, what should the type attribute be set to? -When sending data to a server the type should be set to text for a text field, password for a password field, radio for radio buttons, checkbox for check boxes, submit for the submit button, or image for an image button.
4. What element is used to group similar form items together?

• When grouping similar form items together you should use the <fieldset></fieldset> element.

##Read Chapters 13 and 15 on Boxes and Layout from HTML and CSS: Design and Build Websites

1. Describe the differences between border, margin, and padding.

• Borders it the outside edge of a box or container. It is the line visible or not that separates the edge on one box from another. Margin sits outside the edge of the border. You use margin to create space between the borders of two adjacent boxes. Padding is the space inside the box between the border and the contents of the box. It is used for readability and visuals.

2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? -The sides corresponding with the above padding would be: top 1px, right 2px, bottom 5px, and left 10px.
3. Describe the different between block-level and inline elements.

• Block-level elements are elements that start on a new line and stack on one and other, while inline elements flow between surrounding text, or stack along the line.

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

• Fixed positioning positions elements in relation to the browser window. The element will stay in the same place on the screen even as the page is scrolled. Because of this z-index if important for ensuring that the element in a fixed position stays the front.

5. What is the difference between a fixed and liquid layout?

• Fixed layouts have a fixed size. They don not adjust to browser window size or a change in screen size or resolution. Liquid layouts expand and contract based on screen size, window size, and resolution.

Day 4

Read Chapter 5 on Images HTML from HTML and CSS: Design and Build Websites

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

• An image element is a empty element that allows the display of an image. It is made up of the src with is the url in which the image can be found, title which adds a tool element that will display the title upon hovering on the image, and alt text. The alt text is a description of the image and is very important as screen readers use it to inform about the image as well as search engines use it as part of indexing your site.

2. What determines if an image element is inline or block? -The placement of the image element dictates if an image is inline or block. If the image is followed directly by a block like a <p> tag, then the image will be a block element. If the image element is placed within an inline element the inline elements around it will wrap around the image.
3. What are the benefits of jpg or png image file formats?

• When using image elements the file format should be dictated by the image. Full color or detailed images like pictures should be jpg as it has a full color pallet and minimal compression of details. An image that is not a picture such as a logo files like a png should be used. In these cases the decreased color pallet is not likely to affect the look, as well as having the ability to have a transparent background can be helpful.

Read Chapter 16 on Images CSS from HTML and CSS: Design and Build Websites

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

• By providing the size of an image the html and css are able to continue loading while holding the proper sized space in the page. The benefit to doing this in CSS vs. HTML is when done in CSS you can set global rules for different images. This allows you to set standard sizes, and floats for images. The result is to not have to handle each image individually on each page.

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

• An image sprite is when one image is used to display different states of a button. By creating one image that carries all 3 states of a button and restricting it so only one state shows at a time allows your browser to manage 3 states of a button with just one image, rather than having to manage multiple images.

Day 5

Read Chapters 1 and 2 (Data Types, Variables, and Control Flow) from Eloquent JavaScript: A Modern Introduction to Programming

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

• Values that are numbers are numeric values. They are written as arabic numerals are, fractions are designated with a . Ex) 12.25. For very large and very small numbers scientific notation can be used. The main use for numbers is arithmetic. -Strings are used to represent text and enclosed in quotes. You can use \ notation to indicate the character after it has a special meaning.
• Booleans are values of either true or false.

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

• JS supports the 3 logical operators of and, or, and not. All values in an and statement must be true to be true, if either value is true in an or statement it will be true, and not is a quarry operator which flips the statement.

3. What is the naming convention used for variables? -The naming convention for variables is var to indicate a variable is going to be defined, followed by the variable name and often immediately given a value.
4. What is the difference between an expression and a statement?

• An expression is a fragment of code where a statement is produces or create something. Expressions are comparable to a sentence fragment where statements are complete sentences.

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

• Some examples of reserved words are, break, debugger, function, and it is important to avoid them in variable names as they will not work. They are designated for another purpose in the JS environment and are meant to be used for that purpose.

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

• Control flow is the order in which statements are executed. This is useful in programming for making more complex and conditional programs.

Day 6

Read Chapter 3 (Functions) from Eloquent JavaScript: A Modern Introduction to Programming

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?

• The difference is you must use sayHello() to invoke the running of the function.

2. What is the keyword return used for?

• The keyword return is used to set a value to be returned as in if you would like a specific string returned after a logical operator is evaluated.

3. What are function parameters?

• Function parameters are values given by the caller and not the code in the function.

4. What is the naming convention used for function names?

• The naming convention for a function is to declare a variable name that is then = function (parameters) {nuts and bolts for the function}