MichaelSchneider-mod-0-capstone.md

MichaelSchneider-mod-0-capstone.md

Michael Schneider's mod-0 capstone project

---

Day 1

• Complete Day 1 setup

• Set up code-pen account

• Answer the following questions:

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

  • HTML provides a structure for the page by establishing basic elements and tags.

• What is the difference between an element and a tag?

  • An element comprises the tags, plus content. Elements are usually made up of two tags, an opening and closing. These tags describe what information is enclosed between them and make up the overall element.

• Why do we use attributes in HTML elements?

  • Attributes give our elements extra informaiton about the contents they contain. They appear in the opening tag and comprise a name and a value with an equal sign in between.

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

  • The head contains information about the page including its title, characterset and other related meta data.
  • The title gives us a basic idea of the content of the page. It is shown in the browser Tab above the site.
  • The body holds all of the content that will be displayed to the user inside the browser window.

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

  • Use the shortcut keys Command+Option+J, or fn+F12 to view developer tools, then go to elements to view the HTML. Alternately you can right-click and select "View Page 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.
  • Heading Tags - <h1>, <h2>, through <h6> . Heading tags are used to show titles or other large text, usually leading into other content. h1 being a main heading and h2-h6 being for smaller subheadings, decreasing in size as the number increases. Headers need a closing tag in the form of </h1>.
  • Bold - Wrap text in the <b> and </b> tags to make the contained text bold.
  • Italic - Wrap text in the <i> and </i> tags to italicize it.
  • Line breaks - Use <br /> to create a single line break inside exsisting text. This would come in handy if the text is already inside a <p> tag and you need a line break between content. Does not require a seperate closing tag.
  • Horizontal rule - Use <hr /> to create a horizontal line across the page, used for delineating changes in content. Does not require a seperate closing tag.

• What are empty elements?

  • An empty element cannot have any children, it cannot contain other nested elements. Empty elements are used to define links and images amoung other things. They do not have closing tags.

• What is semantic markup?

  • Semantic markup is used to add extra information to a page without altering its structure. Examples would be using <strong> to indicate content has strong importance or <cite> to reference a work's citation. Needs a closing tag.

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

  • <header> is a new element that clearly places content inside of it at the top, the header, of the page.
  • <nav> an element used to describe navigation content, helps the user get around the site.
  • <article> a new element to clearly show articles on the page. Especially helpful for search engines in deciding important content on your page.

CodePen practice:

https://codepen.io/mschneider247/pen/PvMeVw

Gear up reflections:

https://gist.github.com/mschneider247/9455b5183026bf27f50f97cb0f66ad35

---

Day 2

• Daily warmup with typing.io

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

  • ordered lists contain numbered elements and would be used for processes or instructions where each element needs to be completted in a particular order. unordered lists simply have bullet points next to each of their elements otherwise just like an ordered list. A definition list uses extra tags to give a term and its definition their own tags, creating a list of paired elements.

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

  • To connect to another website we would use the <a> tag. Inside we define where the link will go and what the link will look like to the user as follows: <a href="http://www.random.com">random</a>

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

  • After your href attribute add target="_blank" this will open the link in a new tab

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

  • First decide where the link will jump the user to. Then add an id to the opening tag, for example id="content". Now we'd change the href value in our a tag to read href="#content". The pound sign indicates the id the link will follow.

• What is the purpose of CSS?

  • CSS allows us to dress up our HTML by applying seperate rules to govern how seperate elements will be displayed.

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

  • Cascading Style Sheets. Cascading describes how the code will be executed, from top to bottom. If there are rules near the bottom that conflict or mirror rules from above the bottom most examples will be implemented. Also, CSS will precident more specific rules over more general ones.

• What is the basic structure of a CSS rule?

  • CSS rules have two parts, a selector and a declaration. The selector selects the HTML element for the rule to apply to and the declaration is the style change that will occur to the selected element. The selector is declared first followed by a space and the declaration wrapped in {}.

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

  • By using the <link> element. The <link> element is an empty element with three attributes: href to indicate where the file is in relation to the HTML, type to indicate the type of document you are linking to (value should be "text/css", and rel to indicate the relationship between the HTML and CSS (in this case "stylesheet"). <link> needs to be nested inside the <head> element of your HTML.

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

  • The larger your site is or the more pages it has the easier it is to have your CSS in an external file. This way all CSS choices can be viewed and edited in their own file, instead of replicating work in the individual HTML. An internal CSS section is acceptable for small simple pages, but a seperate file is encouraged.

• Describe what a color hex code is.

  • Colors on your computer screen are made by mixing three primary colors, red, green and blue. Hex code uses hexidecimal code to indicate a value for each of the colors. Hex code is used so that we can have a range of 0-255 for any of the three values while declaring this with just two characters. A Hex color code is started using the # sign followed by 6 characters, 2 for each color. #1858bf translates to red:24 green:88 and blue:191 creating a pleasant blue.

• What are the three parts of an HSL color property?

  • The HSL color property is broken down into Hue, Saturation and Lightness. Where Hue indicates the color as a value between 0 and 360. The Saturation is expressed as a percentage where 100% is full saturation and 0% would turn into grey scale. Lightness uses a percentage to indicate the amount of white (100%), black (0%) or normal lightness (50%) of the color.

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

  • The three main categories are Serif, Sans-Serif and Monospace. Serif fonts look like they have little feet or hands, or simply extra embelishment on the ends of lines. Sans-serif fonts do not contain the extra details of Serif fonts and have straight ends to lines making them cleaner. Monospace fonts give a fixed width to each character. Usually a character like 'i' would take up less space than 'm' but not in Monospace.

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

  • Font-size uses units in pixels, percentages or ems. Pixels are a commonly used unit because they allow the developer to precisely set how much space their text takes up. Percentages work on the idea that the default text size is 16px or 100%, lower percentages for smaller text and bigger percentages for larger text. An em is equivelant to the width of the letter 'm', where 1.0em equals the default size of 16px. 2.0em would be 32px and 0.5em would be 8px.

Ongoing CodePen practice:

https://codepen.io/mschneider247/pen/PvMeVw

---

Day 3

• Daily warmup with typing.io

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

  • The most important attribute is type this allows you to set many values like "text", "password", "radio", "checkbox", "file", "submit", "image" and more. These all descripe the type of imput being submitted.

• What element is used to create a dropdown list?

  • The <select> element is used for dropdown lists. It has its own elements in the form of <option>. <option> gives the user their actual choices. In addition the <select> element should be named, indicating the form it will uploaded to.

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

  • The attribute should be set as follows type="submit" in addition you can add attributes name to give the submission its own name. The attribute value allows you to change the text that appears in the button.

• What element is used to group similar form items together?

  • Grouping related form items together uses the <fieldset> element. Nested inside this you probably want to include a <legend> element to give the grouped form a text header the user can see.

Ongoing CodePen practice:

https://codepen.io/mschneider247/pen/PvMeVw

• Describe the differences between border, margin, and padding.
  • The border property is the the main container, it sets where boxes sit next to each other. The margin sits outside of the border and will create a gap between boxes. The padding sits inside the border and will create a gap between it and the content.
• For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
  • The values correspond in order to: top, right, bottom and left.
• Describe the difference between block-level and inline elements.
  • Block level elements create horizontal breaks between boxes, forcing following elements onto a new line. Inline elements do the opposite by creating verticle breaks and string content out in a horizontal line. When it reaches the end of the screen it then wraps down to the next line.
• What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
  • Fixed positioning allows you to place content in a single place on the browser's screen. Even as the user scrolls or moves around this content would stay in the same place. Z-index allows us to declare which content will appear at which level towards or away from the user. A higher Z-index value indicates a plane which is on-top or closer to the viewer.
• What is the difference between a fixed and liquid layout?
  • A fixed layout has set dimensions and will not change its appearance based on screen size. This does give the developer precise control of sizing, but will not account for different displays on different devices. A liquid layout will change depending on the size of the screen, making more efficient use of space on different devices. All the same it introduces more constraints on the developer. They must now consider a much broader range of how their content will be displayed: shrunk, stretched, overlapping, etc.

Ongoing CodePen practice:

https://codepen.io/mschneider247/pen/PvMeVw

Extra link to Career Development Gist

https://gist.github.com/mschneider247/c7bd797c279947af43cfcf10797fafb9

---

Day 4

• Daily warmup with typing.io

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

  • The alt attribute is important for providing a basic text description for the blind, or when the image cannot be seen by the user.

• What determines if an image element is inline or block?

  • An <img> element is both. It behaves like an inline element in terms of its placement, but it still has a height and width like a block element. How it will appear is dependent on the elements around it. If it were placed in between <p> tags it would act like an inline element. If it were placed before or after a block element like <h1> it would act like a block element as well.

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

  • .jpg is more useful when showing a broad range of colors. gradients or other detail, like in photographs. .png is a better choice for works with flat color, like logos or diagrams.

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

  • If you specify height and width in CSS then you have one central place to modify and change values. Whereas if you tried it in the HTML you would have to set values for each instance. CSS allows you much more flexibility.

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

  • Sprites are especially helpful where interface items change between multiple images from clicking or hovering over them. Instead of the browser loading a seperate file for all the images it can load a single sprite. This is a larger image but requires the browser to download fewer files. Once we have a sprite we can use CSS commands to focus on the part of the image we want to use.

Ongoing CodePen practice:

https://codepen.io/mschneider247/pen/PvMeVw

• Read Introduction and Chapter 1 in JavaScript and JQuery
• Watched short video about Chrome developer Tools by The Net Ninja

---

Day 5

• Daily warmup with typing.io

• 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 using the variable keyword var followed by its name and a semicolon. So a new variable might look like var tacos; or var houses;. The equal sign is known as an assignment operator and will assign the variable name to a value in any of the variable types. So we could use var tacos = "delicious"; to assign the variable tacos to equal the string delicious. We could also assign var houses = true; or var tacos; tacos = 4;. The equal sign will pair the value that follows it to the variable that preceeds it.

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

  • Numbers are straight forward, they handle numbers. They are fixed units and can be used in math equations. Strings represent a linked group of letters and/or other characters. Strings are regularly used to display and manipulate text. Booleans represent True or False, or On and Off. A boolean is an either/or variable that is especially useful for tests and deciding between paths while a script is running.

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

  1. Variables cannot start with numbers, they can start with a $ an _ or a letter.
  2. While varaibles can also use the starting values listed above anywhere in the name, variables cannot use the - or . characters.
  3. You cannot use reserved words or keywords. Keywords are character patterns currently used to activate existing commands within JavaScript. Reserved words are there in case the JavaScript developers need to add more keywords in the future. For example we learned var is explicitly used to declare a variable and cannot be used as the variable's name.
  4. Variables are case sensitive. var = mermaid; is different than var = Mermaid;. However, it is considered bad practice to have distinct variables that differ only in case. This would make the code extra difficult to read.
  5. Your varaible name needs to describe the variable. No one is helped by vague names or difficult to follow references. As such the value "1600 Pennsylvania Ave" should be given a variable name like whiteHouseAddress.
  6. Use camel case when giving variable names with multiple words. The first letter of each word is capitilized starting with the second word. So, favorite meal, should become favoriteMeal or, best parks near me, should become bestParksNearMe.
  • Some reserved words are abstract, transient, let, continue, do and function amoung many others.

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

  • Array's are great at dealing with multiple related values, thats what they're for! An array can have many items or no items. The items can be in any of the different variable types and all this can be changed and moved around. An array uses an index numbering system to keep track of all the internal variables it contains. This numbering system starts with 0 and can be accessed by adding [number] to the end of the array. The number value you enter will select that place in the array. Given var myArray = [4, 6, 9]; then myArray[1] holds the value 6.

• What is the difference between an expression and a statement?

  • An expression will evaluate two or more values and return a single value. These values are called operators. A statement is a direct application of whatever the code details. An expression can be used in place of a statement, however the opposite is not true.

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

  1. Assignment operators pass a value to a variable. dogName = "Steve";
  2. Comparison operators check two values against each other and return true or false. tryAgain = 17 > 2;
  3. String operators combine seperate strings together into a new string directions = "Turn left. " + "Go two blocks " + "and look to your right."

For each task listed below, enter it in the console:

• 25
• "this is my string" (notice the output's color difference between a number and a string)
• var myNewString = "Hello Turing!";
• myNewString Before you hit Enter, what do you expect to see in the console?
  • I expect to see "Hello Turing!" with the letters in red and the quotes in black.
• var myNum = 9;
• myNum Before you hit Enter, what do you expect to see in the console?
  • I expect to see 9 in blue.
• var anotherString = "How are You?"
• "Connect" + " " + "these" + " " + "strings." What happened? This is called string concatenation. Notice the strings with spaces.
  • The strings were put together into one.
• myNewString + anotherString This is also string concatenation using variables.
• 5 > 3 returns a boolean value of true. How could you change this expression to return false?
• 5 < 3 would return false.
• "2" === 2 and "2" == 2 Why does one of those expressions return true and one return false?
  • === checks for strict equality between the variables, so that both type and value must equal. The string "2" does not strictly equal the number 2. == checks for loose equality by trying to convert the two values into a common type first. Javascript therefor thinks "2" == 2 is true the same as it would say 0 == false is also true.
• if (8 < 9) {console.log("Hey!")} Before you enter this code in the console, what do you think will happen? Will it log Hey to the console?
  • Yes, it will evaluate 8 < 9 to be true and then follow the instruction to print Hey! to the console.
• Write an if/else statement where the code in the else block is executed. For example: if (3 < 1){console.log("if block")} else {console.log("else block")}

if (18 < 9) {console.log("The if is wrong")} else {console.log("The else is right!")}

Use the console to solve these problems.

• The Fortune Teller:

var numChildren, partnersAge, geographicLocation, jobTitle;
undefined
numChildren = 196;
196
partnersAge = 99;
99
geographicLocation = Kalamazoo;
VM997:1 Uncaught ReferenceError: Kalamazoo is not defined
   at <anonymous>:1:1
(anonymous) @ VM997:1
geographicLocation = "Kalamazoo";
"Kalamazoo"
jobTitle = "Cat Farmer";
"Cat Farmer"
console.log("You will be a " + jobTitle + "in " + geographicLocation + ", and married to " + partnersName + " with " + 
numChildren + " kids.")
VM1344:1 Uncaught ReferenceError: partnersName is not defined
   at <anonymous>:1:94
(anonymous) @ VM1344:1
var partnersName = "Ted";
undefined
console.log("You will be a " + jobTitle + "in " + geographicLocation + ", and married to " + partnersName + " with " + 
numChildren + " kids.")
VM1392:1 You will be a Cat Farmerin Kalamazoo, and married to Ted with 196 kids.
undefined
console.log("You will be a " + jobTitle + " in " + geographicLocation + ", and married to " + partnersName + " with " + 
numChildren + " kids.")
VM1396:1 You will be a Cat Farmer in Kalamazoo, and married to Ted with 196 kids.

• The Age Calculator

var currentYear = 2019;
undefined
var birthYear = 1983;
undefined
var maxAge = currentYear - birthYear;
undefined
console.log(maxAge);
VM1549:1 36
undefined
console.log("You are either " + (maxAge -1) + " or " + maxAge);
VM1651:1 You are either 35 or 36

• The Lifetime Supply Calculator

var currentAge = 36;
undefined
var maxAge = currentAge * 3;
undefined
var neededPerDay = 342;
undefined
console.log("You will need " + ((maxAge - currentAge) * (365 * neededPerDay)) + "to last you ntil the ripe old age of
" + maxAge)
VM1960:1 Uncaught SyntaxError: Invalid or unexpected token
console.log("You will need " + ((maxAge - currentAge) * (365 * neededPerDay)) + " to last you until the ripe old age of " + maxAge)
VM2015:1 You will need 8987760 to last you until the ripe old age of 108

---

Day 6

• Daily warmup with typing.io

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

  • JavaScript will realize that sayHello is a function, but since we haven't used the () after the statement it assumes we're not trying to run the function, but that we are asking about it. So in this first case it simply prints the function without executing it. When we include the () even without a value inside, JavaScript knows we're trying to call the function sayHello and will execute the console.log to print: Hello!

• What is the difference between function parameters and arguments?

  • Since we create functions when we need reusable code, the individual functions don't know exactly what data will be passed. They only know, that given certain data they will perform certain tasks. Setting up the initial function we define values inside of the () these values are the parameters and indicate local variables that will be used by the function. When we actually call the function later and supply real values, these are called the arguments. The arguments will dictate how any particular instance of the function is executed.

• What is the keyword return used for?

  • The keyword return when used in a function will stop the function and no further local commands will be processed. The returned value can be set to one or more variables by using the different types, especially arrays. Whatever processes you conducted in your function can then be passed back to the main program.

• 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 allow much more flexibility. They will be initiated only in the functions that run them and you don't have to worry about names conflicting. After the function has run the variables will be forgotten. Use local variables whenever possible, they use up less system resources. You would use global variables when certain values are called again and again. For example when logging into my bank or social media accounts. The browser needs to know its "me" and give me only "my" content. After that local functions can tell "me" how much money or how many friends I have.

• In the console work through these problems:

• The Fortune Teller:

function fortuneTeller(numChildren, partnerName, geoLocation, jobT) {console.log("You will be a " + jobT + " in " + geoLocation + ", and married to " + partnerName + " with " + numChildren + " kids.")}
undefined
fortuneTeller(72, "Bilfer", "The Bottoms", "Trog Hauler")
VM859:1 You will be a Trog Hauler in The Bottoms, and married to Bilfer with 72 kids.
fortuneTeller(1, "Burmbom", "Istanbul", "Turkey Donker")
VM2131:1 You will be a Turkey Donker in Istanbul, and married to Burmbom with 1 kids.
fortuneTeller(3, "JemieMa", "Greater Tomgurchistan", "Stur Trimmer")
VM2131:1 You will be a Stur Trimmer in Greater Tomgurchistan, and married to JemieMa with 3 kids.

• The Age Calculator:

function calculateAge(birthYear) { var thisYear = new Date().getFullYear(); 
var age = thisYear - birthYear;
console.log("You are either " + (age -1) + " or " + age + ".");}
undefined
calculateAge(1492)
VM1718:3 You are either 526 or 527.
calculateAge(20)
VM2092:3 You are either 1998 or 1999.
calculateAge(2018)
VM2092:3 You are either 0 or 1.

• The Lifetime Supply Calculator:

function calculateSupply(age, amountPerDay) {
var maxAge = 20;
var yearsConsumed = maxAge - age;
var amountPerYear = amountPerDay * 365.25;
var roundedPerYear = Math.round(amountPerYear);
if (age <= maxAge) {
console.log("You will need " + (roundedPerYear * yearsConsumed) + " supply things to last you until the ripe old age of " + maxAge + ".")}
else {console.log("You Are Dead!! Zero Supplies needed...")}
}
undefined
calculateSupply(19, 1)
VM3663:7 You will need 365 supply things to last you until the ripe old age of 20.
undefined
calculateSupply(22, 40)
VM3663:8 You Are Dead!! Zero Supplies needed...
undefined
calculateSupply(4, 1.24583745)
VM3663:7 You will need 7280 supply things to last you until the ripe old age of 20.

• Practice through some JavaScript basics exercises on w3resource and check your code against their solutions.

• Work through Command Line Crash Course

  • Do all of the exercises: 1-15

• Git and GitHub

  • Read through the the Git handbook from GitHub

---

Day 7

• Daily warmup with typing.io
• Learn About Your Text Editor - Sublime Text!
• Make A New Webpage Using Sublime Text, Include:
  1. Content about Sci-Fi books
  2. Headings for the page and 3 books
  3. Text about the books
  4. Links to where the books can be purchased
  5. Cover Images of the books
  6. A list of other sci-fi books
  7. A form asking the user what book genre they like the most
  8. Light blue, dark blue, black and silver used as colors

Questions from UX Crash Course: 31 Fundamentals.

1. Psychology
   • How much work does the user have to do to get what they want?
     • Good Support: https://www.youtube.com/
       • The user can get a video playing with a single click of the mouse and extra content is offered and displayed prominently.
     • Violates Question: http://art.yale.edu/
       • This is a terrible site. To get around at all I have to squint and carefully look at the elements. Text is sometimes in the same or similar color to the background. There are distractions everywhere.
2. Usability
   • Have you provided everything the user needs to know?
     • Good Support: https://theoatmeal.com/
       • The basic purpse of the site is clearly stated at the top "Comics, Blog, Books, Shop". The content is easy to interact with and well placed on the screen. Once the user has chosen their basic reason for being at the site, the site branches off into more defined pages for those purposes.
     • Violates Question: http://www.roverp6cars.com/
       • This sight provides way too much information crammed onto its main page. Trying to search parts is a nightmare. They might have what I'm looking for, but finding it would proove too frustrating.
3. Design
   • Do users think it looks good? Do they trust it immediately?
     • Good Support: https://www.irs.gov/
       • Easy to read titles, clear logos. Immediate menus for user input and help. The Color scheme is easy to look at and implies integrity.
     • Violates Question: https://www.uat.edu/
       • The site poorly sizes itself to my display. Too many moving parts that immediately make me question the sites purpose. They are supposed to be educators, but I'm worried they care more about appearances.
4. Copywriting
   • Is the biggest text the most important text? Why not?
     • Good Support: https://www.space.com/
       • The largest text on the page says SPACE, the second largest is the title of an article. They encourage you that you've come to the right place and that you should read an article.
     • Violates Question: http://www.arngren.net/
       • The biggest text here is still the website name, but after that, text size is all over the place. I can tell they're selling stuff, but otherwise its just a really cramped catalog.
5. Analysis
   • Are you looking at absolute numbers, or relative improvements?
     • Good Support: https://www.amazon.com/
       • I have to assume Amazon looks at absolute numbers. They are dominating in the business and I think income and number of customers are clear varaibles to indicate that.
     • Violates Question: https://jamilin.com/
       • Here I also have to assume, but in the opposite. I'm guessing Jami Lin has made a few relative improvements to this site, but considering how poorly it represents itself I don't think any absolute numbers have been considered. There are so many areas to improve, they should clearly lay out data points they are trying to acheive.

Submit my Mod 0 Capstone!

• Extra link to CodePen: https://codepen.io/mschneider247/pen/PvMeVw
• Turn in this gist with all my answers
• Turn in my Professional Development gist
• Turn in my Gear Up gist