JonO'Drobinak-mod-0-capstone.md

Computer setup, HTML and Gear up

First CodePen - https://codepen.io/triplemanus-the-looper/pen/MLMMax

On a website, what is the purpose of HTML code? - HTML describes the structure of a web page so all of the information on teh page can be displayed in a readable, organized and useful way and can be shared around the world and displayed on a number of different platforms, browsers and/or operating systems.

What is the difference between an element and a tag? - Elements are constructs in HTML that define the structure, semantics and/or content of a web page while tags are used to contain the elements and mark the beginning and end(usually) of the element.

Why do we use attributes in HTML elements? - Attributes provide additional information about the contents of an element. I believe we use them because they provide us greater control over our HTML documents and they allow for a richer experience.

Describe the purpose of the head, title, and body HTML elements. - The body is the main section of a web page and everything inside the body is displayed inside the main browser window. THe Head is usually before the body and provides information about the page, not information that is displayed on the main page. It often contains the title of the page, whose content appears either in the top of the web browser or on the browser tab.

In your browser (Chrome), how do you view the source of a website? In Chrome, with developer tools installed, I select "More Tools >", "Developer Tools" from the browser menu or Ctrl + Shift + I, and the source pops up in another tab.

List five different HTML elements and what they are used for. For example, "<(lowercase p)>" is a paragraph element, and it is used to represent a paragraph of text.

1. "body></body" This is the body element and it tells the browser to display the content between these tags in the main browser window.
2. h1></h1 Indicates the contents are the main heading, which is displayed in larger type than the body of a page. HTML provides for 6 levels of headings.
3. Indicates to the browser that anything in between these tags are HTM code.
4. Is the italics element indication to the browser to display the text between the tags in italics.
5. This is the subscript element that indicates to the browser to display the content as subscript.

What are empty elements? - Empty elements are HTML elements that do not have any words between the opening and closing tags and usually only have one tag and contain a space and a forward slash before the closing bracket.

What is semantic markup? Semantic markups are HTML test elements that are used to describe the contents of a page more accurately but are not primarily used to change the way the text looks, rather they are there for other devices, 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. Header, Footer, Article.

HTML & CSS

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

• Ordered lists present a list of items where each item is numbered.
• Unordered lists are lists that begin with a bullet point that do not indicate any particular order.
• Definition lists provide a series of terms and their definitions.

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

• <a href="http://"url of site you want to reach">"text the user will see"

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

• target="underscoreblank"

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

• This requires two parts to make it work. First, you have to identify the points in the page that you wish to link to with the id attribute. Second, use the element, but instead of a URL in the href attribute, you use a #(hashtag) and the name you set with the id attribute. ""

What is the purpose of CSS? CSS allows you to make your web pages more attractive by associating rules with HTML elements using properties and values to define the style for each element or group of elements.

What does CSS stand for? What does cascading mean in this case? Cascading Style Sheets. Cascading means it's possible for an elelment to have two or more rules that apply to it and there is a way to determine which rule will have precedence. As a developer, you can add "!important" after the value to signify it's precedence, or you can rely on the Last Rule, Specificity or Inheritance to control the look of the element.

What is the basic structure of a CSS rule?

• a Selector, which specifies the elements a rule applies to, and a Declaration, which specifies what these elements will look like.

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

• By using the element in HTML document. . The element is an empty element and doesn't need a closing tag.

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

• When building a site with more than one page.

Describe what a color hex code is.

• A color hex code is a six-digit hexadecimal code that represents the amount of red, green and blue in a color, preceded by a hash sign. #4bee80

What are the three parts of an HSL color property?

• Hue, Saturation and Lightness.

In the world of typeface, what are the three main categories of fonts?

• Serif, Sans-Serif, Monospace.

What are the differences between them?

• Serif fonts have extra details have extra details on the ends of strokes on letters, whereas sans-serif fonts have straight ends to tthe letters and appears as a much cleaner design. Monospace letters can be fussy or clean but they all have the same width.

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

• Pixels, Percentages and EMS.

HTML, CSS and Professional Development

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

• The "type" attribute.

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?

• type='submit'

What element is used to group similar form items together?

• The fieldset element.

Describe the differences between border, margin, and padding.

• Border is the line? that appears around the outside of the box. Margin is the space between the border of the box and other elements on the page. Padding is the space reserved between the content inside the box and the border.

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

• Top, right, bottom, left. So, 1px-top, 2px-right, 5px-bottom, 10px-left.

Describe the different between block-level and inline elements.

• Block-level elements start on a new line; inline elements wrap around and flow between surrounding elements.

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

• Fixed positioning positions the element in relationship to teh browser window, not the content of the web page so as teh user scrolls down a lengthy web page, the element remains in the same (fixed) position on the screen. The z-index is important because it is responsible for determimning which elements on a page sit on top of other elements when they overlap.

What is the difference between a fixed and liquid layout?

• Fixed width layouts do not change size as the user increases or decreases the size of the browser window. Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window.

HTML, CSS and JavaScript

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

• The element provides a text description of the image in case you can't see it. If the the page load fails, your browser can't display the image or you have a slow network connection, the element can provide at least some information about the image. It is also useful for screen readers so users that cannot see the image at all can still gather information about the images on your page.

What determines if an image element is inline or block?

• If the image is followed by a block element on the page, then the block level element will start on a new line after the image. If the image element is inside a block level level element, the text or other content will flow around the image.

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

• The .jpg file format is great when you are using photographs or other images that have many colors. Illustratons or logos or other imnages that have flat colors are better saved as .gifs or .pngs. If you want transparency in your image a .png format is also very useful.

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

• One benefit is it keeps the rules that affect the presentation of your page in CSS and out of the HTML, consistant with that approach for all web pages. It is also allows for additional control and features for images. And much of the code used to display images in HTML are phasing out.

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

• A sprite is a single image that can be used for several different parts of an interface. The advantage is the browser only needs to request and download one image instead of many images which can make the page load faster; web users hate to wait!

JavaScript

How do you declare a variable.

• You use the "var" keyword and a name for the variable to declare it.

What does the equals sign really mean in JavaScript?

• The equals sign in JavaScript is actually an assignment operator and you use it to assign a value to your variables. What is it called in JavaScript?
• It's called the assignment operator.

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

• The numeric data type is used to store numbers, whole and decimal. The string data type is used to hold letters and other characters including numbers that are used for display purposes instead of calculations. The Boolean data type holds one of two values, TRUE and FALSE.

What are the six rules for naming variables?

1. The name must begin with a letter, dollar sign($) or underscore(_).
2. The name can contain letters, numbers, dollar sign, or underscore but dashes and periods are NOT allowed.
3. The name cannot be a keyword or other reserved word.
4. All variable names are case sensitive, so amount and Amount are two different variable names.
5. The name should describe the kind of imformation that is stored in the variable.
6. If a variable name is more than one word, the first letter of each word AFTER the first word should be capitalized. You can also use an underscore between each word.

What are a few JavaScript reserved words that you should avoid using for variable names?

• float, function, class, goto, private, abstract

How can an array be useful when dealing with multiple related values?

• Often times you won't know ahead of time how many values you will need. An array is useful because you don't have to specify how many values it will hold when you declare it.

How do you access/change a value in an array?

• You access or change the value in an array by using in index value to identify which value you want to work with. The index begins with the first value in an array and starting woith zero, increases for each additional value.

What is the difference between an expression and a statement?

• Expressions evaluate into a single value, whether that is just assigning a value to a variable or using multiple values and operators to assign a value. A statement typically performs an action.

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

• Assignment operators assign a value to a variable.
• Arithmetic operators perform basic mathmatical calculations.
• String operators combine two or more strings.

var numberOfChildren = 4 undefined var partnerName = "Monique" undefined var geoLocation = "Austin" undefined var jobTitle = "Marine Biologist" undefined if (8 < 9) {console.log("You will be a " + jobTitle)} VM219:1 You will be a Marine Biologist undefined if (8 < 9) {console.log("You will be a " + jobTitle + "in" + geoLocation + ", and married to "

• partnerName + " with " + numberOfChildren + " kids.")} VM367:1 You will be a Marine BiologistinAustin, and married to Monique with 4 kids. undefined if (8 < 9) {console.log("You will be a " + jobTitle + " in " + geoLocation + ", and married to "
• partnerName + " with " + numberOfChildren + " kids.")} VM401:1 You will be a Marine Biologist in Austin, and married to Monique with 4 kids.

var currentYear = 2019 undefined var birthYear = 1965 undefined var age = "Your present age is " + (currentYear - birthYear) + " or " + (currentYear - birthYear + 1)

• "."; undefined console.log(age); VM597:1 Your present age is 54 or 55. undefined var age = "Your present age is " + (currentYear - birthYear) + " or " + (currentYear - birthYear - 1)
• "."; undefined console.log(age); VM606:1 Your present age is 54 or 53. undefined

var currentAge = 53 undefined var maxAge = 105 undefined var amountPerDay = 5 undefined var totalPigout = (maxAge - currentAge) * 365 * amountPerDay undefined console.log("You will need " + totalPigout + "bars of Snickers to last you until the ripe old age of "

• maxAge + "."; VM919:2 Uncaught SyntaxError: missing ) after argument list console.log("You will need " + totalPigout + "bars of Snickers to last you until the ripe old age of "
• maxAge + "."); VM942:1 You will need 94900bars of Snickers to last you until the ripe old age of 105. undefined console.log("You will need " + totalPigout + " bars of Snickers to last you until the ripe old age of "
• maxAge + "."); VM945:1 You will need 94900 bars of Snickers to last you until the ripe old age of 105. undefined

JavaScript, Terminal, Git and GitHub

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

• sayHello() will call the function sayHello and hopefully will output the string "Hello!" to the console log file. typing sayHello will result in an error.

What is the difference between function parameters and arguments?

• Parameters are similar to varibles used inside the scope of a function. Arguments are values passed to the function to perform some action.

What is the keyword return used for?

• The return keyword is used to pass back 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 can only be used inside the function in which it was declared. When the function is finished, the local variables are released, freeing up memory. Global variables are created outside a function and can be used anywhere in the script. They are stored in memory as long as the web page is loaded into the web browser, requiring more resources to run.

Show and Tell

The five (5) main ingredients of UX

1. Phsychology

How much work does the user have to do to get what they want? - https://www.cdc.gov/hpv/parents/vaccine.html

• This is a good design because I was able to find relavent information on this page that answered the question that brought me here. It's well organized and easy to read and scroll. It also has a good menu that shows me additional information I may not have even known about.
• And for a site that doesn't work very well - https://cbs.alliedbenefit.com/online/ech.asp
• It has gotten better in the last year but it still needs quite a bit of work. The interface is difficult to read, the options are small and hard to select and you typically have to try it a few times with different options selected to get what you want from this site.

2. Usability

• Are you being clear and direct, or is this a little too clever? https://www.westerracu.com/
• To me, there is just too much happening on this page. There is a lot of informatino here but it feels busy and crowded and while I don't have much of a problem finding what I need, it helps that i've been here before and know what I want to do.
• For a better version - https://www.usbank.com/index.html
• It is similar and while there are still many options, it doesn't seem so busy, my eye flows over the menus and options easier and most times I come here I want to log in first and so they have made that hard to miss. On the other site, you have to hunt for the login screen.

3. Design

• Do users think it looks good? Do they trust it immediately? - https://www.google.com/
• Arguably one of the most iconic designs of our time. Looks great, feels solid, don't have to look far to find what I came for.
• And for a lesser option - https://www.yahoo.com/
• Actually, I'm not even sure yahoo emphasizes search any more but the look and feel on this page are completely different. I can find the search box without much difficulty but I am also tempted to click or scroll or otherwise deviate from my intended purpose when I came here.

4. Copywriting

• Does it inform the user or does it assume that they already know what its about? https://www.t-mobile.com/
• This page changes constantly and can seem a bit busy but it's a good example of both informing the user and assuming they know something about thier product.

5. Analysis

• I understand the concepts here and I see the value of the data you can collect but i don't have a site I can monitor. The only data I have is from past clients and I don't think I can share that.