DavidGitlen-mod-0-capstone.md

Mod_0_Capstone_Work

Day 1 - Chapters 1 & 2

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

     The basic purpose of HTML code on a website is to provide structure to the information that will be presented, and to appropriately describe the type of information that will be in each section of the structure.

2. What is the difference between an element and a tag?

     While element and tag are often used interchangeably, an element in particular actually refers to both the opening and closing tag as well as the information contained between them. The tags themselves are a left-angle bracket (<), a character or string of characters, and a right-angle bracket (>).

3. Why do we use attributes in HTML elements?

     Attributes, consisting of a lowercase name followed by an equals sign, and a lowercase value, are added to the opening tags of an HTML element to provide additional information about whatever content the element contains.

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

     The head element is used to provide information about the page itself, and usually contains a title element enclosed within the two tags of the head element.

     The title element is used to enclose content that will be displayed in the title bar/tabs of the browser window, which will be above the address bar.

     The body element is used to enclose everything that will be displayed inside the main browser window.

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

     In my browser I can view the source of a website by right-clicking anywhere on the browser, and selecting View Page Source from the menu that appears.

6. 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.

   1. The heading element has six levels (<h1>, <h2>,...<h6>) and is used to provide headings and subheadings to the information displayed in the browser window in descending size from greatest to smallest.
   2. The bold element (<b>...</b> is used to enclose characters to make them display in bold.
   3. The italic element (<i>...</i>) encloses characters to make them display in italics.
   4. The superscript element (^...) encloses characters that should be displayed as superscript, such as the common "th" suffix on a date or an ordinal number.
   5. The subscript element (_...) encloses characters that should be displayed as subscript, such as a footnote number or in a chemical formula.

7. What are empty elements?

     An empty element is one that does not consist of the normal opening and closing tags, and usually consist of only one tag with a space and a forward slash before the closing right-angle bracket.

8. What is semantic markup?

     Semantic markup refers to the elements that are used to add descriptive information to the content of the pages besides the overall structure, such as adding emphasis to certain sections of the text or to mark something as a block quote. This information can be used by screen readers to enhance accessibility or used by a crawler to index a page for a search engine.

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

   1. The <nav>...</nav> element is used to indicate which parts of the page contain navigational blocks that link to parts of the same site, such as links for a site's privacy policy or accessibility information.
   2. The <article>...</article> element indicates that the enclosed section of the site is a potentially independent piece of content, something that could stand alone like an article or comment that could be syndicated.
   3. The <section>...</section> element is used to group related content on a site together, or to subdivide a lengthy article into sections.

First CodePen Link (command+click to open in new page!)

Day 2 - Chapters 3 & 4

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

     The difference between ordered and unordered lists is that the ordered list has each element of the list labeled numerically, while the unordered list simple presents them as bulleted items. A definition list contains terms and definitions, where the terms are generally justified to the same line and the definitions are inset below them.

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

     The basic structure of an element used to link to another website is to include an anchor tag (<a>...</a>) wherein the first tag contains the element href="URL" and the tags enclose a string which appears as the link text the user will click on to take them to the linked destination.

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

     In order to open a link in a new page, the first tag of the anchor element should include the attribute target="_blank".

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

     To link to a specific part of the same page, instead of including a specific URL you follow the href= element with a relative URL, which can take different forms depending on how the pages are organized. If they are all in the same folder you can simply name the file, if they are in different folders/directories you need to provide the path to that folder from the page it is currently on, with the names of sub-folders listed followed by forward slashes, and higher level folders represented by "../" for each level you need to go up. In this format higher level folders are referred to as parents/grandparents (signifying one and two levels above the current folder, respectively), while the sub-folders are referred to as children/grandchildren (signifying one and two levels below the current folder, respectively).

Day 2 - Chapters 10, 11, and 12

1. What is the purpose of CSS?

     The purpose of CSS is to create rules specifying how the content of HTML elements appears.

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

     CSS stands for cascading style sheet, and in this case the cascading refers to the fact that the priority of the rules written into the style sheet follow set rules, with the first permutation being that writing multiple rules for the same selector will result in the last rule taking precedence over the former ones. Beyond that, rules written for more specific selectors take precedence over those written for other, more general selectors. This provides a "cascading" scheme of rules falling from first to last and less specific to more specific.

3. What is the basic structure of a CSS rule?

     The basic structure of a CSS rule is a selector written to target an element of the HTML to which the style will be supplied, then an open curly bracket containing the declaration describing how the element should be styled. The declaration consists of a property and a value separated by colon. Multiple declarations inside a rule written for a single selector are separated by semi-colons.

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

     You link a CSS stylesheet to an HTML document with the link element (<link>), which is an empty element. This element contains an href element linking to the CSS file, as well as a type attribute specifying that the document being linked to is of the text/css type, and a rel (relationship) attribute which will be "stylesheet" when linking to a CSS file.

5. When is it useful to use external style sheets as opposed to using internal CSS?

     It is useful to use an external style sheet as opposed to an internal one when building a site with more than one page. The reason for this is that a single external style sheet can be used by multiple pages, the content of the pages will be kept separate from the styling, and any changes made to the single style sheet can be applied to all of the pages.

6. Describe what a color hex code is.

     A color hex code is a six-digit code specifying the amount of red, green, and blue in a single color, written in hexadecimal (base 16) numeral system, containing the numbers 0-9 and the letters a-f in combination, preceded by a hash (#).

7. What are the three parts of an HSL color property?

     The three parts of an HSL color property are hue, representing a degree on the color wheel, saturation, representing the percentage of the color/grayscale presented, and lightness (or brightness/value), representing the white/black balance.

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

     The three main categories of fonts are serif, sans-serif, and monospace. Serif fonts contain extra details on each end of the main strokes of the letters (serifs). Sans-serif fonts lack these extra details ("sans"="without"). Monospace fonts, also known as fixed-width fonts, are collections of letters that are all the same width.

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

     When specifying font-size, the three main units used are pixels, percentages, and ems. Pixels are the smallest element controllable on a screen. Percentages are based on the default size of the text displayed in the browser (16px). An em is equivalent to the width of a letter 'm' as displayed in the parent element.

Day 3 - Chapter 7

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

     When using an input element in a form, the attribute that controls the behavior of the input is the type attribute.

2. What element is used to create a dropdown list?

     The element used to create a dropdown list is the select element.

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

     In this case the type attribute should be set to submit.

4. What element is used to group similar form items together?

     The element used to group similar form items together is fieldset.

Day 3 - Chapters 13 and 15

1. Describe the differences between border, margin, and padding.

     The border is the space separating the edges of one box from another, the margin is the space between the borders of however many boxes appear, and the padding is the space between the border of the box and the content it contains.

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

     Each pixel value corresponds to a side of the content box clockwise from the top, so: top, right, bottom, left.

3. Describe the difference between block-level and inline elements.

     The basic difference between block-level and inline elements is that a block-leven element will start on a new line and function as the main building blocks of the layout, while inline elements are inserted between whatever text surrounds them.

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

     Fixed positioning positions the elements in relation to the browser window itself, as opposed to whatever containing element they are in. Since they do not move as the user scrolls up or down on the page, it is important to set the z-index of the different elements such that the elements overlap with the correct elements being displayed over the top of the others in whatever fashion desired (elements with a higher z-index appearing on top of those with a lower z-index).

5. What is the difference between a fixed and liquid layout?

     A fixed layout will not resize elements as the browser window increases or decreases in size, while a liquid layout design will let the elements grow and contract or shift around as the size of the browser window is changed.

Day 4 - Chapter 5

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

     The alt attribute is important in an image element for three main reasons: it provides a description of the image if it does not load or cannot be displayed properly, it allows people using assistive technology such as screen readers to have accurate descriptions of the image content, and it is used to index the content of the page for search engines.

2. What determines if an image element is inline or block?

     Generally an image is, itself, an inline element (although it has width and height), but this can be changed in CSS applied to the image element with the display property. Regardless, the book mentions that you will want to position them accurately in the code in relation to other elements that are block/inline depending on whether you want following text elements to display on a separate line or whether you want the text to flow around the image.

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

     Jpeg file formats are best suited for photographs or images that contain many different colors or many different shades of the same color (even if they appear to be the same), while png file formats are best for images with "flat colors" or large areas of the same color, such as logos, illustrations, and diagrams. Choosing the correct file format for your image allows it to appear optimally and also helps the site to load as quickly as possible.

Day 4 - Chapter 16

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

     One of the main benefits is that specifying the size of the image in CSS allows the browser to leave that much space for the image and render the rest of the page without waiting for the image to download. Since image sizes will often repeat on one site, you can use CSS to control the dimensions of those images by assigning them class names and adjusting the sizes of those classes across the board, instead of having to specify each images width and height separately in the HTML.

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

     A single image that is used for several different parts of an interface is referred to as a sprite. Sprites are useful because they allow the browser to request a single image and use it differently instead of having to use many images, which helps the loading speed.

Day 5 - Chapter 2

1. 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 first you create the variable and give it a name, for instance by writing var amount, and then you assign it a value, by following the keyword and name with an equals sign, called an assignment operator in JavaScript, which means that you are assigning a value to the preceding variable.

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

     Numbers are either integers or floats, meaning positive or negative whole numbers or those with a decimal point, strings are a number of letters or other characters surrounded by a pair of single or double quotes (not mixed), and booleans are either true or false.

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

     The six rules for naming variables are: 1) the name must begin with a letters, dollar sign, or an underscore, but not a number, 2) the name can contain letters, numbers, a dollar sign, or an underscore, but cannot contain a dash or a period, 3) the name cannot contain keywords or reserved words, 4) variables are case sensitive, and it is considered bad practice to create two variables with the same name using different cases, 5) the name should describe the kind of information the variable will store, and 6) the varaible name should use a capital letter for the first letter of every word after the first, which will remain uncapitalized (camel case), or it should use an underscore between each word (snake case). A few JavaScript reserved words that should be avoided when naming variables are: break, case, catch, continue, and debugger.

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

     An array can be useful when dealing with multiple related values especially when you do not know how many items a list will contain, as the array does not need to specify how many values it will hold, such as the given example of a shopping list where the list may contain a number of related items you can add to freely, and where you may create multiple shopping lists with a different number of values. You access the values in an array by decalring the array name followed by the index number for the value inside square brackets (with the first index value being 0), and you can change this value by declaring the same followed by an assignment operator and the new value you wish to store.

5. What is the difference between an expression and a statement?

     The differene between an expression and a statement is that an expression evaluates into a single value, either by assigning the value to a variable or performing an operation that results in an individual value, while a statement performs a specified action.

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

     The three types of operators are assignment operations, used to assign a value to a variable (variable name followed by assignment operator and value), arithmetic operators, used to perform basic math (variable name followed by assignment operator and some equation), and comparison operators (varaible name followed by assignment operator and a comparison such as num >/</= num), used to compare two values and return a boolean.

Day 6 - Chapter 3

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

     If we have defined the function already, sayHello() will actually cause it to be called, so it will display "Hello!" to the console. Writing only sayHello will treat it like a variable and will give us the function declaration itself.

2. What is the difference between function parameters and arguments?

     Although they may be (not entirely correctly) used interchangeably, the parameters of the function are contained within the parentheses and are like the names of variables, while arguments of a function are the actual values of these variables.

3. What is the keyword return used for?

     The return keyword is used to return a value to the code that called the function. So, if you have a function that calculates the area of something and returns that area, and you call the function with a variable to calculate the area, the resultant value will be assigned to the variable.

4. 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 area "better" than global variables because they are only stored in memory for the duration of the execution of the function in which they appear, thus avoiding conflicts if multiple functions have declared local variables with the same names and decreasing the overall complexity of the code. Globally scoped variables would be useful if you are going to need certain variables to have fixed values throughout an entire program, and you want them to be accessible by any function that may appear in the program without having to declare them over and over as local variables in each block.

Day 7 - UX/UI

Psychology

Is this something they want to do again? Why? How often?

• Good: Netflix - The content is obviously desirable, and the interface seems pretty clean and intuitive: you already know what each button on the screen is going to do before you click it, and if you're not sure then hovering over it gives a description. Overall pleasant experience, and addictive!

• Bad: LinkedIn - It presents a lot of information in a sort of knock-off Facebook format, feels like it presents too much information at once (and there are often ads presented as just lines of text), but not necessarily the information you WANT to see. Combined with the stress of having to present and promote yourself in a professional sense I think it's pretty unpleasant... probably one of the reasons I haven't updated it in a loooong time.

Usability

Are you working with the user’s assumptions, or against them?

• Good: Reddit - The user sees the content of subreddits they are a part of, the main links are presented in the endless-scrolling format we are all used to, view options and upvoting/downvoting are all represented with clear graphical counterparts. (Their search sucks, though...)

• Bad: Hulu - Once you are watching a show, it is sort of difficult (I've found) to navigate away from it to find another episode of the same show or switch to another... You can't just escape out of it, you have to hit the 'x' at the top right, but doing that just minimizes the thing you are watching, and the buttons on the "main screen" of the show are not really intuitive, you have to hit the -> to get to an index of the episodes.

Design

Do the colours, shapes, and typography help people find what they want and improve usability of the details?

• Good: Serious Eats - Nice images with easy-to-read text, a short sample of images from each section presented upfront with clear options to explore a specific topic in more depth. Dropdown menus at top don't present an overwhelming flood of information.

• Bad: Arngren - Terrible mishmash of unbalanced boxes and clickable and non-clickable text. Generally very unattractive.

Copywriting

Is it clear, direct, simple, and functional?

• Good: David Lebovitz' Blog - Clearly labeled information at top, simple two-column layout for body of blog, only the most recent story presents expanded information, while the earlier ones give small snippets with "continue reading..." clearly presented below them.

• Bad: Ultimate Capture Pages - I'm not sure what it is about, it has a sort of "multi-level marketing" feel (massive new market creates millionaires!!!) and it asks for personal information immediately to take a "no obligation tour" right away, which leads you to think there will be some obligation forthcoming.

Analysis

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

• Good: Facebook - It's sort of hard to evaluate the analysis principles strictly from the side of the user, I think, but Facebook is famous for collecting information from users and building one of the most addictive and predictive sites on the web, showing you what will keep you hooked and even learning to affect users' moods and outlooks with different algorithms.

• Bad: Google Plus - Google's attempted expansion into the social media field obviously did not hit the nail on the head with analyzing users' behaviors, as it no longer exists!

I had a few problems: my git account has apparently been flagged for some reason, I'm not sure what that means for people being able to see these gists. Also, the original instructions for the GearUp section in the Mod 0 capstone did not say to create a separate gist for them, and in the process of trying to transfer what I originally had written to the gearup gist I lost them... In any case, I hope you can access these and that they're alright. Thanks!