Skip to content

Instantly share code, notes, and snippets.

@N-Gibson

N-Gibson/NoahGibson_mod_0_capstone.md

Last active April 26, 2019 02:21
Show Gist options
  • Save N-Gibson/e83db87a3e507fa301248246bbbb52b5 to your computer and use it in GitHub Desktop.
Save N-Gibson/e83db87a3e507fa301248246bbbb52b5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
NoahGibson_mod_0_capstone.md

Chapter 1 & 2 Questions

  1. On a website, what is the purpose of HTML code?
  • HTML pages are text documents that comprise the contents of a page.
  1. What is the difference between an element and a tag?
  • Elements and tags are often used interchangebly, however, elements are the characteristics that live inside a tag and a tag is the set of opening and closing elements. Ex. (<{h1}>) {h1 is the element} and (<h1> is the opening tag) <{/h1}> {/h1 is the element} and (</h1> is the closing tag)
  1. Why do we use attributes in HTML elements?
  • Attributes tell us more about the contents of an element, such as name and value.
  1. Describe the purpose of the head, title, and body HTML elements.
  • Head is the header of the site.
  • Title is the name of the site (usually at the tab for the page).
  • Body is the main text or texts of the site.
  1. In your browser (Chrome), how do you view the source of a website?
  2. 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.
  • <h1> Creates a header for the site </h1>
  • <title> Creates a title </title>
  • <body> Denotes the start and end of a section of text </body>
  • <ol> Denotes the start and end of and ordered list </ol>
  • <li> Denotes the first item in the orderd list (can be repeated to create second and third etc... items in the list) </li>
  1. What are empty elements?
  • Empty elements are tags that don't contain words (<hr>)
  1. What is semantic markup?
  • Semantic markup consists of tags that don't affect the structure of a page, but add more information (<strong> bold </strong> , <em> italics </em>)
  1. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
  • Three new semantic elements in HTML 5 include <header>, <nav> and <article>. All of these tags are inside the <div id= > tags but they indicate what kind of information you are going to find inside these tags.

CodePen basic HTML structure

https://codepen.io/n-gibson/pen/gyzJqg

Gear Up

  • Read google doc link

  • Reflect

  • Empathy playes a role in my life every day. It takes empathy to develop and maintain relationships with everyone around you. This includes family, friends, teachers, co-workers, you name it. As humans, we are social creatures and we don't do very well without that structure in our lives. Empathy has enabled my life to be happier and healthier by connecting to the people around me.

  • Empathy helps build better software as there is always going to be a target audience or a purpose for making the software you make. In order to relate to these groups of people and reach them in a clear and engaging manner, you have to understant their perspectives (needs, wants, feelings, etc...).

  • Teamwork can't exist without being able to relate to the members on your team. It is the cornerstone for all group interactions.

  • I have played competative soccer my whole life. In a setting so competative and team oriented I have had many times where displaying empathy improved a dynamic or situation. My junior year in highschool, I played as a forward with another player who would refuse to pass me the ball or make the easy play or have anything to do with me on the field. I had to go out of my way to understand the root of the problem in order to lift my team to a higher level of success. Through empathetic conversation I learned he was threatened I would score more goals than him his senior year. We decided that as long as we work together and make the goals happen a) it wouldn't matter who scored more and b) I would feed him towards the end of the season so he could have a higher number than me. Although this was a challenging situation as we are both competative people, it took a great deal of understanding and compromise to resolve the issue. We scored a lot that season.

  • I find it most difficult to find empathy in professional settings where frustration is almost consistent or very frequent. This can be caused by a lack of understanding due to an illogical reason or stubbornness. I've found the best way to go about these types of situations is to remain level headded and approach the situation from a different angle. As well as being aware when I am on the side of the stubborn or frusterated.

HTML & CSS

Chapters 3 & 4

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
  • In an ordered list, each item has a number associated with it ( 1. 2. 3. ). An unordered list is made of bullet points that are followed by the lists content ( .item a .item b .item c). A definition list is made of terms and the definition for those terms (<dl> <dt> "term" </dt> <dd> "definition of the term" </dd> </dl>)
  1. What is the basic structure of an element used to link to another website?
  • The basic structure of an element used to link to another site looks like this: <a href= "https://website.name"> Name for link <a/>
  1. What attribute should you include in a link to open a new tab when the link is clicked?
  • In order to open a link in a new window you would need a _blank addition. <a href= "https://website.name" target="_blank"> Name for link </a>
  1. How do you link to a specific part of the same page?
  • If all of the pages of the site are in the same folder, the href link would just be the name of the file.

Chapters 10, 11 & 12

  1. What is the purpose of CSS?
  • The purpose of CSS is to add color/ style to an HTML document.
  1. What does CSS stand for? What does cascading mean in this case?
  • CSS stands for Cascading Style Sheet and the cascading represents the idea that the style can cascade or flow from one page to another (one style to multiple pages or multiple style sheets to one page).
  1. What is the basic structure of a CSS rule?
  • The basic structure of a CSS rule looks like this: selector --> p{ font-family: Serif; color: yellow; } --------------------------------------------------------------------------> ^ property ---------> ^ value
  1. How do you link a CSS stylesheet to your HTML document?
  • There are two types of ways to link a stylesheet to an HTML document. The first is External CSS which seems to be the most applicable and logical. Here you use the <link> tag to href a link to the external stylesheet to the HTML doc. It looks something like this: <link href="css/styles.css" type= "text/css" <rel="stylesheet" />
  1. When is it useful to use external stylesheets as opposed to using interal CSS?
  • Internal stylesheets only really seem to be applicable when the page is small without too much going on. An external stylesheet would be used if there is a site with more than one page or if you wanted to keep the style content separate from the content of the page.
  1. Describe what a color hex code is.
  • A color hex code represents the values for red, green and blue in a hexagonal code. It allows you to add a specific color to your stylesheets.
  1. What are the three parts of an HSL color property?
  • The three parts of HSL color property are: Hue (color), Saturation (amount of grey) and Lightness (amount of white/black).
  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 (curved edges considered easier to read), Sans-Serif (cleaner, rounded design and can be handy if other fonts get too pixelated, can be blown up large) and Monospace (every letter is the same width, often used in coding because it stacks nicely).
  1. When specifiying font-size, what are the main three units used?
  • The three main units used in specifying font-size are: pixels (controll exactly how much space is used), percentages (percent of total pixels) and ems (equivalent to the width of the letter m).

HTML, CSS and Professional Development

Chapter 7

  1. If you're using an input element in a form, what attribute controls the behavior of that input?
  • The type attribute controlls the bahavior of the form. Can be text, password, radio, checkbox, file, submit, image, hidden, date, email, url and search
  1. What element is used to create a dropdown list?
  • The select element is used to create a dropdown list. <select name= "artists" > <option value= "The Beatles"> The Beatles</option> this would be only a single option dropdown list but adding more options would increase the variety.
  1. If you're using an input element to send form data to a server, what should the type attribute be set to?
  • The imput element would have to be set to submit and would contain a name and value tag as well.
  1. What element is used to group similar form items together?
  • fieldset would be used to group like-elements together. <fieldset> <legend> details about the box </legend> then the labels/ forms followed by </fieldset>

Chapters 13 & 15

  1. Describe the differences between border, margin, and padding.
  • Border separates the edge of one box from another.
  • Margin sits outside the boarder and allows for gaps between boxes.
  • Padding is the space between a boarder of a box and it's contents.
  1. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
  • The padding rule moves in a clockwise rotation from top, right, bottom, left. So in this case, 1px would be the top value, 2px would be the right value, 5px would be the bottom value and 10px would be the left value.
  1. Describe the difference between block-level and inline elements.
  • Block-level elements starts each box on a new line.
  • Inline elements flow between surrounding text.
  1. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
  • Fixed positioning places and element in relation to the browser window rather than the content of the site. If someone were to change the size of the browser the box might overlap with other content on the page. The z-index allows you to controll which element is on top if there is an overlap.
  1. What is the difference between a fixed and liquid layout?
  • A fixed layout will remain the same whether or not the user increases or decreases the size of their browser window. This technique is handy if youre looking to create a very specific layout including px dimensions.
  • A liquid layout will expand and contract based on the size of the browser window. This is very handy when considering if a user will be viewing your site on a mobile device as well as verying sized computer monitors.

Images Html/CSS

Chapter 5

  1. In an image element, why is the alt attribute important?
  • The alt attribute is important because it provides a text discription of an image. This helps whether the image can't be seen or if a screen reader software is translating the site for someone with visual imparements.
  1. What determines if an image element is inline or block?
  • Image placement with regard to the code is what determines whether an image element is inline or block. If an image is followed by a block element then the image will sit on a new line before the text (block). If an image is within a block-level element however, the text or any other inlne elements will flow around the image (inline).
  1. What are the benefits of jpg or png image file formats?
  • jpg should be used if an image contains many colors or needs to distinguish between subtleties in white, grey or black colors. png should be used if an image contains few colors or is made up of mostly the same color.

Chapter 16

  1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
  • Specifying the height and width of images in CSS allows a site to load faster as it will know how much space to allocate in order to accomidate an image. In CSS you can use the class names to specify dimensions and keep rules that affect presentation out of HTML.
  1. What is an image sprite, and why is it useful?
  • A sprite is when a single image is used for several different parts of an interface. These can be logos and buttons among other things. It allows the site to load faster as it is only requesting one image rather than many.

JavaScript

Chapter 2

  1. How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
  • To declare a variable in JavaScript you need a variable keyword and a variable name. An equal sign represents the assignment of a value to a variable and it's called an assignment opperator.
  1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
  • Numbers deal with numbers includin positives, negatives and decimals.
  • Strings deal with letters and characters and are contained inside quotation marks.
  • Booleans are true or false values.
  1. What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
  • One: names must begin with a letter, dollar sign or underscore and cannot start with a number.
  • Two: a name can contain numbers, dollar signs or underscores but cannot contain dashes or periods.
  • Three: cannot use keywords or reserved words. Var, break and function are examples of a few keywords that should be avoided in naming.
  • Four: JavaScript is case sensitive so firstName is not the same as firstname for example.
  • Five: it is best practice to use a name that describes the information that the variable stores.
  • Six: it is best practice to use caps on the first letter of the second word (if two or more words). Underscores are also acceptable. Ex. firstName first_name
  1. How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
  • Arrays are useful when you don't know how many items a list will contain, as you don't have to specify how many values it will hold. You can access/ change an array by identifying the mane, followed by the index number of the value you wish to change. From there you can assign a new value by including an assessment operator followed by the new value.
  1. What is the difference between an expression and a statement?
  • A statement is an individual instruction step usually in a series of instructions a computer can understand. An expression evaluates or shows the results of a single value.
  1. What are three types of operators and how are they used?
  • Assignment operators: assign a value to a variable.
  • Arithmatic operators: preform basic mathematic calculations.
  • String operators: combine two strings.

Chapter 3/ Terminal, Git and GitHub

  1. If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
  • If sayHello were to be entered, it would display the function rather than call the function. Ex. f sayHello(){console.log('Hello!')} rather than Hello!
  1. What is the difference between function parameters and arguments?
  • Parameters are the set of rules or instructions a variable is supposed to follow and arguments are the variables to be plugged into those rules or instructions.
  1. What is the keyword return used for?
  • Return is used to return a value to the code that called the function.
  1. How are local variables better than global variables? Are there instances you can think of where you might want to use a 5. variable that is globally scoped over local?
  • A local variable can't be accessed outside of the function in which it was declared. It is useful because if a function were to run twice or more it can have different values each time. Two different functions can use variables with the same name without running into a naming conflict.
  • Global variables are stored in memory as long as the webpage is loaded in the browser. This takes up space and can make the page's interaction with the user slower as well as increases the risk of naming conflicts.

UI/UX

  1. What is UX?
  • UX is using the user experience in order to make a clean and effective site that achieves the goals of the consumer and the business.
  1. What are User Goals & Business Goals?
  • Users and businesses have different goals when having or accessing a site. It is important to reach and satisfy both sides of the equation.
  1. What are the 5 Main Ingredients of UX?
  • Psychology: you need to take into account the subjective thoughts and feeling of the users in order to taylor the experience to best suit their needs.
  • Usability: the site needs to be simple and effective to use.
  • Design: how does the site work and what are some tangible ways you can prove it is effective.
  • Copywriting: you have to support the image of the company as well as "getting shit done" as directly and as simply as possible.
  • Analysis: does the information prove your site is effective and if not how can you do better?

Site examples

  1. How does this make them (the users) feel?
  • Google does a good job at making users feel safe and in-controll as it is a simple and effective site.
  • The Champions League site is very complex and crowded
  1. Could you get the job done with less input from the user?
  • Google again does a very good job of making a site very simple and straightforward.
  • Hulu does not do such a good job it has a lot of funky menus and dropdowns.
  1. Do users think it looks good? Do users trust it immediately?
  • Amazon makes a site that everone trusts and is pleasing to the eye.
  • Craigslist is a little less pleasing and looks a little un-trustworthy. Although it does have a good reputation and good functionality.
  1. Is it clear, direct, simple and functional?
  • Netflix is very simple and functional. Its almost like its designed to be used for hours at at time.
  • GitHub is a bit more complex and harder to use at the start.
  1. Are you looking for subjective opinions or objective facts?
  • This one is a bit harder as it is a reflection on how a site works (which I dont really have access to but I do find the question interesting).
  • Amazon looks at both in the forms of reviews, numbers sold, ratings etc...
  • Facebook doesn't appear to have access to this kind of information at least from my perspective. Im sure they do this kind of thing to some degree.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment