Prework for front-end curriculum

ArramMandel_prework.md

This is my first gist

Day One

HTML and CSS: Design and Build Websites: Ch. 1 and 2 questions:

1. The purpose of HTML code is to provide structure for the webpage.

2. An element contains the content of the webpage and tells the browser information about the content. Each element consists of tags, usually an opening and a closing tag. The tags act like containers.

3. We use attributes because provide additional information about the content inside the element.

4. The head contains information about the page itself. The title is put within the head. It appears at the top of the window or tab, depending on which one you are using. The body contains all the content displayed inside the main browser window.

5. To view the source in chrome, you do a two-fingered click and select "view page source" from the pop-up menu.

<h1></h1> used for the largest, main heading. <b></b> context inside this element will be bold. <br /> this element is called break. It makes a line break within a paragraph. <hr /> this element is a horizontal rule. It creates a horizontal line break between sections. <i></i>this element makes the content between in italic.

7. Empty elements are elements with no words between the opening and closing tags. They usually only have an one tag which has a space a forward slash before the end of greater than sign.

8. Semantic Markup is add information to the page without affecting the overall structure. One example is the <em> element which allows you to place emphasis on words.

9. Three new element introduced in HTML5 are the <nav> element which contains the navigational blocks of the site, the header element which contains the site name and the navigation part and the <article> element which generally contains any section of the page that could stand on its own and be syndicated.

Codepen first project: https://codepen.io/Airum82/pen/EowvmQ

Empathy Section

1. Empathy has helped me understand people whenever they have angered me through my life. When I was teaching 6th grade, the students would anger me often. I had to think about what was going through their heads. Upon doing so I would become less angry because I would remember what's important to them and that at 12 years old it's not their fault that they're a certain way. Additionally it helps me whenever a friend is unresponsive or cancels plans continuously. I remember times when I was caught up in life and ignored people and it usually leads to me forgiving them.

2. I watched a video recently where someone said that it doesn't matter how good your website is if no one use it. No one will use it if you don't attune it to what they need. From the article I read, having empathy and listening to what someone needs will allow you to make software that better suites them. People will buy and use what they need and having empathy lets us figure out exactly what that is.

3. Empathy is important when with a team because it helps you understand your teammates more. You'll spend a lot of time arguing and not moving forward if you do not understand each other. Also it will allow you to listen to them more which is useful because they could have high quality design ideas. You may also be able to help them out if they are struggling with their code on a group project and thus make the project easier on yourself.

4. Empathy has helped me understand a teammate when I was in college and vice president of my fraternity. Our president has personal issues and thus was unreachable at times. This proved problematic during events. I realized that I did not have the same issues and could not necessarily understand what he is going through. I knew he was a hard worker though and that it must be serious if he is not showing up. I did my best to lead the events in his absence and would fill him in later.

5. Currently I work in an optometry office where we sell glasses and contacts as well as provide eye exams and other medical services. I find it hard to empathize at times when customers are being difficult. I need to remember that they are here because they have problems seeing and they are waiting on a device that helps them see. I show patience and do what I can to help fix their problem. Trying to empathize with someone may not work immediately but having patience and being solution focused can improve your ability.

Day 2

Ch. 3 and 4 of HTML and CSS

1. Ordered lists are generally numbered or organized in some other way and contains things such as steps for a recipe or building an object. Unordered lists are just that: they generally are a set of items with bullet points such as a shopping list. Definition lists contain sets of terms along with their respective definitions.

2. The basic structure of the hyperlink element is the <a> which contains an "href" attribute. You can clink on whatever is between the opening and closing tag to go to the website.

3. If you want the link to open a new tab, you must include the "target" attribute in the opening tag.

4. When creating a link to another part of the same page, you must set the href equal to an "id" attribute. You can give any element an "id" attribute. Upon clicking the link it will send you to the part of the page with that "id" attribute.

Ch.10, 11 and 12 Questions

1. If HTML is the bones of your webpage then CSS is the skin. CSS controls how your webpage will appear.

2. CSS stands for Cascading Style Sheet. Cascading means that when more than one rule applies to the same element. One rule takes precedence over the other based on certain factors.

3. Within a CSS rule there is a selector and a declaration. Within the declaration there is a property and a value.

4. To link a CSS sheet to an HTML document or use "external CSS", you must create a link (usually within the head) that contains the href, type and rel. For internal css, simply enter in a style element indicating the type as "text/css".

5. External CSS is useful because it allows you to apply the same CSS to multiple HTML docs simply using a link. This outcome means less code overall which is more efficient. Also if you wish to change the CSS multiple HTML pages then you only need to alter one document.

6. A color hex code is a 6 digit code that describes the amount of red, green and blue in a certain color. It always starts with a "#" sign.

7. The three parts of the HSL color property are: hue, saturation and lightness.

8. In Typeface, the three main categories of fonts are Serif, which has extra details on the ends of the main strokes of the letters, Sans-serif, which has straight ends to letters and Monospace which has a fixed width for all letters.

9. The three main unites of measurement for font-size are pixels, percentages(percentage of 16px) and EMS(equivalent to the width fo the letter m).

Day 3

Ch. 7

1. The type attribute controls the behavior of the input.

2. The "select" element is used to create a dropdown list.

3. To send form data to the server, the type element should be set to "submit".

4. The "fieldset" element is used to group related form controls together.

codepen link: https://codepen.io/Airum82/pen/EowvmQ

Ch. 13

1. Border separates the edge of one box from another. Margin can increase the space outside the border. Padding can increase the space inside the border.

2. The padding: 1px 2px 5px 10px would correspond to each side of the figure in clockwise order. There for 1px for top, 2px for right, 5px for bottom and 10px for left.

3. Block elements will each appear on new lines, whereas inline elements will appear on the same line.

4. When using fixed positioning one or more boxes can overlap. In this scenario the z-positioning controls which box appears on top. It is an important tool when deciding which box you want to be visible at all times.

5. A fixed layout is a set size and the content will not change depending on the browser or screen size. A liquid layout will stretch or shrink to the size of the browser or screen.

codepen link: https://codepen.io/Airum82/pen/EowvmQ

Day 4

Ch. 5

1. The alt attribute is used to provide a text description of the image if you cannot see it.

2. The image will be block if it is not within any block elements. It will be inline if it is inside a block element such as a paragraph.

3. A jpeg file is better when you have an image with many colors such as a photo of a landscape. If you're using an illustration or another image with few colors or a large part of it is the same color, it's better to save as png.

Ch. 16

1. By using a class and specifying width and height in CSS rather than HTML. You have a set width and height within the class that you can apply to multiple images instead of typing in the desired width and height every time.

2. An image sprite is an image that is used multiple times for different parts of the interface. It is advantageous because then the webpage only has to load one image instead of several which makes the webpage load faster.

Day 5

Eloquent JS Ch. 1 and 2

1. Within Javascript, numbers are numerical values. If you type in 9, the computer will store the pattern for 9. Another data type is strings, which are just to represent text. They are numbers or letters written between quotation marks. Almost anything can be written as a string. The third major data type is boolean. They are values that are compared and can only be true or false.

2. The three logical operators that Javascript supports are "and", "or" and "not".

3. To name a variable, one method is to simply type "var" and then decide a name and set if equal to a value. One example is var cards = 5. The variable cards is now equal to 5.

4. Any fragment of code that produces a value is an expression. 1; is an expression. A statement is one or more expressions that affect the "world". A group of statements are what make up a program.

5. Keywords are words that cannot be used as variables because they already have a separate meaning. One example is "if". "if" cannot be used as a variable because it already is used as the start of an if then statement.

6. Control flow is the order in which statements are executed. Control flow is usually from top to bottom but if/then statements and loops can alter it somewhat. It is useful because to make your program work properly, you must understand the order that the computer will execute the statements.

Day 6

Ch. 3

1. Sayhello does not mean anything to the computer and is just an undefined variable. You must type in Sayhello() for the computer to recognize it as a function.

2. Return command determines the value of a function or variable.

3. Parameters are independent variables or arguments that you plug into the function. A function can have multiple parameters or none at all.

4. When naming variables in functions, it is important to have straightfoward names and express concepts. Additionally it's best to keep the name short and not be too clever.

Day 7

UI/UX

1. What habits are created if they do this over and over? https://www.wikipedia.org/ This website has constant links that make it easy to go to new articles anytime the user find an unknown term.

http://art.yale.edu/ This websites links are unclear and inconsistent in the pages they take you too. There's a lot of things wrong with this site.

2. Are you being clear and direct, or is this a little too clever?

https://www.dominos.com/en/ This website has clear links and immediately gives you options for ordering.

http://www.uat.edu/ This website is trying to be too clever and should not make the swirling images so hard to click.

3. Do users think it looks good? Do they trust it immediately?

http://www.clarksusa.com/us/ This website has clear links and does not overwhelm the eyes.

http://www.arngren.net/ This website has a ridiculous amount of content on the front of it and far too many links put together.

4. Does it sound confident and tell the user what to do?

https://www.virginamerica.com/ This website has a straightforward design with the most common options in plain site and easy to find.

http://www.suzannecollinsbooks.com/ Website does not appear confident or have the most straightforward layout. Links are strange sizes.

5. Are you looking for bad results too? Why not?

https://www.fiftythree.com/pencil This website has a contact info link as well as a support link. They are prepared for people to have problems with the webpage.

https://www.lingscars.com/ This website is not prepared for bad results given that if you scroll down past the car links you hit a giant amount of blank space. Also if they ask user opinion they would have changed a few things by now.