Skip to content

Instantly share code, notes, and snippets.

@adamsjr8576

adamsjr8576/JohnAdams_Mod_0_Capstone.md

Last active July 30, 2019 16:35
Show Gist options
  • Save adamsjr8576/b46577dab65c7351ffe7cc7b9aa6cc55 to your computer and use it in GitHub Desktop.
Save adamsjr8576/b46577dab65c7351ffe7cc7b9aa6cc55 to your computer and use it in GitHub Desktop.
Download ZIP
Mod 0 Capstone Gist
Raw
JohnAdams_Mod_0_Capstone.md

Mod 0 Capstone

Day 1: Computer Setup, HTML, and Gear Up

  1. On a website, what is the purpose of HTML code?
  • The purpose of HTML code on a website is to describe the structure of the pages. It provides the structure and characteristics of text and other features on the website. If you have a sentence that is meant to be a header then it is HTML that defines that sentence as a header using HTML elements.
  1. What is the difference between an element and a tag?
  • A tag is what makes up an element, which is a combination of characters that live inside angled brackets. Typically, a HTML element is made up of two tags - an opening tag and a closing tag. The element tells the browser something about what is inside of the two tags, and the tags used are what define the element being used. A header element would be <h1></h1> and the information surrounded by the angled brackets are the tags.
  1. Why do we use attributes in HTML elements?
  • We use attributes in HTMl elements because they provide additional information about the contents of the element that otherwise would not be present. So, if you wanted to have a paragraph and then provide further information about that paragraph then an attribute would serve that purpose.
  1. Describe the purpose of the head, title, and body HTML elements.
  • The head contains specific information about the page that is not present in the main browser window. This often consists of the title, which is text that will appear in the title bar or in the tabs of the browser window. So, the <title> </title> element specifies the actual text present and the element specificies the location of that text. The body element contains all of the content that is seen and present inside the main browser window.
  1. In your browser (Chrome), how do you view the source of a website?
  • Go to View > Developer > View Source OR Option + Command + U

  1. 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. <h1></h1> The heading element <h1> is used for main headings. The size can vary based off of the browser but <h1> will always be bigger than <h2> and so on going down as far as <h6>.
    2. <b></b> The bold element is used to make the text enclosed within the tags to appear bold.
    3. <i></i> the italic element is used to make the text enclosed within the tags to appear italicized.
    4. <sup></sup> the sup element is used to contain characters that should be superscript such as 1<sup>st</sup>.
    5. <sub></sub> the sub element is used to contain characters that should be subscript like H<sub>2</sub>O.

  2. What are empty elements?

  • Empty elements typically only have one tag and do not contain content that is defined within them. They are used more for formatting tools that exist within a normal element such as a <p></p> element. For example the <br /> empty element can be used to create a break in the text format of a paragraph.
  1. What is semantic markup?
  • Semantic markup are text elements that are not meant to affect the structure of the web page, but rather just add additional information. These are often helpful in the context of screen readers or search engines that can access this additional information. Though, some browsers will display the contents of the elements in different ways, and the formatting that comes from them is not the main intent but rather to describe the content more accurately.

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

    1. <nav></nav> contains the major navigational blocks on the site
    2. <article></article> acts as a container for any section of a page that could stand alone like a blog post or comment.
    3. <section></section> groups related content together and typcially contains its own heading.

Code Pen Link

Pen Link

Day 2: HTML and CSS

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
  • The primary difference between the three main types of lists is how they are formatted. The ordered list <ol></ol> is organized so that each item in the list, placed within <li></li> tags, is numbered. An unordered list <ul></ul> uses bullet points instead of numbers. The definition list is the most unique in that it uses two different types of tags - one to contain the term being defined, <dt></dt>, and the other to contain the definition, <dd></dd>. The definition list formats the word being defined and then creates a break and indents the following definition.
  1. What is the basic structure of an element used to link to another website?
  • <a></a> element is used to link to another website and within that the attribute href is used to identify the URL. The text between the <a> tags is the link text and what the user sees as being the link. Example: <a href="http://mod0.turing.io/capstone/fe_engineering/">Mod 0 Capstone</a>
  1. What attribute should you include in a link to open a new tab when the link is clicked?
  • The target attribute should be included in the link element to open a new tab when the link is clicked. Example: <a href="http://mod0.turing.io/capstone/fe_engineering/" target="_blank">Mod 0 Capstone</a>
  1. How do you link to a specific part of the same page?
  • Linking to a specific part of the same page uses the id attribute coupled with a different formatting of the href attribute. The id attribute is used to identify specific elements and label them with a unique call tag that can then be referenced in the href attribute. The id attribute should always start with a letter or an underscore and no two id attributes on the same page should be the same. the href attributw will start with # followed by the established id attribute that you want to link to. for example: you have a sub-header - <h4 id="tomatoes">Tomatoes</h4> you then have links at the top of the page that quickly guide you to the subsequent headers. The link to this header would look like this, <a href="#tomatoes">Tomatoes</a>.
  1. What is the purpose of CSS?
  • The purpose of CSS is to essentially style and customize the HTML elements on a web page. CSS uses rules that are associated to specific HTML elements assigning them specific stylized appearances. It is a way to manipulate the appearance of your HTML elements.
  1. What does CSS stand for? What does cascading mean in this case?
  • CSS stands for Cascading Style Sheet. Cascading refers to the way that the rules take precedence over one another.
  1. What is the basic structure of a CSS rule?
  • The basic structure of a CSS rule is contained within two parts - the selector and the declaration. the selector indicates the specific element that the rule applies to, so if you wanted to apple a rule to a all <h1> elements your selector would be h1. The declaration specifies how the element(s) in the selector will be styled. The declaration is plit into two parts: the property and the value and is enclosed within {}. The property determines the aspects of the element that will be changed. The value determines the specifics of the property that will be applied to the element. Example: h1 {color: blue;}
  1. How do you link a CSS stylesheet to your HTML document?
  • a CSS stylesheet is linked to an HTML document via the <link> element. the link element uses three attributes: href, type and rel. The link element is typically located within the <head> element of the HTML document. within the href attribute you would specify the location of the css file to be used. The type attribtue specified the type of document being linked. The rel attribute specifies the relationship between the HTMl document and the file being linked. For linking a CSS stylesheet the text for both the type and rel attributed will be a constant. Here is an example: <link href="css/styles.css" type="text/css" rel="stylesheet" />
  1. When is it useful to use external stylesheets as opposed to using internal CSS?
  • It is beneficial to use external stylesheets as opposed to internal CSS when you are working with multiple pages. The external stylesheets will be applied universally to all of the pages, so that when you make one change on the stylesheet it automatically applies to all pages. This is significantly easier than having to edit the internal CSS on each page individually.
  1. Describe what a color hex code is.
  • A hex code is a six digit code that represents the amount of red, green and blue in a color and is always preceded by a #.
  1. What are the three parts of an HSL color property?
  • The three parts of an HSL color property are: hue, saturation and lightness.
  1. 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 contain extra details on the ends of the letters that cna be considered to be easier to read with large blocks of text. Sans-Serif have no extra details on the ends of the etters and are a simpler design - it can be said that if the text is small then sans-serif can be easier to read. Monospace is where every letter takes up the same width, which is fixed and is commonly used for cod because it aligns nicely.
  1. When specifiying font-size, what are the main three units used?
  • The three main units used when specifying font-size are pixels, percentages, and EMS.

Day 3: HTML, CSS, and Professional Development

  1. If you're using an input element in a form, what attribute controls the behavior of that input?
  • the type attribute controls the behavior of the input element. The type attribute determines the type of input that will be used. A couple of type attribute examples would be type="text" or type="password".
  1. What element is used to create a dropdown list?
  • the <select> element is used to create a dropdown list. The select element also uses the option element coupled with the value attribute to create the list options.
  1. If you're using an input element to send form data to a server, what should the type attribute be set to?
  • If you are using an input element to sendform data to a server the type attribute should be set to submit: type="submit".
  1. What element is used to group similar form items together?
  • The fieldset element is used to group similar form items together. <fieldset></fieldset>
  1. Describe the differences between border, margin, and padding.

  • Border is the outline of the box that keeps the edges from one box to another seperate.

  • Margin exists outside of the border and is used to create space between surrounding boxes.

  • Padding controls the space between the border and the contents of the box.

  • moving outward from the content of the box you have the padding, border and then margin. Each deals with the amount of space that is adjacent to it.

  1. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
  • top: 1px
  • right: 2px
  • bottom: 5px
  • left: 10px
  1. Describe the difference between block-level and inline elements.
  • Inline elements typically appear alongside eachother horizontally flowing between surrounding text while block-level elements typically appear on seperate lines and are the main building blocks of a layout.
  1. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
  • Fixed positioning positions an element in relation to the broswer window instead of the containing element. They do not affect the postitioning of the surrounding elements and they do not move with the web page. Due to them not affecting the position of the surrounging elements they can end up overlapping with those other elements . The z-index helps with this by allowing you to control which element appears on top.
  1. What is the difference between a fixed and liquid layout?
  • A fixed layout does not change sizes as the web browser window size changes. The elements and their size and placement is fixed regardless of the screen size or resolution being used. A liquid layout does change and resize based on the size of the browser and how it changes. The elements are not fixed point on a layout.

Day 4: HTML, CSS, and JavaScript

  1. In an image element, why is the alt attribute important?
  • The alt attribute makes it possible to provide a text decription of the image. This is often used by screen reading software if the user can not see the image. Because of that the text should be an accurate and concise description of the image.
  1. What determines if an image element is inline or block?
  • The placement of where the image is in the code determines whether it is treated as an inline or block element. If the image is placed outside of a block element then the image is treated as a block element. For example, if there is an image that is then followed by a <p> element the paragraph will start on a new line after the photo. If the img is placed within the <p> element then it will be treated as an inline element within the rest of the content within the paragraph element.
  1. What are the benefits of jpg or png image file formats?
  • jpg images typically have a broader range of color depth and detail and are better used for photographs of people, places and things. A png image is better used for an image that is predominately solid colors without much variation. This is most commonly used for digital art, logos, illustrations, and most things made on a computer not derived from a camera.
  1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
  • The benefit of using CSS to specify the height and width of an image is that using classes assigned to images based on the size (given that you use set sizes across your images) means that you can adjust the size of multiple images using that single class. This is much simpler than adding and editing the HTML width and height attributes for each image individually.
  1. What is an image sprite, and why is it useful?
  • An image sprite is the combination of multiple smaller images into one. This is useful because then this one image can be applied across multiple parts of an interface resulting in fewer server requests and faster loading times.

Day 5: JavaScript

  1. 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 the variable name and you close it out using a semicolon. Example: var weight;. The equal sign in javascript is called the assigment operator and it means that a value is being assigned to the variable. It can also be used to update the value given to a variable. Example: weight = 3;.
  1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.

  • Numbers: Numbers in JS is numerical data that is used using 0-9. This can also contain negative numbers and decimals, but the numbers should never contain a comma. Numbers are most commonly used for counting or calculations.

  • Strings: Strings in JS consists of letters and pretty much any other character that is to be displayed as text. A string is enclosed in either single or double quotes - does not matter which as long as the opening and closing tags are the same. They are commonly used to add text and content to the webpage, but can also contain HTML markup.

  • Booleans: Booleans in JS consists of two values: true or false. Booleans can be thought of as switches that can be turned either on or off.

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

    1. The variable name cannot start with a number, and it must start with a letter, dollar sign $, or an underscore _.

    2. You cannot use a dash or a period in the name, na d it can contain letters, numbers, dollar signs $, and underscores _.

    3. You cannot use keywords or reserved words in the variable name. Keywords are preset and tell the interpreter to do something and reserved words are words that may be used in a future version of JS. Example of reserved words: float, if, boolean, function, else, var.

    4. Variables are case sensitive. time and Time would be seen as different variables, and it is bad practice to have multiple variables with the same number but different capitalization.

    5. When deciding on what to name the variable you should use something that directly reflects the information stored by the variable. If my variable defines the start time of a race, I might use startTime as my variable that contains that time.

    6. If the variable contains more than one word then the first word is not capitalized and every subsequent word is capitalized and there are no spaces. You can also use an underscore between words.

  2. 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 by storing multiple related values under one variable even if you are not sure how many values will be within the array or which ones will be used or not used. This helps to avoid having a lot of different variables that may or may not be used. You access and change an array similarly to how you would a normal variable. In order to access or change you use the array name followed by square brackets and within the square brackets you identify the specific value within the array you want to access/change by using the index number for that value. The index number is determined by the values placement within the array. The first value starts as 0 and then counts up from there. For example, if I had an array containing different weights var weights = [175, 200, 135, 159, 112, 88]; I could access the weight of 135 and change it to 122 by using the array name and identifying the index number then assing it a new value, weights[2] = 122;.
  1. What is the difference between an expression and a statement?
  • An expressions is a type of statement. An expression takes a variable or variables and evaluates them into a single variable based on the provided operation. It is also used to assin a value to a variable. A Statement is any individual instruction that the computer should follow, which includes expressions.

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

    1. Assignment operators are used to assign a value to a variable. Example: weight = 175;

    2. Arithmetic operators are used to perform basic math equations. Example: perimeter = 4 + 3 + 2 + 5;

    3. String operators are used to combign two strings together to form one which can be called concatenation. Example: fullName = 'John' + 'Rodgers' + 'Adams';

    Day 6: JavaScript, Terminal, Git, and GitHub

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

  • Entering sayHello into the console will not call the function defined prior to it. In order to actually call the function to action you have to enter the full function name including the paranthesis, sayHello(). The paranthesis can also be used to assign parameters to the function when it is being declared and called.
  1. What is the difference between function parameters and arguments?
  • Parameters are words used in the form of variables that are declared with the function in the paranthesis immediately following the name. These same words are then used within the function as variables and are called parameters because they do not define specific numbers. Arguments specify and assign actual numbers or text to the variables that will then be used to perform the calculation. The values that get passed into code are called arguments, where with parameters there are no specific values.
  1. What is the keyword return used for?
  • return is used to determine when the function is complete and that it should return the value determined by the function to the code that originally called it. Any statements below the return keyword will be ignored. You can also use an array to return multiple values from the same function.
  1. How are local variables better than global variables? Are there instances you can think of where you might want to use a variable that is globally scoped over local?
  • Local variables are better than global because they use less memory by only existing within the containing function. They can have different values each time the function is run and a different function can contain the same variables and not cause any naming conflicts. You might want to use a global variable if that variable will remain consistent and not change throughout the entire sript. You can then call that variable throughout the script and not have to worry about reassigning it a different value or the value of it changing.

Day 7: UI/UX

  1. Psychology: Question - How much work does the user have to do to get what they want?

    • Site that supports: Cairn Website

      • When first visiting the site you are immediately presented with a large message, "Get Cairn, get outside" followed immediately by a short and concise description of what Cairn is and a large button labelled "Get Started" that takes you straight to the subscription options, descriptions, rates, and frequencies. In two clicks you can be checking out.

    • Site that violates: National Park Services Website

      • When first visiting the site there is a Find the Park feature that is organized by state. Once you select the state you are taking to a page where there is a map of the state that contains names of the parks. I initially thought you could select the names on the map and it it would take you the that parks page, but you can not interface with the names. So, from here you scroll down and go through a list until you find the park you are looking for from there. Now, if you want to reserve a campsite at that park you have to do some searching until you find a link that actually takes you to a totally new site, recreation.gov that is also not the easiest to navigate.

  2. Usability: Question - Are you being clear and direct, or is this a little too clever?

    • Site that supports: New Terrain Brewing Company

      • When you first visit the site you are confronted with a large "Hello Wanderer" message and then info on their hours, food truck hours, and brewery tours all embedded within the "Are you 21?" initial pop-up. This is clear and direct messaging and info that is also clever. As most people visiting the site are probably trying to see their hours and see if there will be a food truck there, so they put it on the first thing you will see and actually utilizie the mandatory age confirmation pop-up that is on all brewery websites.

    • Site that violates: Over Yonder Brewing Company

      • When you first visit the site there is a video and a watch video button over it, and when clicked it takes you to youtube and leaves their website. It should open a new tab with youtube so that you stay at their site as well. I think the video is a decent idea, but maybe trying to be a little too clever without having the best usability. Also, their "Are you 21?" yes button opens up a new tab for their site so now you have two tabs open for their site.

  3. Design: Question - Does the design lead the user’s eyes to the right places? How do you know?

    • Site that supports: Topo Designs

      • The design of the home page leads the user's eyes directly to the cycling featured items, categories, styles, etc. page. This is done by using bold imagery and text and within each of these is a bright red "Shop Now" button that is in the same place for each one. The product imagery for the main one "Miir is here" is very direct, stands out and pulls your attention to it through the use of color and bold designs.

    • Site that violates: National Geographic

      • The site initially opens up with large text saying "Expore Today" but there is no particular call to action or direction on where to go from there. Also, the background is a very short video on loop and the small amount of movement there seems to be distracting, where a photo would have been just fine. Also, there are a lot of initial stories to choose from, but they do have ranging sizes so there is that attribute which guides the user's eye to the larger ones.

  4. Copywriting: Question - Does it inform the user or does it assume that they already know what its about?

    • Site that supports: Adobe Creative Cloud

      • The initial tagline on the home page here is in larger text and draws the user in via an inspiring message, "Dream bigger, creative cloud" followed by in smaller text a brief and concise description of what they offer. They then go into specific types of work that uyse or require their software to do.

    • Site that violates: Oboz Footwear

      • This website does not inform the user and assumes that they are already familiar with Oboz as a brand and their products. There is not much text on the initial photo of the home page and it is quite small as well. I think that the tag line on top of the product name should be larger than the product name because that is what people relate to and what draws them in. Most people have no idea what the Bridger Vent Mids is. Scrolling through the website and reading the text while ignoring the photos it does take awhile to figure out exactly what their brand makes and specializes in.

  5. Analysis: Question - Do you know why users do that, or are you interpreting their behaviour?

    • Site that supports: Chris Burkard

      • The home page of this site presents you with three options: portfolio, about, and prints. I would imagine that this site tracks the web page traffic as it is filtered through these three topics, which would give them some pretty cool data on why people are visiting his site and what their intentions are. Do they want to see his work, learn about him, or make a purchase? This initial filter seems like a good way to try and get a better idea of why the average person is visiting the site. So, this in a way means they don't have to interpret as much because they know right off the bat.

    • Site that violates: SCARPA NA

      • There is no initial filter on this site, so there is not a clear way to gather data and information regarding why a user came there in the first place. For a brand that covers a fair amount of categories tracking that information would be beneficial. At the least if they could track clicks per category and see which categories are getting more traffic, and then use that data to try and figure out why that is the case in relation to the overall busines, sales, online sales, units sold, etc.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment