ChrisLane-mod-0-capstone.md

Day_1

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

Hypertext Markup language is used for framing and describing structure and presentation of information. It includes

text, links, and references to images and lays the framework on which CSS and javaScript build.

What is the difference between an element and a tag?

Tags: Labels used to mark up the begining and ends of elements (i.e.< p > </ p>).

Elements: Include opening and closing tags and content is viewed by the user.

Elements are used within tabs for the user to interact with the web-page while Tags are the structure in which elements

are contained.

Why do we use attributes in HTML elements?

We use attributes to modify elements and some elements remain unfunctional without them.

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

Head: is a containger for all head elements which includes title of document, scripts, styles, information etc.

Title: Declares the title of the document displayed on the title bar

Body: Defines the main content of the document, the content the user will view.

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

Press the control+U on the keyboard or right click on a blank area of the webpage and select view page.

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.

is a heading element used to inclose heading info.

is used to enclose paragraph information.

is used to enclose a whole html document.

is used to enclose the body of a document.

is used to create a line break within content.

What are empty elements?

A empty element has no content and does not require a closing tag. They usually manipulate another element

(i.e.
= linebreak)

What is semantic markup?

Semantic markup is a way in which to write HTML so it reinforces the semantics/meaning of the content rather than

apperance. It is important so your code can be understood by others easily.

What are three new semantic elements introduced in HTML 5?

Article: Defines a stand alone article.

Aside: Defines extra content like a sidebar.

Section: Defines a secton of an element.

Day_1 Pen

https://codepen.io/cllane/pen/drgLRa

Gearup

What role does empathy play in your life and how has it helped you?

I have been the benifactor of empathy on a few occasions and I can say that the feeling that someone else understands

your issue is so refreshing it will lift a weight from your shoulders, it makes the world less large and reinforces

a belief in humanity. Empathy has helped me fall for a women that comes from a socio-economic background that I

havent lived, it has allowed me to step outsided of my comfort zone and befriend people I thought were polar opposites

of me. I firmly believe empathy is a hallmark of any good leader, and is a necessary attribute required of anyone that

claims to be a decent person.

How does empathy help you build better software?

Empathy is required to build better software, if you lack the ability to understand your users background weither it be

education, economic, or just the possible reason they are interacting with your site then your product will lack any

personal feel. That being said on an intrapersonal level you and your peers need to be able to communicate on a level

that is understanding and respectful and without knowing who you are and your peer is this is not possible.

Why is empathy important for working on a team?

Empathy is the ability to understand another persons thoughts and feelings, and without that skill how can you expect

to be a productive member of a team. If you cant understand that Steve is having a bad day or that Jessica's family

is going through trying times you wont be able to create an avenue of honest conversation. That being said if you

show that you can empathize ideas and concepts will flow more freely between you and your peers.

Describe a situation in which your ability to empathize with a colleague or teammate was helpful.

I had a coworker once whose personal life was put on display through public means. He was a young cook I met when I

was also a young cook. He was shy and quiet and was the butt of a lot of jokes, he took it in stride but I could tell

it bothered him. I became close friends with him and one day at work he walked in to a picture hung in a public place

that ousted his sexuality, he immediatly burst into tears, and to my surprise nobody moved a muscle as he turned and

ran out the door. I was the only one that followed and I listened to him I let him cry and work through his emotions.

He to this day is one of my good friends, and he moved on eventually to pursue his dreams, but after he realized he had

a friend in the building, his attitude completly changed he started standing up for himself and began to "fit in." I

learned that day that sometimes all someone needs is to be heard and understood. He is still an insperation to me, and

partially responsible for me joining Turing.

When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?

I find it difficult to empathize when deadlines are moving closer, in crunch time it is difficult to remove myself from

the task at hand and allow a emotional state to shine through. This is something I am aware of and work with my

therapist weekly to counteract it. The process I go through is first recognize that a emotional response is needed,

taking a deep breath I file my anxiety about deadlines away, and make myself realize that a humans emotions are more

important than my proffesional requirements in this moment. The finish line isnt worth it unless we all get there

intact emotionally and physically.

Day_2

Questions (Chapters 3, 4)

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

Ordered: is used to group together a set of related items in a specific order.

Unordered: is used to group together a set of related items in no specific order.

Definition: Used to display a list of terms and their discriptions.

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

The structure of links are sandwhiched between <a and include in specific order, href which is equal to the

page you want the user to go to, followed by the text the user actually clicks on.

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

Add a target="_blank" this is dependent on the browser but works for the most used ones.

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

To link to the same page you do not need to use the URL you can use a short hand called relative URL. If the elements

are all in the same file then you can just use the file name for the href. If your directories are different then

you can enter the path to those folders by using href= and / to divide the folder names, knowing how to determine a

parent, child, grandparent, grandchild folder is important for this process.

Questions about CSS (Chapters 10, 11, 12).

What is the purpose of CSS?

Css allows you to create rules that control the way your websites content will appear. It gives your html style.

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

CSS stands for Cascading Style Sheet, and cascading refers to the order of operations in which the code is read,

meaning that if an element is addressed twice for some reason the more specific rule will be the phenotype.

What is the basic structure of a CSS rule?

The basic structure of a CSS rule is as follows a selector which indicates which element the rule applies to, and

a declaration which indicates how the elements should be styled.

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

You use the command then you specify the path to the CSS stylesheet with href="stylesheet_address", then you

specify the type with type="text/css", finally you specify the relation to the html text with rel="stylesheet" and ###### close the element with />.

Example: href="css/styles.css" type="text/css" rel="stylesheet" />

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

Internal stylesheets should be used when one document has a unique style. External stylesheets are best used when a

style is being used for multiple documents so you can change the look of a whole website by only having to change one

file by using the tag which goes inside .

Describe what a color hex code is.

Hex codes are a hexadecimal code made up of 6 digits and represents 3 different values relating to red, green, and ###### blue the code starts with a # sign, an example is #66cdaa where 66 is the red, cd is the blue, and aa is the green.

What are the three parts of an HSL color property?

CSS3 uses HSl which is a more intuitive way to select colors. HSL refers to Hue Saturation and Lightness, Hue is

basically a point on a color wheel, Saturation is a percentage of grey that exists in the hue, and lightness is

a percentage of white or black in the hue 0% white = 100% black.

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 type has extra details on the ends of

the major strokes of letters and traditionally are considered easier to read. Sans-serif type has straight ends to

letters and are easier to read if the text is small compared to serif and monospace. Monospace or fixed-width

font is used mainly for programming because every letter is the same width and therefore lines up nicely and is

easier to follow.

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

The main three units used in specifiying font-size are pixels, percentages, and ems. Pixels are the best way to

manipulate your font-size for uniformity, because percentages and ems will vary if the user has changed the default

size of text in their browser. Pixels are also relative to the resolution of the screen. Percentages can be used to

the size of all font on a page usually the default is 16px unless the user has changed the setting in the browser. Ems

allows you to change the font-size relative to the font-size in the parent folder.

Day 3

Chapter 7 questions

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 an input.

What element is used to create a dropdown list?

The <options element is used to create a dropdown list.

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 send form datat to a server the type attribute should be set to submit.

What element is used to group similar form items together?

To group similar form items together use the element fieldset.

Chapter 13 and 15 Questions.

Describe the differences between border, margin, and padding.

Borders are inherent in every box, even if they are 0% opaque they exist and server as a space between boxes. The

margin ist the space that exists on the outside of the borders. The padding is the space that exists inside the

border.

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

The code will be read as top, right, bottom, and left. So the 1px of top padding, 2px of right padding, 5px of

bottome padding, and 10px of left padding.

Describe the different between block-level and inline elements.

Inline elements use < span > and basically a inline element does not cause a line break and does not take up

the width of the whole page just the width of its opening and closing tags. Block line elements use < div > start on

a line break and take up the whole width of the page.

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

position: fixed; fixes an element to the viewport so when a user scrolls it stays in the same place on the screen.

When using position: fixed; boxes will over lap and the one that comes latest in the code will be shown on top, you can

use z-index to manipulate the order in which boxes appear.

What is the difference between a fixed and liquid layout?

Fixed layouts do not change size as the user increases or decreases the size of their browser window, as where a liquid

layout stretch and contract with the browser window as the user manipulates it.

Day 4

Chapter 5 questions.

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

The alt attributed is important in an image element because if for some reason the browser or user cant view the image

the alt attribute will supply a text description of the image and present in it in place of the image. This is

important for blind users and users in different browsers.

What determines if an image element is inline or block?

Images are both, inline in the sense that they flow with texts, though they have a defined height and width like a

block element.

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

Jpg files are used when an image has multiple colors, as it will save in more detail but if not recommended for

archiving. Gif or Png is used when there are few colors or large solid blocks of the same color.

Chapter 16 questions

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

While specifying the height and width of an image in HTML will load the page faster specifying in CSS will allow you

to control the hieght and width of all images on a page by manipulating one code as opposed to having to interact

with each image individually.

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

An image sprite is a large image made up of the static background of a page, and use of an image sprite can reduce

the amount of http requests on the page which will help the loading speed of the site.

Day 5

Chapter 2 Questions.

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 you need to use the keyword var followed by the name of the variable if it is two or more

words use camelCase. The = is used to assign a value to a variable, in javaScript it is refered to as an assignment

operator.

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

Numbers : numeric data is used for task that calculate or count, in addition numeric data will be used to format screen

size, ratio, etc.

Strings : String data consists of letters and other characters and is enclosed by "..." this type of data often

contains html markup and is used to add new content to a page.

Booleans : Booleans have one of two values, true or false, and can be thought of as a light switch it is either on

or off.

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

variable names?

First the name must begin with one of the following a letter, a $, or a underscore. Secondly the name can contain

letters, $, underscore, but must not include a period or (-). Third you can not use keywords or reseerved words like

abstract, else, float, class, null, etc. Fourth all variables are case sensitive so Score does not equal score. Fifth

Use a descriptive name for your variable like firstName for the user's first name. Sixth use camelCase for names that

are a longer than one word.

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

Arrays can be useful when dealing with multiple related values because you dont need to know how many items a list will

contain when creating an array. Also an array is created like you would a variable for example (var colors;) creates a

array for colors. If you wanted to change/access a value in an array you would first recognize that values in an array

work on a numbers list that starts with 0. To access a value in an array you use the array name and specify the index

number in [ ] afterwards. You can change an the value of an array just like you would any other variable, by selecting

it and assigning it a new value.

What is the difference between an expression and a statement?

An expression results in a single value and can be broken into two types. Expressions that assign a value to a

variable, and expressions that use 2 or more values to return a single value. A statement is a complete line of code ###### that performs some action, while a expression evaluates to a value.

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

Arithmetic operators are used to do arithmetic such as addition, subtraction, etc.

String operator is used to join strings on either side of the + together.

Assignment operators are used to assign a value to a variable, i.e. colors.

Day 6

Chapter 3 questions.

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 the fuction sayHello(){console.log("Hello!)} is declared in the console then sayHello will give you the declared

function while sayHello() will run the function and deliver a Hello!

What is the difference between function parameters and arguments?

Function parameters are bits of information that are passed to the function, and is told in the declaration of the

function. Function arguments are actual values that get passed to the function.

What is the keyword return used for?

The keyword return is used to send data back to the caller of the function, it can have a value or no value and is used

to exit a method. It is coupled with a value that indicates the information that should be returned to the caller/user.

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?

Global variable are declared outside of any function and can be used by any function in the code, Local variables are

declared inside a function and can only be used by that function. Global functions are used throughout the code and in

larger coding projects can become problematic as the variable may have unwanted effects on the code and if they are

global then it can be a task to find which functions are causing the problems or unwanted effects.

Global variables would be good to use in a smaller progam can make it easier to access variables and limit the creation

of local variables which would lessen memory usage.

User Interface/User Experience (UI/UX) Questions.

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

An example of a website that I believe answers this question well is https://www.google.com/. I feel like they asked

themselves why do people use this site and created a simple to the point website.

An example of a website that didnt put much thought into this is http://www.openculture.com/. The front page is a ###### convoluted and misleading.

Are you being clear and direct, or is this a little too clever?

A great example of a clear and direct website is https://tinkerwatches.com/ the minimalism and pertinent information

make for a great experience,

On the other hand http://www.colorsmagazine.com/home.html is a website that sells one of my favorite magazines

and is a creative website but I challenge you to get to their store front in under 5 clicks.

Do clickable things look different than non-clickable things?

https://www.wikipedia.org/ does an great job making links and clickable items immediately dicernible.

http://weaintplastic.com/ is a nicely designed website and is pleasing but the only attribute that sets clickable items

from non-clickable items is a slight movement in the text (which is all similar). In fact most things that look clickable, like underlined or off-colored text is not clickable.

Does it sound confident and tell the user what to do?

https://turbotax.intuit.com/ is a great example of taking a complicated task and walking a user through it step by ###### step. It instills confidence in the user by offering extra info and reassuring the user that steps have been completed ###### properly.

https://www.goodreads.com/ is a great resource, but the first time you visit it you can see a lot of information, but

there is little information on what the website is for and what any of the information on the home page means. There

isn't any direction to point a user toward how to use the site nor what it is capable of.

Are you looking for subjective opinions or objective facts?

https://crazyegg.com/ is an example of a website and tool that can be used to track a user's mouse and returns data in

a heatmap, and it can be helpful in understanding where a user is most active, an is an example of a website looking

objective facts.

https://www.yelp.com/ is as we know a way for reviews of any business to be made public, and is an example of a website

that is looking to collect subjective data.