Skip to content

Instantly share code, notes, and snippets.

@gregoryanderson

gregoryanderson/anderson_mod_0_capstone.md

Last active April 24, 2019 16:32
Show Gist options
  • Save gregoryanderson/59b5e11bec270b6e086c3f045087412d to your computer and use it in GitHub Desktop.
Save gregoryanderson/59b5e11bec270b6e086c3f045087412d to your computer and use it in GitHub Desktop.
Download ZIP
capstone
Raw
anderson_mod_0_capstone.md

Capstone Project

Day 1: Computer Set-Up, HTML, and Gear Up

Reading Responses

  1. The purpose of HTML is to provide the fundamentals of what you see on the web browser. From my understanding, it ranges from the text, the markup, the images, and videos. The HTML code alone is clunky and antiquated, but without it, there is nothing to build upon.
  2. The difference between a element and an tag is that an element represents a different type of HTML code. For instance <h1> and <p> are different elements representing 'Heading 1' and 'Paragraph'. A tag is a set of a particular element that open and closes the function. For instance, <h1> This is a header </h1> would be a complete tag.
  3. An attribute indicates what kind of extra information is being applied to the element. For example, a language code can be affiliated with the <lang> element.
  4. The head, title, and body make up most visible parts of the web browser. The body is most of what is seen on the page of the web browser. The head is usually the title of the web browser. The title is what goes above the browser in the title bar.
  5. The way to view the source code in the Google Chrome browser is to right-click anywhere on the page and then click, "View page source".
  6. Five examples of tags are <body> which represents the main section of the information. <h1> which would be the main header of an article. <i> which would italicize information within its tags. <ul> which offers an unordered list. Finally, <li> which names an item on a list.
  7. Empty elements are elements that cannot have nested, or child nodes within them. Some of those are <area>, <base>, and <img>.
  8. Semantic markup is when you have HTML code that explains what the text is. <p> is a good example of this because <p> explains that within that tag is a paragraph. <b> is not an example of semantic markup because that just tells us to bold the text, but does not give us insight as to what the text is.
  9. Three new semantic elements introduced in HTML5 are <article>, <header>, and <footer>.

Codepen Link

https://codepen.io/gregoryanderson/pen/zXWMqG

Day 2: HTML and CSS

Reading Responses: Part 1

  1. There are three different types of lists, ordered, unordered, and definition. An ordered list is one that is numbered. An example of this would be a recipe where there are ordered steps that culminate to a final product. An unordered list would be a list that is bulleted, or dashed. An example of this would be a grocery list where you just list off all of the things you need in no particular order. Lastly, a definition list. A definition list is just a list of words, followed by there definition. Very much like you would find in a dictionary.
  2. There are four parts that make up the basic structure of a link. First, you have the tag, <a> and that is followed by the term, <href> which is then followed by the actual link to the page. Then, you place in the text you would like the user to see when they are to click on the link. Finally, the tag is closed with </a>.
  3. If you would like to get make a link open a new tab when it is clicked you should use the attribute <target=_blank> in relation to the href.
  4. When you are looking to link to specific parts of the same page then what you need is a relative URL. These are helpful when building a site because you do not need to include a domain name or hosting.

Reading Responses: Part 2

  1. The purpose of CSS is for style points. If HTML is the foundation that we build upon, CSS is the paint, landscaping, and upkeep that we use to make web pages attractive.
  2. Cascading, as it pertains to CSS, is in reference to the cascading effect that style guides may have. For instance, a style guide may call for a certain font, but later, another font is referenced in a later style sheet. The last font that was called upon will overrule the others, as the rules have cascaded down the style guides to a final resolution.
  3. The basic structure of a CSS rule contains two parts- the selector and the declaration. The selector identifies what type of HTML is going to be styled by this particular declaration. For instance, you may choose <p> or <h1> and all that is identified as a paragraph or header one will be styled appropriately. The declaration is what will be assigned within that particular selector. For instance, all assigned to <p> will have comic sans font, or a blue border around it.
  4. In order for a CSS style guide to be referenced, there must be a link that attaches the CSS file to the HTML file. It would look something like this: <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head> This link should connect the HTML sheet and CSS.
  5. When it comes to using an internal versus an external CSS style guide it depends on what you want. An internal CSS style guide is useful when you want to influence only the current page that you are working on, but to not want to effect any other page within the site. This is good for pointed, explicit changes, but it tends to be clunky overall. When you use an external styleguide, this is useful for overarching concepts that will be repeated throughout your web page. This is also much cleaner code.
  6. Hex codes are a way of identifying a specific color. Or rather, a specific amount of RBG included within a color. They are six digit alphanumeric codes that are led with a pound sign. An example would be: #ee3e80
  7. The three parts of a HSL color property are hue, saturation, and lightness. A hue is expressed as an angle between 0-360 degrees and identifies where on the color wheel you want to work with. Saturation is expressed as a percentage, from 0-100% and it is the amount of gray in a color. Lightness is also expressed as a pecentage is is the amount of white or black in a color.
  8. The three types of typeface are serif, sans-serif, and monospace. Serif adds brush strokes to a letters adding detail. Sans-serif removes these brush strokes for a much cleaner look overall. Monospace is when every letter takes up a specific amount of space, or better, has a fixed-width.
  9. The three units in font size are weight, style, and stretch. Weight refers to a boldness affiliated with a text. Style refers to an italicization of the text. Stretch refers to the narrowness or extension that is assigned to the text.

Day 3: HTML, CSS, and Professional Development

Reading Responses: Part 1

  1. When using the input element of a form, you should always carry the action attribute. Usually, you will have a method and an ID attribute, too.
  2. When you are trying to include a dropdown menu, the element that you should include is the <select> box. This will contain two or more <option> elements.
  3. When you are trying to use an imput element to send data to a server, the type attribute should be set to submit, as in, <input type="submit">
  4. When you are trying to group similar forms together the <fieldset> element will be found as helpful.

Reading Responses: Part 2

  1. There are a few differences between border, margins, and padding. Borders surround every box and separate the edge of one box to another. Margins sit on the outside of the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes. Padding is the space that is set between the border of a box and any content contained within it. Any padding can increase readability.
  2. The CSS rule for padding goes clockwise, starting at the top. Therefore, first would be the north edge of the box, followed in order by east, south, and west.
  3. Block and Inline are display properties. Block formatting stacks information on top of each other, whereas inline formatting arranges information in a line.
  4. Fixed positioning, as it pertains to layout, is exactly that. When a box is set to be in a fixed position, it does not move with the browser. The positioning of the box remains the same. The z-index score is important in this regard because boxes will overlap each other and weaken the readability of the information.
  5. A fixed layout varies from a fluid layout within its width variability. A fixed layout with have a specific amount of pixels that represent the width of the layout. A fluid layout with vary the amount of pixels and its size will change due to the percentage that the user chooses to view it from.

Day 4 HTML,CSS, and Javascript

Reading Responses: Part 1

  1. The alt is important when configuring an image because this will provide a text description of the image if the image is unable to load within the browser.
  2. A picture is determined to be inline or block by the elements that surround the image. If you place the image within the HTML block elements, such as <p> or <h1> the image will configure in block format. It is important to note that block formatting will always begin on a new line. If you choose to embed the image, using <em> for instance, this image will not sit on a new line and instead format within the line.
  3. In examing the differences between a jpg format and a png format, the argument largely exists within colors. If you have an image that is largely the same color, the png format will be best. If you have an image that has lots of colors within it, even subtle changes, then the jpg format will be more appropriate.

Reading Responses: Part 2

  1. It is worthwhile to use CSS to store photo sizes rather than embedding them into you HTML because this will help your web browser load more smoothly. The CSS will allow the rest of the information load, besides the image, but it will also give the information about how much space to leave to wrap around the image.
  2. An image sprite are multiple images that are used in the space of one image. This is particularly useful for a button. A button will have one image when a user sees it on the browser, a slightly different image as the user scrolls over it, and lastly, a final image as the user clicks the image.

Day 5: Javascript

Reading Responses

  1. When you are declaring a variable you must first enter the term var to indicate that this is in fact a variable. Then you must give the var a name by declaring the variable. From the example in the book, the var was declared as quantity. Lastly you must give an = that acts as the assignment operator. This is you stating that you have assigned a value to the variable and may also redefine the value of a variable. Until you do this the variable is undefined.
  2. The three big data types are strings, numbers, and booleans. A string data type contains letters and numbers, but only when the numbers are not used for mathematical equations. For instance, a phone number would be a string because you are not adding or subtracting anything to it. Numbers would be things that you would commit a mathematical equation to. Such as .75, 400, or -3. Finally, booleans have only two data types and those are true and false.
  3. The six rules for naming a variable are:
  • The name must begin with a letter, a dollar sign $, or an underscore _. It may not begin with a number.
  • The name may contain letters, dollar signs, underscores, or numbers. It may not contain periods or dashes.
  • The name may not contain a keyword. For instance, var is a keyword and it may not be used.
  • The name is case sensitive
  • The name should decribe the purpose. For example, firstName should be used to get a first name, not a person's age.
  • The name should be written in camelCase. Meaning, each word after the first word should be capitalized.
  1. An array is useful when you do not know the amount of values that a variable will contain. For instance, a grocery list is a good example of an array because you will not have the same amount of values each time and you have a list of similar items. To access a value from an array specify the index number for that value inside the square brackets. TO change the value, select the value and assign it a new value.
  2. It seems as though this is a 'rectangles are squares, but squares are not rectangles' type of conundrum. An expression is a statement of code that returns a value as a result of an action. It seems as though a statement is only the action and does not require the value.
  3. The three type of operators are assignment operators, which assign a value to a variable. Arithmetic operators, which perform basic math, and comparison operators, which compare two values and return true or false.

Using the Console

Unsure if you needed to see these, but here they are

var city; undefined city = "Denver" "Denver" var numKids = "2" undefined var partnerName = "Lucy" undefined var job = "developer" undefined "You will be a" + job + "in" + location + ",and married to" + partnerName + "with" + numKids + " kids." "You will be adeveloperinhttps://s3.amazonaws.com/TrainingNerd/JavaScriptForBeginners/exercises/variables.html,and married toLucywith2 kids." "You will be a " + job + " in " + city + ", and married to " + partnerName + " with " + numKids + " kids." "You will be a developer in Denver, and married to Lucy with 2 kids."

Had an interesting experience when I declared a variable location rather than city

var currentYear = 2019 undefined var birthYear = 1986 undefined var age= (currentYear- birthYear) undefined var age= ("currentYear"- "birthYear") undefined var calculateAge = "currentYear" - "birthYear" undefined var age= currentYear- birthYear undefined currentYear-birthYear 33 var age=currentYear-birthYear undefined age=currentYear-birthYear 33 "You are either " + (currentYear-birthYear) + " or " + (age+1) "You are either 33 or 34"

I had a little trouble with this one, but got the final answer

maxAge = 100 100 snacksPerDay = 2 2 age= 33 33 var supply = (((maxAge-age) * 365)snacksPerDay) VM678:1 Uncaught SyntaxError: Unexpected identifier var supply = (maxAge-age) * (365 * snacksPerDay) undefined supply 48910

Also, I know that formatting is not great, but I was unsure of how else to do it.

Day 6: JavaScript, Terminal, Git, and GitHub

Reading Responses

  1. I was not sure how this would turn out, so I put it in the Chrome Programmer Tools and it seems that when we just call sayHello it repeats the function that has that moniker. When we call sayHello(), it seems that the parenthesis set the function into motion.
  2. I have found that the parameter is variable in the declaration of function and an argument is the actual value of this variable that gets passed to function. For instance, they talk about width being a parameter within the book, the argument would be the actual value of that width that the function uses to come away with an answer.
  3. The return keyword is used for providing the expected value of a function.
  4. Local variables seem to be declared within a function and global variables are outside of the function. Local variables can run within multiple functions and return different values without naming conflicts. Global variables exist outside of the function, are prone to naming conflicts, and exist as long as the browser is up. I would assume that overarching numbers that pertain to a problem would be ok to store as a Global variable.

Day 7: UX/UI

Reading Responses

Psychology

What is the user’s motivation to be here in the first place?

Google

Good Example I will start with 'Google' which is the gold standard in UX. It could be be good example in any of these five examples. We all know why we 'Google'. Our motivation is to search and that is what is provided. Google gets us to where we want to go on the internet and sorts through all the riff raff. The search bar is center and is not impeded by outside distractions. Its 'subconciously expected' to be there. It's perfect and timeless.

JKO

Bad Example

As someone just leaving the 21st century military, the worst part of my life on active duty was dealing with military websites. JKO is where (at least for the Army) mandatory training is conducted. When you click the link to JKO, you still aren't even in JKO. You have to click another link that is not obvious on the page to, 'Enter JKO'. Then you have to sign in to get anywhere on the site. As someone that has dealt with the website, I can do it. But it was trying during my first few go-arounds. Next, when you are on the site, the trainings are poorly named, and therefore, not obvious to find. The user is there to do trainings, and could spend 10 minutes to an hour just getting to the training. Don't be like JKO.

Usability

Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?

Juul

Good Example

Before I started this project, I looked up and example of hated companies and took a look at their websites. These companies need to get there image adjusted and a good website design can do that. Juul stood out. I have no interest in getting mango flavored cancer, but there seem to be a lot of people who do have that interest. I imagine when you go to the website, you want to buy some stuff, but you may also want to check out some other aspects of the website, too. Well, it does not jump out immediately when you go to the site, but when you can't find something on a site, usually you scroll down and see if there is something missing. As you scroll, there is a white box that is fixed on the page that sticks out while everything else scrolls. "Want to start shopping?" it asks. I imagine for most visitors of the site, the answer is yes. I would file this under, 'hard to miss'.

Bad Example

Blackboard

I wish that I had some old links of online courses that I have taken in the past. I don't. But I have missed more than one assignment because I thought I submitted something via blackboard and I apparently didn't. It doesn't really matter, though, because when you go to the website and just try to sign in anywhere, there isn't an option. Imagine going to a class and the professor said, we will be using blackboard for some assignments in class and trying to find that class on your own. It won't happen.

Design

Do users think it looks good? Do they trust it immediately?

Good Example

Montsanto

Another on the 'hated companies' list and another really good website. The color tones are soft and warm. The text is easy to read, yet sophisticated. Each page feels like it belongs to the same website and all include a nice picture of multi-racial, multi-generational folks smiling in cornfields. If you didn't know anything about Monsanto, you would really just think all-around-good-guys after heading to the website.

Bad Example

Facebook

Maybe, I am taking on too big a fish here. Facebook has made billions of dollars and a lot of that is rooted in design. That being said, I hate the design. When examining Facebook, I would emphasis the 'trust' part here. I am immediately shown a wall of posts from 'friends' with targeted ads every three posts or so. Its very busy and hard to evoke an actual emotion that is worth more than an emoji, but perhaps that is why there upvotes are emojis. There was a down-vote button in the past, but that was thrown out after people would down-vote ads that companies had paid for. Those are now angry faces that are confusing because is the person angry at the contents of the article or what it means? Then, if I choose a particular thing to comment with, am I know going to get more targeted ads. No trust. Time for a redesign.

Copywriting

Is it clear, direct, simple, and functional?

Good Example

DuoLingo

When you enter the site, there is one green box and it says, "Get Started". Great! That's what I want to do. Then it brings you to a page with neatly ordered languages to choose from. The layout is simple and direct and you are not distracted with things that you did not come for. There is no mistaking what you are choosing and it directs you exactly where you would like to go.

Bad Example

USA Today

When you go to the site, there is a main article which is side-saddled by about 10 links to other articles. There is a nav bar, but sized at about the same font as the links. The articles do not appear to be ordered in any particular order, with a sports article, followed by world, then politics, and so on. The largest word on the page, "USAToday" serves no purpose on the main page. It is too busy and if you came here for one story, you may have trouble finding it and get distracted by the rest of the page.

Analysis Are you looking for subjective opinions or objective facts?

Good Example

538

I don't know if this counts as presenting objective facts as it pretains to UX, but I love this website when I am looking for objective source material. Rather than offering opinion then data, 538 offers data first. When a user goes to the website, you can find where the sources came from and you can take that information at a mathematical value rather than at a subjective bias.

reddit

I also love reddit, but when it comes to offering objective opinions they are hard-pressed. Reddit has many subreddits that are all self-sorting and filled with there own biases. While reddit does offer a home for every opinion on the spectrum, each user does not get to see that. They are sorted into categories that stand with their argument.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment