Session 1

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

The purpose of HTML is to give structure to a website

In Chrome, view source of the website by going to the toolbar, clicking View > Developer > View Source.

What is the difference between an element and a tag?

Elements tell the browser about the text in between the two tags. Tags function as something like an on/off switch to the element by using opening and closing tags.

Why do we use attributes in HTML elements?

Attributes are used to provide more specific information about an element. (ex. Languages)

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

Head: Contains info about the web page that isn't seen by the user. Body: The content seen by the user Title: Title of the site, often found in the tab or the top of the browser window.

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

In Chrome, view source of the website by going to the toolbar, clicking View > Developer > View Source.

List five different HTML elements and what they are used for. For example,

is a paragraph element, and it is used to represent a paragraph of text.

<html> - Used to indicate any content between this tag and the closing tag is HTML code.

<body> - Indicates anything between the body tags should be seen by the user.

<h1> - Main heading, largest text

<h2> - Sub heading, smaller text etc.

<title> - Used to display content in the tab or top of browser window.

What are empty elements?

Empty elements do not require a closing tag. Examples include line break or horizontal rule.

What is semantic markup?

Semantic markup is added to HTML to improve functionality for use with screen readers, as well to supply important context about the content of the site. Examples include <em>, to add emphasis to information. <em> makes text appear italic but is also interpreted on screen readers.

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

<article> a section of a page that could stand alone, or be syndicated. <aside> if in an article element, provides related information. <section> groups related content together. (contact, bio, portfolio, etc.)

Session 2

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

Ordered list: Meant to indicate the importance of chronological order of a list (ex. steps in a recipe). Interpreted as numbers.
Unordered list: Meant to indicate a general list, with no emphasis on order (ex. ingredients in a recipe). Interpreted as bullet points.
Definition list: Includes term and definition tags. As the name suggests, it is used almost exclusively for the purpose of definitions.

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

<a href="web address">click here</a> is the basic structure for an external link.

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

To make your link open in a new tab/window, add target="_blank" at the very end of your href tag.

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

Identify the points on the page you want to link to using an id attribute. For example, your h1 id could be called "Top of Page" and at the bottom of the page you could link <a href="#Top of Page"> and it would bring you to the corresponding header.

What is the purpose of CSS?

The purpose of CSS is to style the HTML. This includes text color, typeface, size, etc. as well as borders, backgrounds, and more.

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

CSS stands for Cascading Style Sheet. Cascading, in this sense, means that that the CSS reads top to bottom, so any conflicting information within the CSS will default to whichever rule was closest to the bottom. There is also a hierarchy of specifity, for example selecting h1 would be more specific than doing a universal target. You can also add !important after a value to indicate that it is more important than other rules applying to that same element.

What is the basic structure of a CSS rule?

CSS rules are made up of two parts, the selector and the declaration. A selector 'selects' which HTML element to apply, or declare the instruction for. You could select a paragraph p and declare that all p elements use font-family: Arial;. Declarations are also made up of two parts: property and value. In our example, font-family is the property. The value is Arial. Another example would be using the property color with the value of blue

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

You link to a CSS file within the head element of an HTML document and put the CSS code after the HTML. It is also worth noting that these links do not require a closing tag.

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

External style sheets are advantageous over internal because externals allow you to change the style of all pages on your site by just altering one file. You also don't have to repeat the same rules on every page.

Describe what a color hex code is.

HEX is a 6-character color code, preceded by a hash #. The six characters represent different shades of Red, Green & Blue.

What are the three parts of an HSL color property?

HSL is made up of Hue, Saturation, and Lightness. It allows for far more control over the character of a particular color.

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

Three main categories of fonts: Serif (details or lines at the end of the letters) Sans Serif (without Serif) and monospace, in which every character is the same width.

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

Three main ways you can adjust the size of the font is by changing the pixel value (ex 12px, 14px, etc) . or you can choose a percentage of the default 16px. You can also use ems to default to the width of the letter 'm' which is also 16px.

Session 3

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.

What element is used to create a dropdown list?

The select attribute is used to create a dropdown list.

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

The type attribute should be set to method="post" to send the form data to the server.

What element is used to group similar form items together?

The formset element is used to group similar items in a form together in a box.

Describe the differences between border, margin, and padding.

Border: Separates the edge of the box from another.
Margin: Size of the gap between two adjacent borders.
Padding: Space between the border and the inner content of the box.

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

1px 4px 5px 10px Would correspond to 1px on top, 4 px on the right side, 5 px on the bottom, and 10px on the left.

Describe the difference between block-level and inline elements.

Block elements will stack vertically down the page, where inline elements continue horizontally and flow in between surrounding text.

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

Using fixed positioning will position an element in relation to the browser window instead of the parent element. Using z-index you can dictate the layer order of the different elements to control what appears on top. This can be used to position a header to always be showing while you scroll through a paragraph underneath.

What is the difference between a fixed and liquid layout?

A fixed layout keeps the dimensions of its elements the same no matter what the screen size is. Liquid layouts have a responsive design and will expand or contract depending on screen size.

Session 4

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

An alt attribute provides information about the image if a user cannot see it. This applies especially for search engines and users with screen readers.

What determines if an image element is inline or block?

An image element is inline if it is within a block level element. It will not start on a new line. An image element is block if it is placed before another block element, such as <p> or <h1>

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

.jpg formats are suited for images with many different colors such as photographs. .png and .gif are better suited for images with few colors that cover larger areas, such as logos. .png photos can also be saved to feature transparency on rounded edges and semi-opaque colors.

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

Indicating image size in CSS is important because it helps the webpage load more smoothly. The code typically loads before the images, so specifying image size 'reserves' the space for them on the website so the images won't move all the words around when it loads.

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

An image sprite is when a website has multiple uses of the same image, which allows for the page to load faster.

Session 5

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, type the keyword var and then whatever variable you are using, for example, quantity

The equals sign is an assignment operator. It assigns a value to the variable, for example, if your variable name and value is a quantity of 3, you could type quantity = 3; and the equals sign assigns the value to the name.

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

Strings: Strings consist of letters and other characters such as symbols & punctuation. They are enclosed in a pair of single or double quotes, and are usually used to add new content into a page.
Numbers: Probably the most self-explanatory. This data type stores numbers, including positive and negative numbers, as well as fractional numbers/decimals.
Booleans: Booleans return one of two values: true or false. Possibly the most complex of the three data types (at least at first) it can help return results to a user such as color preference of a car or location information.

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

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

The name cannot start with a number. It must begin with a letter, dollar $ign, or under_score.
The rest of the name can contain anything listed above, with the addition of numbers as well. Do not use a dash - or a period . in a variable name.
Cannot used a reserved word or keyword. There are full lists available for reserved words in JavaScript. An example would be var because it is already a keyword, so you cannot name a variable a keyword that already exists.
Variables are case sensitive. Always use consist casing when naming variables, and it is good practice not to create two variables with the same word but different casing.
Use a relavent name when naming variables. For example, hairColor eyeColor instead of characteristicA and characteristicB
If the variable name is more than one word, you want to keep the first word entirely lowercase, and for every following word, capitalize the first letter. forExampleThis. This is called camelcase. You can also use underscores, but not dashes.

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

Arrays are useful when you are creating a list and you don't know how many items it will contain. This way, you don't have to create enough variables for a long list.

To access a value in an array, you type array_name[array_value] or put into context, colors[2] using the example from the book. To change that value, simply add an equals sign and new value in quotes. The full statement would look like this: array_name[array_value] = 'new value'

What is the difference between an expression and a statement?

A statement simply is a line of instructions, like array_name[array_value] = 'new value'

An expression can either assign a value to a variable, or use multiple variables to return a single variable.

Basically, an expression is meant to return a single value from one or multiple values, but a statement is more like an instruction.

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

Three types of operators covered in Chapter 2 are assignment, arithmetic and string operators.

Assignment Operators assign a value to a variable, ex. size = 'large'
Arithmetic Operators perform basic math. ex. hoursPerMonth = 40 * 4;
String Operators can combine two strings 'Today is' + 'September 24th';

Session 6

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

When you type the function defined with parenthesis, it just returns undefined. If you do not include parenthesis, it is returned as a syntax error.

What is the difference between function parameters and arguments?

Parameters indicate what information a function needs to know in order to work (ex. width, height) Arguments use the return value of the parameters and pass it along into the code.

What is the keyword return used for?

The return keyword returns a 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?

Local variables are better than global variables because they take up less memory. Since local variables are removed once the functions task is finished, the variable can have different values. Different functions can use variables with the same without conflict, as well.

If you need multiple functions to access the same variable, you may want to use global variables.

UX/UI Questions

How much work does the user have to do to get what they want?

Supporting website: google.com It goes without saying that a user typically does not have to do much work to get what they want. this site breaks downs some of the most searched terms on google and we can see that many of the top keywords are simply other websites. Many of the top questions asked would have an infobox with an answer to your questions without even having to click into a website.
Violating website: schwab.com I used to work at Charles Schwab as a customer service associate and the amount of people who cannot navigate the site is extremely high. And I don't blame them. Even as an employee, I would sometimes have to take a second to remember where something was on the site. Sure, if you use this site for lots of its features on a daily basis you can get the hang of it. But there are lots of ambiguous options in the navigation bar and I had spoken with clients who had spent hours trying to figure things out before calling in to get help.

Could you get the job done with less input from the user?

I will use the same websites for this question.

Supporting website: google.com I don't really have to dive much into it, I think google does a good job at getting what you want while spending as little time as possible. If you really need to get specific, they have tools for that as well (date range, etc.)
Violating website: schwab.com I am aware that finance is a hairy industry with lots of information and responsibility on the line. However, I could see how more intuitive options could be helpful for some not-so web literate people. For example, an option for a home screen that says "What are you trying to do today?" and give options such as 'Sell Stock, Buy Stock, Deposit Cash, Withdraw Cash, Link Bank, Transfer Cash' and whatever you click on could give you step by steps instructions in the form of simple questions to get what you want. But instead, you have to figure out the various menus and tools on the website. For someone like me it's not so bad, but a lot of people don't have time to figure that out or have difficulty with technology and it leaves them in the dark.

Does the design lead the user’s eyes to the right places? How do you know?

Supporting website: pinterest.com I don't really use this site except for occasionally getting recipes, but once you login, it's pretty clear what your options are. You have your suggested pins based on your history or marked interest, and a search function at the top to find things related to any topic you need.
Violating website: en.wikipedia.org Most people I know, know how to use Wikipedia. However if you really look at their homepage, it's not terribly apparent that you can search something. If you never used this site or knew what it was, it would take you a couple of seconds or more to figure out what you are looking at.

Does it inform the user or does it assume that they already know what its about?

Supporting website: en.wikipedia.org While you could argue each article isn't written to be read by a novice, every article has resources to figure out generally what you are reading about if you aren't already familiar. For a website that has information on just about everything in this world and other worlds, I'd say it does a pretty good job at being informative and clear.
Violating website: github.com While github is clearly a well-designed website, it does assume the user already knows what it is about. A correct assumption? Probably. But the fact still remains if you are even well versed in computers and go to github you're likely to have very little clue what that website is for or what it is capable of.

Do you know why users do that, or are you interpreting their behaviour?

Supporting website: guitarcenter.com I know some sites will actually ask you to take a survey about your experience on the website. I think this is one step you could take to get a more specific explanation of users behaviour on the websites. I think I have seen this on the guitar center website before.

Violating website: YouTube.com this may not be the most enlightening example but sometimes I look up things on YouTube that I don't necessarily want to see related content to. There's a lot of weird music out there that I want to hear but not all the time. So when I look up Peppa Pig and get kids music recommendations all day, I am not enthused. YouTube just interprets that I want to see more of that. Can I blame them? Not really, but it could help to mark that you don't want to see related videos to this. Maybe it helps in their greater algorithim, I'm not sure.

Other

Here is the link to my capstone codepen.

monstaro/CodySmith-mod-0-capstone.md