Steven Lawson's Prework for Turing Front End Program

StevenLawson_Prework.md

Pre-work Day 1

1.On a website, what is the purpose of HTML code? HTML describes the structure of a web page.

2. What is the difference between an element and a tag? Tags are the characters between the brackets p /p, whereas the element is the opening and closing tags, as well as the content between them.

3. Why do we use attributes in HTML elements? Attributes provide additional information about the contents of an element in name/value pairs.

4. Describe the purpose of the head, title, and body HTML elements. head: information about the page. This is where you would link your CSS file, and title title: contents of the title element, which is shown in the tab body: Meat and potatoes of the page, meaning everything inside is shown in the browser window.

5.In your browser (Chrome), how do you view the source of a website? View>Developer>View Source

6. 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. h1-h6: full heading to sub-heading in order from largest to smallest p: paragraph element, used for paragraph text b: used inside an element, wrapped in tags will make the content text bold i: used inside an element, wrapped in tags will make the content text italic sup: used for superscript sub: used for subscript

7.What are empty elements? Empty elements are elements that do not have words between the opening and closing tags ie br /

8. What is semantic markup? Adds extra information to pages by describing content, especially for screen readers.

9. What are three new semantic elements introduced in HTML 5? header, section, and article

#html codepen https://codepen.io/wolfinator/pen/aVqQLq

StevenLawson_Prework_Day2.md

Day 2

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

An ordered list is a list in which each item list is numbered (1,2,3, ect). An unordered list is a list where each item begins with a bullet point. Definition lists are lists in which a set of terms are arranged with the definitions for each of the terms.

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

<a href="http://stevenleelawson.com">Steven's Site</a> The main difference being that when linking to another website, one needs to use the full absolute path.

What attribute should you include in a link to open a new tab when the link is clicked? The attribute you would want is target="_blank"

CSS

How do you link to a specific part of the same page? For a link to a specific part of the same page, use the pound symbol to reference the id:

<a href="#top">Top</a>

What is the purpose of CSS?

CSS are rules that allow you to style content on a page.

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

Cascading Style Sheets. Cascading means that the last rule will take precedence, and more specific rules will take precedence over more general ones.

What is the basic structure of a CSS rule?

A selector followed by a declaration, which is a property/value pair.

p {
      color: green;
      }
      ```
## How do you link a CSS stylesheet to your HTML document?
In the head, under the title element:

```

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

It is a more modular and organized practice, especially if you want to have multiple stylesheets, with each controlling a different property, much like one does in SASS.

Describe what a color hex code is.

Six digit codes where each pair of two represents the red, green, and blue in a color.

What are the three parts of an HSL color property?

Hue, Saturation, and Lightness. Hue is expressed as a number from 0 to 360, and the latter are expressed as %'s.

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

Serif, sans-serif, and Monospace. Serif has extra details on the ends of the strokes of the letters. whereas sans-serif has straignt ends to the letters. Monospace has a fixed-width.

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

Pixels (px), percentages (%), and Ems.

Codepen Day 2:

(https://codepen.io/wolfinator/pen/jaZdoN)

StevenLawson_Prework_Day3.md

Day 3

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.

What element is used to create a dropdown list?

A <select> is the element used in combination with <option to make 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?

The type attribute should be set to 'submit'.

What element is used to group similar form items together?

The <fieldset> element is used to group similar form items together.

Day 3 CodePen:

(https://codepen.io/wolfinator/pen/zPWpMb)

CSS Chapter 13 and 15

Describe the differences between border, margin, and padding.

The border, visable or not, surrounds the content. The margin is the space on the outside of the border, and the padding is the space between the content and the border.

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

1px=top, 2px=right, 5px=bottom, and 10px=left

Describe the different between block-level and inline elements.

Block elements are stacked horizontally, whereas inline elements exist side-by-side vertically ie a navigation bar.

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

Fixed position positions elements in relation to the browser window, and because of that elements can become stacked on top of each other. Z-index allows you to control the order of the stacked elements.

What is the difference between a fixed and liquid layout?

A fixed layout does not change if the user increases or decreases their browser window, and a fixed design is best for desktop or laptop computers. A liquid layout is responsive, and can adapt to different sizes of screens, which is much better for the age of the smartphone. Fixed is going to be in px largely, whereas liquid will be in %'s and ems.

StevenLawson_Prework_Day4.md

Day 4

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

The alt attribute is important in that it describes the image if it breaks, but is also very important for accessibility and screen readers.

What determines if an image element is inline or block?

It's all determined by where you put the <img src> element; if you put it before the paragraph element (or what-have-you) it will be a block element. If you put it inside the paragraph element, it will be inline.

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

It's best to use a jpg if it a photo-rich image meaning that it has a lot of shades and varying colors. The benefit to using png is when it has a lot of 'flat' colors that do not having much variance. Loose rule of thumb: jpg for photos, png for illustrations (like something made in Adobe Illustrator).

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

Again, in the interest of being modular and organized gives the developer much more control, and makes the code easier to read. When you use CSS to control the images consitantly instead of having to specify it each time in HTML. DRY coding!

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

An image sprite is when a single image is used for several parts of an interface. It's useful because the web browser only needs to request one image, which makes the page load faster.

Codepen Day 4

(https://codepen.io/wolfinator/pen/wPjgoN)

StevenLawson_Prework_Day5.md

Day 5

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

A number is an integer or numerical value. A string is some kind of text between quotes, and a boolean is either true or false.

What are the three logical operators that JavaScript supports?

And, or, and not && || ! respectively.

What is the naming convention used for variables?

var = x

What is the difference between an expression and a statement?

A fragment of code that produces a value is an expression; a statement is a set of instructions to be executed.

What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?

Let, throw, function, typeof, and return are a few reserved words in JavaScript and it is important not to use them as variable names because it will cause errors.

What is control flow, and why is it useful for programming?

Control flow is what order statements are to be evaluated. If you are going to bake a cake, you have to do the instructions in order; you can't bake it before mixing in the eggs!

JS excercises

myNewString: Before you hit Enter, what do you expect to see in the console?

myNewString

myNum Before you hit Enter, what do you expect to see in the console?

9

5 > 3 returns a boolean value of true. How could you change this expression to return false?

5 < 3

"2" === 2 and "2" == 2 Why does one of those expressions return true and one return false?

In the first one, the === returns false because the === means EXACTLY and one is a string and the other is a number. In the latter one, the string "2" is type coerced into the number 2, so it returns 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?

In this simple conditional, it will log Hey! because the condition of 8 being less than 9 is met.

Write an if/else statement where the code in the else block is executed.

    if (1 > 2) {
    console.log("if statement");
    } else {
    console.log("else statement");
    };
    ```
# Variable exercises
My attempt at the Fortune one was close but not quite:
```var c = "5 children with";
var p = "Fiona in";
var g = "Montana as a";
var j = "freelance developer.";
console.log("You will have" + " " + c + " " + p + " " + g + " " + j;)

I neglected to create a variable to hold everything I put in the console.log!

age calculator

var birthYear = 1982;
var currentYear = 2017;
var age = birthYear - currentYear;
console.log("You are either" + age +  "or" + (age - 1));

food for rest of my life

var currentAge = 34;
var maxAge = 102;
var tacos = 5;
var food = (maxAge - currentAge) * tacos;
console.log("You will need " + food * 360 + " for the rest of your life");

StevenLawson_Prework_Day6.md

Day 6

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

The parenthesis at the end are part of the function syntax, and when typed sayHello(), you are calling or invoking the function, if I understand the question right.

What is the keyword return used for?

The return keyword is used to return a value to the code that called the function.

What are function parameters?

Parmameters are information the function needs in order to work.

What is the naming convention used for function names?

The name of the function should never start with a number, not be a keyword or reserved word, and written in camelCase.

FunFunFunction exercises

Nailed it!

function tellFortune(children, partner, geo, job){
  var children = 2;
  var partner = "Melanie";
  var geo = "middle of nowhere";
  var job = "web developer";
  console.log("You will have " + children +" be with " + partner + " in the " + geo + " as a "+ job)
}
tellFortune();

Calculate Age

First try!

function calculateAge (birthYear, now){
  var birthYear = 1982;
  var now = 2017;
  var age = now - birthYear;
  console.log("You are either " + age + " or " + (age - 1));
}
calculateAge();

Supply for Life

function calculateSupply(age, amt) {
  var maxAge = 102;
  console.log("You will need " + (maxAge - age) * (amt * 360) + " tacos for the rest of your life");
}
calculateSupply(34, 2);

StevenLawson_Prework_Day7.md

Day 7

UX Design

Psychology

Doesn't support: (http://www.suzannecollinsbooks.com/)

What is the user’s motivation to be here in the first place? To buy the Hunger Games, I guess? Read her bio?

Supports: (https://www.etq-amsterdam.com/)

What is the user’s motivation to be here in the first place? To buy shoes, and shoes in a sleek, minimal design is exactly what you get.

Usability

Doesn't support:

(https://denveroutfitters.com/)

Have you provided everything the user needs to know? Absolutely not: what does this company DO exactly? On the home page I am directed to some weird movie about people living in dog kennels or something? What is this company selling exactly? Massively unclear.

Supports: (http://education.iceandsky.com/)

Have you provided everything the user needs to know? This cool website about climate change is one of the coolest designs I have ever seen. The user is provided everything they need to know to get to the next animated informated page. Very well done.

Design

Supports:

(https://www.swiss.com/worldofswiss/en/#)

Does it communicate the purpose and function without words? Very much so! This cool site for a Swiss airline immediately takes the user to a page with playable videos.

Doesn't support: (http://www.arrestling.com/index.htm)

Does it communicate the purpose and function without words? Not at all. What is this site? How have I arrived here?!

Copywriting

Supports: (https://www.any.do/)

Is it clear, direct, simple, and functional? Yes, the copy does an excellent job of telling the user what their services are in a clear way.

Doesn't support: (http://superior-web-solutions.com/)

Is it clear, direct, simple, and functional? This website is called "superior web solutions" but the user immediately doubts that's the case. The copy repeats itself endlessly, while still being vague at the same time.

Analysis

Supports: (https://www.facebook.com/) Do you know why users do that, or are you interpreting their behaviour? I had to go with one of the masters of data analysis of their users. Facebook ALWAYS has a very clear idea of what their users are doing and why, and how to make money off them.

Doesn't support: (http://blinkee.com/)

Do you know why users do that, or are you interpreting their behaviour? I don't think this site has any clue what their users are doing, or what their demographics are.