Samantha Freeman - Mod 0 Capstone

Day 1

HTML and CSS Chapter 1-2

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

The HTML defines the overall structure of the web page.
What is the difference between an element and a tag?

The element is made up up of two tags and any content between them. While the actual tags act like a container and are just the bracketed piece. The element tells the browser something about the information that sits between these two tags.
Why do we use attributes in HTML elements?

Attributes provide additional information about the element. In the example in the book, it is used to help define the language being used for all browsers to understand.
Describe the purpose of the head, title, and body HTML elements.

The <head> usually includes information about the web page, but isn't included in the main body which appears on the page. You will usually find a title element inside the <head>. The <title> element will display the title on the title bar (or tabs) at the top of the browser. In the actual web page displays the <body> element.
In your browser (Chrome), how do you view the source of a website?

Push the "control" key and click with the mouse. Then click on "View page source" in the drop down.
List five different HTML elements and what they are used for.
- <h1>: The heading element used to make the main heading. There is also 2-6, which can be used to create subheadings. 1 is the largest and 6 is the smallest.
- <b>: Turns the enclosed word(s) bold.
- <i>: Turns the enclosed word(s) italic.
- <br />: Creates a line break wherever the element is placed in the paragraph.
- <q>: Used for short quotes that sit within a paragraph. Browsers add quotation marks around the text within the tags, however Internet Explorer does not.
What are empty elements?

Empty elements is where there is no end tag to the element, because they don't include any content that needs to be bookended by tags.
What is semantic markup?

They are not used to affect the structure, but instead add extra information to the pages. They can help give extra information for other programs, such as screen readers or search engines.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
- <footer>: Can be used to represent the bottom of the webpage or can be used within an article and section elements to represent the bottom portion.
- <nav>: Used to house the main navigation. For example, this could be a list of links.
- <hgroup>: Groups headings together, so a main and sub heading are grouped together.

CodePen Day1 HTML: https://codepen.io/samanthafreeman/pen/yreawy?editors=1000

Gear Up

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

It definitely plays a huge part of my life. I wouldn't have the personal relationships that I have today if it weren't for empathy. It is extremely crucial that I listen to my friends and family to better understand them as people. It was also necessary with my previous employement, where I had to constantly partner with different teams. These teams often included individuals with different backgrounds than my own. Thus I would have to utilize empathy to work effectively with these individuals as a team. I was able to handle some stressful situations at work, because I tried to be the active listener and respond to the other parties concerns.
How does empathy help you build better software?

Empathetic design, mentioned in the readings, is all about listening and understanding your audience. One could simply come up with a new software, but it takes an empathetic individual to come up with software that actually helpful and necessary. Taking the time to understand what the customers actual needs are and trying to create a software that fits them. Not everyone is the same, so a software developer would be selling themselves short if they only built for people like them.
Why is empathy important for working on a team?

Similar to the customer, your teammates are likely to have different backgrounds. A huge part of empathy is listening. In one reading it was recommended to turn off all devices and express that you've heard your teammate by reiterating what you have learned from their presentation. In doing so you are developing a relationship built on trust. By building this trust, you are able to ensure that the team works more smoothly together. Also in the reverse it is extremely valuable that you are also accepting both good and bad criticism. There will be rough patches when working in a team, but an empathetic team can get through it by working together.
Describe a situation in which your ability to empathize with a colleague or teammate was helpful.

In my previous employement, I would frequently work with a team in my organization. I was noticing a lot of issues arising from that team that was affecting my department. Thus I made individual meetings to discuss with their leadership and a couple of their members. After listening to their frustrations, I worked with their team to come up with new solutions for both teams that would lead to them feeling less stressed out and more productive. After those initial meetings, I started to meet with them more frequently and establish a strong relationship between their department and my own.
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 feel like I can improve my empathy towards those who are struggling to learn something I don't deem challenging. I tend to be empathic the first couple of times. However, when I have to repeat something the forth time, I become frustrated and unsure on how I can help. Thus I think I need to use empathy to try to better understand where they are still having issues, so that I can come up with alternative ways of teaching the information. I think I spend time listening the first go, but don't connect again with them later when I get frustrated. So I miss out learning how to better understand why they are still struggling with the information. I know everyone learns differently and I don't want them to be deterred from learning because I was frustrated.

Day 2

HTML and CSS Chapter 3-4

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

An ordered list is a list that has to follow a specific order, i.e. 1 through 5. While an unordered list doesn't have a specific order, so it will be represented with bullet points. The definition list is when there is a list of terms along with the definition for each.
What is the basic structure of an element used to link to another website?

Links are created with the <a> element. It is made up of opening and closing <a> tags and within the opening tag we notate the page you want to link using the href attribute. The value of the href attribute needs to include the full web address or absolute URL. Between the two <a> tags should be the link text the user clicks on, which will take them to the new page.
What attribute should you include in a link to open a new tab when the link is clicked?

To open in a new window or tab, you can use the target attribute inside the opening <a> tag. The value of this attribute should be _blank, which will tell the browser to open a new page.
How do you link to a specific part of the same page?

You use the id attribute, which is added within the opening tag of the html you want to link to (this can be used on any HTML element). Then in the href attribute of your link, you will include the pound # symbol followed by the value of the id attribute (i.e. href="#Middle_Page").

HTML and CSS Chapter 10-12

What is the purpose of CSS?

CSS is what makes the web page visually appealing. After building the overall structure with HTML, the CSS is used to create the actual design of the content.
What does CSS stand for? What does cascading mean in this case?

CSS stands for Cascading Style Sheet. The cascading refers to the rules of the stylesheet. They "fall" down the page, for example if two selectors are identical, the farther down rule will take priority. This can be used to easily apply generic rules to multiple elements. Then overide certain properties connected with each individual element listed lower in the page.
What is the basic structure of a CSS rule?

The basic structure consists of a selector and a declaration. The selector is listed first and defines the element that we want the CSS rule to affect. Then the declartion follows within curly brackets {} and this will define what is actually being styled for the element. There is also two parts to the CSS declaration: property and value, which are seperated by a colon. The property defines what detail of the element you want to change. While the value specifies the setting of the property.
How do you link a CSS stylesheet to your HTML document?

You add the link element to the head element of your HTML. The link element includes the href attribute which equals the specific path to the CSS file. Then then type attribute specifies the type of document, so the value will be "Text/css". Followed by the rel attribute, which specifies the relationship between the two and should say "stylesheet" for CSS files.
When is it useful to use external stylesheets as opposed to using interal CSS?

Using an external stylesheet is helpful when you have a site with mutliple pages. You can link the external CSS sheet to all of the pages, so they all have the same rules. Instead of repeating the full list of rules on each HTML page. It also makes it easier to read the content vs. the style, because they are housed in different documents. Plus it will make CSS revisions effortless, because you only have to revise one page. It is overall deemed a best practice to have a seperate CSS file.
Describe what a color hex code is.

It represents the values of red, green, and blue in hexadecimal code. This ends up looking like a pound # symbol followed by a six-digit code made up of letters and/or numbers.
What are the three parts of an HSL color property?

The HSL color property can be used to define hue, saturation and lightness. The hue is usually color that is represented as an angle in a color wheel. The saturation is the percentage of gray in a color. While Lightness is the percentage of white or black in a color.
In the world of typeface, what are the three main categories of fonts? What are the differences between them?

The three typfaces are serif, sans-serif and monospace. Serif font includes an extra stroke to the font creating basically feet on each letter called serifs. In print it is considered easier to read. The sans-serif font means without serifs. Thus the font has more straight ends to each letter. Believed to be a cleaner design and more frequently found clearer to read on screens. Lastly, monospace font has the same width for ever character and is commonly used in coding.
When specifiying font-size, what are the main three units used?

The three main units for specifying font-size are pixels, percentages, and ems. Pixels are most commonly used, because the web designer can define the precise size of the font. Compared to percentage and ems, which can be affected by the user's browser settings. Percentages base their size on the default size of 16px, so if the designer wanted that size then it would be represented as 100%. Lastly, the em is equal to the width of the letter m. This is similar to percentages, but instead looks at the width of the parent element.

Day 3

HTML and CSS Chapter 7

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

The type attribute defines the actual behavior for the input element. After input you will write out type = "". Inside the quotes is where you will set up if this is text, password, checkbox, etc.
What element is used to create a dropdown list?

A drop down list is created using the select and option elements. First you start with the select tags, which the opening tag includes the name attribute defining the form for the server. Within the select tags you will see the option tags, which create the physical drop down options. Each drop down is created using its own option tag. The option tag includes the value attribute, which is where you will define each option to the server.
If you're using an input element to send form data to a server, what should the type attribute be set to?

You will use the submit button to send a form to the server. Thus you will want the type attribute to equal "submit".
What element is used to group similar form items together?

You can use the fieldset element to group form items together. Some browsers will display this by adding a line around all of the form elements. Within the fieldset element you will use the legend element directly after, which contains the caption for the group.

HTML and CSS Chapter 13-15

Describe the differences between border, margin, and padding.

The border is a box surrounding the content. It seperates the edge of one box from another. The margin resides outside of the border. It is used to create spacing between each box (border). Padding is the opposite and is the spacing between the border and content. Increased padding can help with legibility.
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?

The CSS rule padding reads clockwise starting with the top. Thus it reads top 1px, right 2px, bottom 5px, left 10px.
Describe the different between block-level and inline elements.

Block-level starts on its own line and look like its own main section in the layout. While inline elements become a part of the surrounding content, so it all looks like one box.
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?

It is a form of absolute positioning and positions elements in relationship to the browser window instead of the container. They do not move when the user scrolls the page. Boxes can overlap when you use fixed positioning, because the elements that appear later in the HTML code sit on top of those that are earlier in the page. Thus z-index is helpful, because it allows you to decide which box appears on top.
What is the difference between a fixed and liquid layout?

Fixed layout is where you use a specific pixel width (and sometimes height) to your element. This ends up ensuring that the size doesn't change. The opposite is a liquid layout, which uses percentages. This means that the size will increase or decrease as it adapts to the browser window size.

Day 4

HTML and CSS Chapter 5

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

The alt attribute should include a detailed description of the image. This is because the alt text is used by screen readers and search engines to understand what the image includes.
What determines if an image element is inline or block?

Inline elements sit within a block element. For example, the image will be on the same line as the text or surrounded by the text. The opposite is an image acting like a block element, which will appear on its own line.
What are the benefits of jpg or png image file formats?

jpg is best for images that include many different colors. While png is most effective for images that use the same color, for example: logos, illustrations and diagrams.

HTML and CSS Chapter 16

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

A lot of times you will be working with multiple images on a page, which traditionally will share the same sizes. Thus it would be easier and cleaner to use a class in CSS to define different image sizes. Instead of adding to each image individually in the the HTML.
What is an image sprite, and why is it useful?

It's when a single image is used for multiple image parts. This can help speed up download times, because the browser only heeds to request one image.

Day 5

JavaScript and jQuery Chapter 2

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

You declare a variable by listing the variable keyword var followed by the name or identifier. This tells the computer that you are adding a variable with whatever name you chose. Once the variable has been added, then you can assign a value to it. The equals sign is the assignment operator. It says you are going to assign a value to the variable listed. Also it can be used later in the code to update the value.
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.

Numbers are used for counting and calculating sums. This includes integers (whole numbers), floats (fractions), and negative numbers. String data type is words or phrases, which are enclosed by quotation marks. They are used to add new or additional content to a page. Lastly, Boolean is only two values true or false. They can be used for example to turn something on or off on a page.
What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
1. It must start with either a letter, dollar sign, or underscore. It cannot start with a number.
2. The name can be compiled of letters, dollar signs, numbers, or underscores. However, don't use a hyphen (-) or a period.
3. Cannot use keywords or reserved words that are used by JavaScript. Keywords are special words used to the tell the interpreter to do something. While reserved words are ones that may be used in a future version. Example of reserved words: abstract, class, function, long, and throw.
4. All variables are case sensitive, however it is bad practice to create two variable with the same name but different cases.
5. Create a name that describes the information that is being stored in the variable.
6. If the variable name has more than one word. Then use a capital letter for the first letter of each word following the first word (i.e.lastName).
How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?

Arrays can be helpful when you don't know how many items are included in the list. When creating an array, you don't have to define how many total values it holds. To access a value in an Array, you list the variable name followed by the index number. It's important to note that the index number goes in numeric order starting at zero (i.e. index 2 = third position). Then you can change it by assigning a new variable similar to when you set up the values for the variables originally (equal sign followed by the new variable).
What is the difference between an expression and a statement?

An expression creates a single value. This can be one value assigned or can take multiple values then return just the single value. While a statement is an instruction for a specific action. JavaScript is made up of a sequence of statements.
What are three types of operators and how are they used?

The Arithmetic operator completes basic math. The String operator adds two strings together into one string. Lastly, the Comparison operator compares two different values and then returns a boolean (true or false).

Day 6

JavaScript and jQuery Chapter 3

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 sayHello() actually calls the function, so the console will log Hello! once sayHello() is entered. Just sayHello without the paranthesis doesn't call the function, so the console doesn't respond.
What is the difference between function parameters and arguments?

Parameters are used when declaring the function. They can be found within the parenthesis and within the curly brackets of the declared function. While the argument is found within the parenthesis of the function being called. The argument can be used to call specific values (i.e. Integers) or variables.
What is the keyword return used for?

The return keyword is used to get a single value from a function. It returns the value to the code that called the function.
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 end up using more memory than local variables, which in turn can lead to the script running slower. In addition, web pages will a lot of times use multiple JavaScript files. Thus if two files share a global variable with the same name, then there will be an error. A global variable could be helpful if you have multiple functions that are all using the same variable.

Day 7

User Interface/User Experience (UI/UX)

Psychology
- What is the user’s motivation to be here in the first place?
  - TurboTax: Taxes are a part of our lives and we are stuck with them. Thus TurboTax exists to simplify this yearly process. It does a good job of checking on you to see how you as the user are feeling during this process. They seem to take that into consideration and give you basically pep talk notes as you are working on it. i.e. "you're almost done!".
  - US Bank: We check bank websites for two major purposes: to check our current funds and to pay credit card statements. The first one US Bank does fine, however US Bank makes it challenging when it comes to paying off your credit card. They've gotten better, however they still have multiple buttons, which I have to click around to pay off a single credit card. I basically have the sequence memorized. It seems like they are oblivious of their users' motivation.
Usability
- Have you provided everything the user needs to know?
  - Amazon: Amazon does a good job of providing everything a user needs all in one place. You can check on what is available and the reviews for that item. They also make it easy to search either for specific items or just browse.
  - Facebook: This may be a bit outdated example, however I've seen a lot of cases where Facebook seems to assume that the user already knows how everything works. It has changed a lot since it first came out. However, it still seems oblivious of the older generations. Thus the users don't always understand how everything works, because they are new to social media.
Design
- Does it communicate the purpose and function without words?
  - Duolingo: Duolingo uses its simple design to walk their users through a new language. The user can pick their language based on the flag symbol. Then they have a step by step diagram they can follow. Each symbol represents what is to be learned in the lesson along with a progress bar showing how much has been completed.
  - Craigslist: Craigslist is messy looking, because it doesn't incorporate imagery at all. Thus forcing its users to skim through all of the words on the page or use the search bar to find what they need.
Copywriting
- Is it clear, direct, simple, and functional?
  - Slack: Right when you open Slack's website, they clearly explain what they are and that they are a free service. Followed by articles and examples of how it can be used. Along with a simple sign in bar to add your email.
  - Arngren: This Norwegian ecommerce site is extremely stressful. It is confusing because of how everything is crammed together. Words seem to overlay on top of each other. They also use a variety of font colors that end up making it extremely illegible.
Analysis
- Do you know why users do that, or are you interpreting their behaviour?
  - HelloFresh: A big part of HelloFresh is user feedback. When you check on your menu for the next week. They will also ask you about how the prior week went. Asking for if you enjoyed your meals along with why or why not. In addition, if the user isn't checking the website frequently they will send emails linking the user to the surveys on their website.
  - US Bank: I clearly have some problems with the US Bank website and a part of it may be because they've never asked me about it. They know I'm stuck with their website/app and don't seem to be interested in how I'm using it as the user.

SamanthaLFreeman/SamanthaFreeman-mod-0-capstone.md