BenFirth Mod 0 1908 Capstone

BenFirth-mod-0-capstone.md

Mod 0 Capstone

Benjamin Firth

My Codepen Link: https://codepen.io/bfirth1/pen/gVbrEX

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

• On a website, HTML is the basic building block to structure the look and layout of the webpage.

What is the difference between an element and a tag?

• A tag is the opening and closing code for an HTML "block". The element is the whole combination of opening tag, some kind of content, andd a closing tag.

Why do we use attributes in HTML elements?

• Attributes control the look and behavior of an element.

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

• The "head" tag is a container for all head elements. This can include "title" (this element is required in an HTML document), "style", "base", "link", "meta", "script", and "noscript."

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

• The keyboard shortcut to find the source code is option+command+u.

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 is the highest level section header, div is the generic container for content, li is used to represent an item in a list, ul represents an un-ordered list of items, img imbeds an image into the webpage, and botton represents a clickable button.

What are empty elements?

• An empty element is an element tag that can't have any child (think nested) tags within it. Additionally, it usually doesn't have a closing tag. img is a good example.

What is semantic markup?

• Semantic markup is HTML that introduces meaning as well as a presentation.The p tag is a good example of this, as it shows as a paragraph, and people generally know what that is. This makes the website easier for text readers, search engines, etc.

What are three new semantic elements introduced in HTML 5?

• 3 new Semantic tags in HTML 5 are header, footer, and nav.

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

• Unordered list — used to group a set of related items in no particular order.
• Ordered list — used to group a set of related items in a specific order.
• Definition list — used to display name/value pairs such as terms and definitions.

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

• Inside an a teg, you'd reference href="whatever url you're linking to", Some sort of text to visibly click on, and then a closing a tag.

<a href="https://www.google.com">The Place of All Knowledge</a>

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

• You need an opening and closing a tag, an href attribute that links to the destination website, and link text.

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

• You need to create an ID before the part of the page you'd like to link to. Then you can reference that ID in your href attribute.

What is the purpose of CSS?

• It gives a standard way to define, apply, and manage styles for a website.

What does CSS stand for? What does cascading mean in this case?

• Cascading Style Sheets. Cascading means that styles can continue from one style sheet to another sheet, enabling multiple sheets in one website.

What is the basic structure of a CSS rule?

• A CSS rule consists of a selector (identifies what thing will get acted on) and a declaration (action or styling).

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

• You have to put a link to your css document between the head tags on the html document. It's best to put both files within the same directory.

When is it useful to use external stylesheets as opposed to using interal CSS?

• If you ahve multiple pages, or need faster load time, or desire better SEO external stylesheets are the method to go with.

Describe what a color hex code is.

• A way of specifying a color based on numbers instead of names. The code itself is a hex triplet, which represents three separate values that specify the levels of the component colors.

What are the three parts of an HSL color property?

• Hue, Saturation, and Luminence. Hue is the dominant wavelength (red, green, etc), saturation is the purity of the color or how much whiteness is in the color, luminance is the intensity of thge light in the color.

In the world of typeface, what are the three main categories of fonts? What are the differences between them?

• Serif, Sans Serif, and Display. Serif has "feet", Sans Serif doesn't, and Display typeface isn't suitable for the body text.

When specifiying font-size, what are the main three units used?

• Pixels, Ems, and Percentages.

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

• The form type. This controls whether it's a button, text, date, etc.

What element is used to create a dropdown list?

• The <select> element.

If you're using an input element to send form data to a server, what should the type attribute be set to?

• The input type should be set to "submit" to go to a form-handler.

What element is used to group similar form items together?

• <form> is used to create forms with grouped items within, though you can create subgroups using <div>.

Describe the differences between border, margin, and padding.

• Padding is the space that’s inside the element between the element and the border. Margin is the space between the border and next element. The border is a divider that goes around your element and it's padding.

For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?

• Padding goes in order of top, right, bottom, left. It's a circle. So 1px would be top, 2px would be right, 5px would be bottom, and 10px would be left.

Describe the difference between block-level and inline elements.

• A block-level element is an HTML element that begins a new line on a web page and extends the full width of the available horizontal space of its parent element. This is the case for most HTML elements like paragraphs, lists, etc. Inline elements can begin within a line, do not start a new line, and their width only extends as far as it is defined by its tags.

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

• Fixed positioning allows for elements to be "sticky." An example of this would be a nav bar that stays on the top right of the screen no matter how much you scroll. The Z-index allows for you to dictate which elements are on top of each other on the page.

What is the difference between a fixed and liquid layout?

• A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container or frame element is set to not move. Everyone will see the same size image of the website. In a liquid website layout the majority of the components inside have percentage widths, and adjust to the user’s screen resolution.

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

• The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, or if the user uses a screen reader). This is especially important for ADA compliance.

What determines if an image element is inline or block?

• They flow inline like text, but also have a width and height like block elements. Essentially inline elements with a width set. Basically you are free to dictate how you would like images to display using CSS.

What are the benefits of jpg or png image file formats?

• JPEG is a lossy raster format that stands for Joint Photographic Experts Group. They are typically used online, typically for photos, email graphics and large web images like banner ads. They do not have a transparency channel and must have a solid color background though. PNG is a lossless raster format that stands for Portable Network Graphics. They have built-in transparency, but can also display higher color depths, which translates into millions of colors. Since they're able to shrink really small, this file type is good if you need smaller files.

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

• When specifying images size in CSS you can apply it to multiple images without cluttering the script. It results in cleaner HTML.

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

• CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance. The main graphic is stored into memory, and then only displays parts of that image at a time, which is faster than having to continually fetch new images.

How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?

• To declare a variable, you declare it using the "var" keyword, followed by your variable identifier (or name). This is followed by an equals sign, which is actually an assignment operator and not an equals to operator. This means it assigns a process, numbers, or text to the variable identifier.

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

• Numbers are digits that can have mathematic functions performed on them. This could be a float or integer. Strings are text that can't be acted on mathematically. This means that if you have the number 5 as a string, it still can't be added. Boolean are true false statements.

What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?

• The first character must be lowercase.
• The first character must be a letter or an underscore (_).
• The rest of the variable name can include any letter, any number, or the underscore. You can't use any other characters, including spaces, symbols, and punctuation marks.
• Variable names are case sensitive.
• There's no limit to the length of the variable name.
• You can't use one of JavaScript's reserved words as a variable name. Examples of these are delete, else, if, etc.

How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?

• An array could be useful in an organizational standpoint. If you have towns and states, and countries, you could put towns in a specific array, as well as the others. This way you could pull the information you need from each region type array. You can then access individual items in the array using bracket notation, in the same way that you accessed the letters in a string. You can also modify an item in an array by simply giving a single array item a new value.

What is the difference between an expression and a statement?

• An expression is a instruction to be executed that returns a value (even if it returns a void). A statement is used to form the sequence of a program. A statement can be simple or complex and can contain expressions.

What are three types of operators and how are they used?

• Arithmetic Operators: Arithmetic operators are used to perform arithmetic between variables and/or values.
• Logical Operators: Logical operators are used to determine the logic between variables or values.
• Comparison Operators: Comparison operators are used in logical statements to determine equality or difference between variables or values.

If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?

• Using () after a function means to execute the function and return it's value.

• Using no () means to fetch the function to be passed along as a callback. A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

What is the difference between function parameters and arguments?

• Parameter is variable in the declaration of function, while an argument is the actual value of this variable that gets passed to function.

What is the keyword return used for?

• The return statement ends function execution and specifies a value to be returned to the function caller. A function immediately stops at the point where return is called. It can call on expressions and then give back or "return" the result.

How are local variables better than global variables? Are there instances you can think of where you might want to use a variable that is globally scoped over local?

• Global variables are declared outside any function, and they can be aused on any function in the program. Local variables are declared inside a function, and can be used only inside that function. Global variable increases the risk of a change in a single function causing a totally different part of the program to fail. When you write code using local variables, the call statement will tell you that this function depends on this particular data, so everything is traceable.
• If you share data with other functions, it may be best to use Global Variables so the data can be used elsewhere.

Gear-Up Reading Questions:

What role does empathy play in your life and how has it helped you?

• Empathy plays a large role in manya ctions I take throughout the day. Part of my current job is acting as a customer service representative. There are countless situations where I'm interacting with a frustrated customer, and according to a strict interpretation of our company policies I can't help them in a given situation. It takes listening to them, considering how I would feel in the situation, and compparing that to our company goals to make better decisions for both parties. I think this ultimately leads to better relationships with our consumers.

How does empathy help you build better software?

• In the software world, much of what you do has to be flashy and eye catching. However, with things like ADA compliance, many of these "flashy" things can make it very challenging for some people to read and understand using items like screen readers. By empathizing with something like this, you're better able to address the consumer population as a whole, and ultimately make a better product for everyone.

Why is empathy important for working on a team?

• It's easy to get stuck thinking that one way is better than another when discussing things with your work team. Empathy helps show where another person is coming from in their desires, which in turn adds another layer to the solution. People have so many different backgrounds and experiences, all of which are valuable and offer different insites.

Describe a situation in which your ability to empathize with a colleague or teammate was helpful.

• One day at work we had a lot of meetings (more than usual). One of my colleagues had voiced an opinion in an earlier meeting that was largely ignored, and I could tell it made them feel frustrated. As the day went along, they didn't really go out of their way to participate more after that first issue, so during our last meeting I made a point of reaching out to them specifically and asking what they thought about the situation. I believe that being given that specific attention made them feel more validated and part of the team, and afterwards they were a much more active participant.

When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?

• I find it challenging to feel empathy when faced with situations that test my feeling of fairness. It makes me feel a little left out which in turn makes me shut down a bit. I need to work more on using this empathy to understand the other persons point of view, so that even if I don't ultimately agree with it I atleast know where they're coming from.

UX Questions:

Psychology:

• What habits are created if they do this over and over?
• Supporting website: www.facebook.com / THis websites scroll feature makes a user keep repeating it, and with this repetition the user gets more exposure to adds and content they want.
• Violating website: https://bikemag.com/ / This website creates a new tab everytime you click on a link. This directs you away from the website, and develops the habit of the user not staying on the website.

Usability:

• Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
• Supporting website: www.thehill.com / The wibesite doesn't necessarily look the best, but it has large banners for key articles, and all the articles are on a list on the side for easy access.
• Violating website: www.scarpa.com / The website has so many different filters for product, and differenc combinations send you you to the same or slightly different groupings of shoes.

Design:

• Do the colours, shapes, and typography help people find what they want and improve usability of the details?
• Supporting website: www.8a.nu / This website is by no means appealing. That being said, the background is white so the darker font is easy to read. The font style is simple and uncomplicated.
• Violating website: www.pennyjuice.com / This website commits the cardinal sin of using comic sans as a font. Additionally the color choice is often too similar to the background color.

Copywriting:

• Is the biggest text the most important text? Why not?
• Supporting website: www.pinkbike.com / All of the font sizes are appropriate for their link's importance.
• Violating website: http://www.gatesnfences.com/ / The font on this is all across the range. The address for the company is larger font than the items they're selling.

Analysis:

• Are you using data to prove that you are right, or to learn the truth?
• Supporting website: www.google.com / Few websites have as much of a focus on data analytics as Google. Everything is tracked for optimizing SEO.
• Violating website: www.craiglist.com / Admittedly I'm not positive, but I'm not sure craigslist puts much effort at all into tracking clicks or website conversion.