Prework for Front-End Program at Turing

KatieScruggs_Prework.md

HTML and CSS: Design and Build Websites

Questions over Chapters 1 and 2

1. The purpose of HTML code is to describe the structure of webpages.

2. The difference between an element and a tag is that a tag refers only to the brackets and characters, while an element is comprised of the opening tag, the closing tag, and everything in between.

3. We use attributes in HTML to provide more information about elements.

4. The purpose of the head HTML element is to contain information about the page. The purpose of the title HTML element is to give the website a title, shown in the top of the browser or on the tab for that page. The purpose of the body HTML element is to contain all of the text and markup that is displayed on the website.

5. In my browser (Chrome), I view the source of a website by pressing Cmd-Opt-I.

6. Five different HTML elements and what they are used for: h1 is a title element, and it is used to represent the main heading of a page. h2 is a title element, and it is used to represent a 2nd level heading of a page. h3 is a title element, and it is used to represent a 3rd level heading of a page. b makes words appear bold. i makes words appear italic. sup makes characters appear as superscript.

7. Empty elements are elements that do not have any words between opening and closing tags.

8. Semantic markup refers to text elements that do not affect the structure of web pages but do add extra information.

9. New semantic elements introduced in HTML 5 are header, footer, main, and nav.

Link to CodePen:

https://codepen.io/katiescruggs/pen/dzoGXx?editors=1000

Gear Up: Empathy Reflection

Empathy has played a large part in my professional life. As a teacher, I was able to understand my students through empathy, and because they felt understood, I developed good working relationships with my students and was able to ask them to do work that they did not want to do. This will translate into my career as a developer because empathy helps people build better software by being able to imagine the user's experience and pre-emptively solve problems that the user might encounter. In Turpault's article "Why Is Empathy Essential for Design?", he describes how using empathy allowed him and his team of researchers to create innovative products.

Empathy is also important for working on a team. Everyone wants to feel listened to and understood. I remember having a tense discussion with one of my teacher colleagues while we were developing a lesson. Through using empathy, I was able to put myself in her shoes and realized that she felt afraid of implementing changes because she had done this lesson in a certain way for years. I explained to her that I understood that trying new things was frightening, and she laughed nervously and visibly relaxed. Feeling understood helped her to feel safe in our conversation. It is sometimes still difficult for me to feel empathy and respond calmly when I am given professional criticism. I have worked on this, and will continue to not take criticism on my work personally.

HTML and CSS: Design and Build Websites

Questions over Chapters 3 and 4

1. Ordered lists in HTML are numbered. Unordered lists have bullet points. Definition lists are made up of terms along with a definition for each (dt and dd).
2. The basic structure of an element used to link to another website is a href = "website_URL" in an opening tag, then typing the text that will be highlighted as a link, then closing the a tag.
3. To open a new tag when the link is clicked, include the attribute target="_ blank".
4. To link to a specific part of the same page, you can set the value of an href attribute to #id, where id is the vlaue of an id attribute to a section of the page.

HTML and CSS: Design and Build Websites

Questions over Chapters 10, 11, and 12

1. The purpose of CSS is to describe how the page should be designed (colors, layout, etc.)
2. CSS stands for "Cascading Style Sheets." In this case, cascading refers to the order in which rules are applied to the same element. Last rules, most specific rules, and most !important rules will take precedence.
3. The basic structure of a CSS rule is: selector { declarion; } where the selector describes which element the rule applies to, and the declaration indicates how the element(s) should be styled.
4. You link a CSS stylesheet into an HTML document by using a link element with an href attribute to tell the browser where to find the CSS file. There should also be a type attribute = "text/css" and a rel attribute = "stylesheet".
5. It is useful to use external stylesheets as compared to using internal CSS because it allows all pages to use the same style rules rather than repeating them, it keeps content separate from design, and it means that if you want to change the background color of all of your pages, you only have to change it in one place.
6. A color hex code is a hash symbol and six-digit code that represents the amount of red, green, and blue in a color.
7. The three parts of an HSL color property are hue (color), saturation (how much gray is in the color) , and lightness (how much white / black is in the color).
8. The three main categories of fonts are serif (have extra details on the ends of the main strokes of letters), sans-serif (have straight ends to the letters, no serifs), and monospace (every letter is the same width).
9. When specifying font-size, the main three units used are pixels (px), percentages (%), and ems (em).

HTML and CSS: Design and Build Websites

Questions over Chapter 7

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

HTML and CSS: Design and Build Websites

Questions over Chapters 13 and 15

1. The border separates the edge of one box from another. The margin sits outside the edge of the border (can create gaps between the borders of two objects that are next to one another). The padding is the space between the border and the content of the box.
2. For padding: 1px 2px 5px 10px, the padding at the top of the box is 1px, the right is 2px, the bottom is 5px, and the left is 10px.
3. Block-level elements start on a new line. Inline elements appear in the same line, flowing between surrounding text.
4. Fixed positioning is a form of absolute positioning that positions elements in relation to the browser window. These fixed position elements do not move when the user scrolls up or down the page. Z-index allows you to control which elements appear on top when this overlap occurs.
5. With a fixed layout, designs do not change size as the user increases or decreases the size of the browser window. With a liquid layout, designs stretch and contract as the user increases or decreases the browser window.

HTML and CSS: Design and Build Websites

Questions over Chapter 5

1. The alt attribute is important in an image element because it provides a text description for if a user cannot see the image. This is used by screen reader software for people with visual impairments and search engines. It is also hepful to have the text description in case hte image fails to load.
2. Where an image is placed in the code determines if it is inline or block. If an image element is followed by a block level element, then the block level element will sit on a new line after the image. If an image element is placed within a block level element, then the image will be inline.
3. JPEG files are good for images with many different colors. PNG files are good for images with few colors or large areas of the same color, and PNG files are able to have transparent parts.

HTML and CSS: Design and Build Websites

Questions over Chapter 16

1. The benefit of specifying the height and width of images in CSS rather than in HTML is that you can specify that many images have the same dimensions without repeating code.
2. An image sprite is a single image used for several different parts of an interface. It is useful because the web browser only needs to request one image, which is faster than requesting several.

Eloquent JavaScript: A Modern Guide to Programming

Questions over Chapters 1 and 2

1. The three big data types in JavaScript are numbers, strings, and booleans. Numbers are numeric values, strings are text characters, and booleans store a value of true or false.
2. The three logical operators that JavaScript supports are and, or, and not.
3. The naming convention used for variables is camelcase: lower letter at the beginning of the variable name, no spaces, and capitalize the first letter of each subsequent word (ex. toasterOven).
4. An expression is a piece of code that produces a value. Every value is an expression. A statement is an expression with a semicolon after it (usually more than just a value).
5. JavaScript reserved words include var, break, continue, null, try, typeof, and this. It's important to avoid using them as variable names because they hold meaning alone and trying to use them as variables would have unintended consequences.
6. Control flow refers to the order in which statements are executed in a program. It is useful to control under which circumstances a statement is executed and how many times a statements is executed with if statements, while loops, do loops, and for loops. These methods prevent repeated code and allow more complicated program structures.

Eloquent JavaScript: A Modern Guide to Programming

Questions over Chapter 3

1. Entering sayHello and sayHello() into the console have different meanings. sayHello is just the name of the function, which can be used to reassign the function's value. sayHello() calls the function, which means that the code inside the function will be executed.
2. The keyword return is used to return a value from a function.
3. Function parameters are variables that are given their initial value when the function is called, not in the function itself.
4. Functions are named with the same naming conventions as variables.