Prework for Turing Front End Engineering Program

EmilyLalonde_Mod0.md

1. On a website what is the purpose of HTML code?

It describes the structure of pages.

2. What is the difference between an element and a tag?

Elements are the characters enclosed by the tags. Elements tell the browsers something about the information that sits between its opening and closing tag. elements=action tag=proper structure of action. Elements describe the structure of the pages and tags act like containers.

3. Why do we use attributes in HTML elements?

Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of 2 parts: a name and a value, seperated by an equals sign.

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

Body= everything inside this element is shown inside the main browser window.

Head= contains information about the page.

Title= contents are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tabs to allow you to view multiple pages at the same time.

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

Go to "view", then click "developer" then "view source".

6.List 5 different HTML elements and what they are used for.

1. <h1></h1> is used for main headings; numbers after 1 are used for subheadings (up to 6).
2. <b></b> makes characters appear bold.
3. <i></i> makes characters appear italic.
4. <sup></sup> is used to contain characters that should be superscript such as the suffixes of dates or mathematical concepts like raising a number to a power.
5. <sub></sub> is used to contain characters that should be subscript. It is commonly used with footnotes or chemical formulas.

7. What are empty elements?

Elements that do not have any words between an opening and closing tag. An empty elemet usually only has 1 tag. Before the closing angled bracket of an empty element there will often be a space and a forward slash character.

8.What is semantic markup?

Text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages.

9. What are three new semantic elements introduced in HTML5?

<header>, <footers>, <nav>, <articles>, <asides>, <section>, <hgroup>.

CodePen link

https://codepen.io/lalonde0902/pen/KEPaor

EmilyLalonde_Prework_Day2.md

There are three main types of lists in HTML: What are the differences?

ordered, unordered, and definition.

1. Ordered lists are numbered
2. Unordered lists are bullet points
3. Definition lists indent the definition of a word.

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

<a></a>

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

href

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

id element is used to identify where you wish to link to on the page. <a href="#_">_</a> is used to link to where the id attribute is indicated.

What is the purpose of CSS?

It allows you to create rules that specify how the content of an element should appear.

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

CSS= Cascading Style Sheet.

Cascading means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.

What is the basic structure of a CSS rule?

A CSS rule contains 2 parts: a selector and a declaration.

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

<link href="css/styles.css" type="text/css" rel="stylesheet"/>

When is it useful to use extrenal stylesheets as opposed to using internal CSS?

When building a site with more than one page. This allows all pages to use the same style rules (rather than repeating them in each page). It also keeps the content seperate from how the page looks which means you can change the styles used across all pages by altering just one file (rather than each individual page).

Describe what a color hex code is.

These are six-digit codes that represent the amount of red, green, and blue in a color, preceded by a pound or hash # sign. Example: #ee3e80

What are the three parts of an HSL color property?

1. Hue
2. Saturation
3. Lightness.

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

Serif, sans-serif, and monospace.

1. Serif fonts have extra details on the ends of the main strokes of the letters.
2. Sans-serif fonts have straight ends to the letters, and therefore have a much cleaner design.
3. Every letter in a monospace (or fixed-width) font is the same width. (non-monospaced fonts have different widths).

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

Pixels, Ems, and Percentages.

1. Pixels are commonly used because they allow the web designers very precise control over how much space their text takes up. The number of pixel is followed by the letters px (or pt).
2. An em is equivalent to the width of the letter m.
3. Percentages work off the default size of the browser. The default size if text in browsers is 16px. So a size of 75% would be the equivalent of 12px, and 200% would be 32px.

CodePen link

https://codepen.io/lalonde0902/pen/KEPaor

EmilyLalonde_Prework_Day3.md

If you're using an input element in a form, what attribute controls the behavior of that input?

The value of the "type" attribute determins what kind of input you will be creating.

What element is used to create a dropdown list?

<select>

If you're using an input element to send form data to a server, what should the type attribute be set to?

type="submit

What element is used to group similar form items together?

<fieldset>

Describe the differences between border, margin, and padding.

Border-Every box has a border (even if it is not visible or is specified to be 0 pixels wide). The border seperates the edge of one box from another.

Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of the two adjacent boxes.

Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.

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

1px= padding-top 2px= padding-right 5px= padding-bottom 10px= padding-left

Describe the different between block-level and inline elements.

Block level elements start on new lines and are larger blocks of content, inline elements can start on a new line or continue on the same line and its width only extends as far as it is definted by its tags.

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

This is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containing element. Elements with fixed positioning do not affect the position of surrounding elements and they do not move when the user scrolls up or down the page. When you move any element from normal flow, boxes can overlap. The z-index property allows you to control which box appears on top.

What is the difference between a fixed and liquid layout?

Fixed width layout designs do not change size as the user increases or decreases the size of their browser window. Measurements tend to be given in pixels.

Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window. They tend to use percentages.

CodePen link

https://codepen.io/lalonde0902/pen/KEPaor

EmilyLalonde_Prework_Day4.md

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

This provides a text description of the image which describes the image if you cannot see it.

What determines if an image element is inline or block?

Images are inline elements, although they have hight and width like a block element.

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

Whenever you have many different colors in a picture you should use JPEG. A photograph that features snow or an overcast sky might look like it has large areas that are just white or grey, but the picture is usually made up of many different colors that are subtly different. PNG is more beneficial when a picture has an entrie area that is filled with exactly the same color (flat color). Logos, illustrations, and diagrams often use flat colors.

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

Whenever you use consistently sized images accross a site (common), you can use CSS to control the dimensions of the images, instead of putting the dimensions in the HTML.

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

When a single image is used for several different parts of an interface, it is known as a sprite. The advantage of using sprites is that the web browser only needs to request one image rather than many images, which can make the web page load faster.

CodePen link

https://codepen.io/lalonde0902/pen/KEPaor

EmilyLalonde_Prework_Day5.md

How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?

Var is an example of what programmers call a keyword. The JavaScript interpreter knows that this is used to create a variable.

Equals sign is the assignment operator. It says that you are going to assign a value to the variable. It is also used to update the value given to a variable.

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

Numeric data type: the numeric data type handles numbers

String data type: the string data type consists of letters and other characters

Boolean data type: the boolean data type can have one of two values true or false

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 name must begin with a letter, dollar sign($), or an underscorre ( _ ). It must not start with a number.
2. The name can contain numbers, letters, dollar sign ($) or an underscore ( _ ). Note that you must not use a dash (-) or a period (.) in a variable name.
3. You cannot use keywords or reserved words. Keywords are special words that tell the interpreter to do something. For example, var is a keyword used to declare a variable. Reserved words are ones that may be used in a future version of JavaScript.
4. All variables are case sensitive, so score and Score would be different variable names, but it is bad practice to create two variables that have the same name using different cases.
5. Use a name that describes the kind of information that the variable stores. For example "firstName" might be used to store a person's first name, "lastName" for their last name, and "age" for their age.
6. If your variable name is made up of more than one word, use a capital letter for the first letter of every word after the first word. For example, "firstName" rather than "firstname". This is refered to as camel case. You can also use an underscore between each word (you cannot use a dash).

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

Arrays are helpful when you do not know how many items a list will contain because, when you create the array, you do not need to specify how many values it will hold.

To access a value from an array, after the array name you specify the index number for that value inside square brackets.

You can change the value of an item in an array by selecting it and assigning it a new value just as you would any other variable (using the equals sign and the new value for that item).

What is the difference between an expression and a statement?

An expression produces or evaluates some value. There are two kinds:

1. Expressions that just assign a value to a variable
2. Expressions that use two or more values to return a single value

Statement produces some behavior or does something and it has some side effect also. Statements can be categorized. Seperated by semi-colon.

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

Assignment operators, arithmetic operators, and string operators.

1. Assignment operators assign a value to a variable. ie color= "beige"
2. Arithmetic operators perform basic math. ie area= 3*2
3. String operators combine two strings. ie greeting= "Hi" + "Molly"

CodePen link

https://codepen.io/lalonde0902/pen/KEPaor

EmilyLalonde_Prework_Day6.md

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

Function expressions will execute automatically if the expression is followed by ().

What is the difference between function parameters and arguments?

A parameter is a variable in a method definition. When a method is called, the arguments are the data you pass into the method's parameters. Parameter is variable in the declaration of function. Argument is the actual value of this variable that gets passed to function.

What is the keyword return used for?

It lets you immediately break out of a function call, possibly returning a value. You should use it whenever your function needs to synchronously convey information to its caller.

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?

A local variable will be visible only within a function where it is defined. Function parameters are always local to that function. Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.

EmilyLalonde_Prework_Day7.md

UX/UI questions:

1. Psychology: How does this make them feel?

I chose 2 different websites to display how one makes the user feel happy to use the site, and one that displays how a user could feel upset by using an outdated website.

- Airbnb.com is a wonderful example of a website the insrpires joy in the user for multiple reasons. The colors and images are welcoming and the user interface is very friendly and simple.

- http://www.poudreriverresort.com/ I recently encoutereed this website for a friends wedding and it made me feel highly discouraged. Not only is the website unapealing visually, but it is also difficult to navigate. For a lodging website there is absolutely no images displaying what the lodging looks like, Seems counter intuitive...

2. Usability: Are you working with the user’s assumptions, or against them?

I chose two different websites, one that displays wonderful usability, and one that is very difficult to navigate.

- https://www.virginatlantic.com/us/en has wonderful usability, mostly because it includes a seperate bok at the bottom to remind the user of all the choices they've made for flights which makes editing easier. It does not redirest or reload during the booking process. The user assumes the site will retain the information inputted and it does.

- https://www.flyfrontier.com/ can be quite hard to use, especially through sarafi. It tends to reload, not save information, make you try and re-book several times. Very inconvenient, especially for a travel site. It doesn't save information correctly which works agains the users assumptions.

3. Design: Do users think it looks good? Do they trust it immediately?

I chose two sites that display the opposite sides of design.

- Apple.com has a wonderfully designed website. Links are very clear and images are bright. Great example of a product that has a site that matches its unique design. It displays as a very trustworthy website.

- Craigslist.com is a very popular, yet incredibly basic site that reminds the user its a "get to business" site meant simply for selling used goods. The basic format is easy to navigate, however, the design is not encouraging for many purchasers. Not very trustworthy.

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

I chose two sites, one that is clear about it function, and one that is very confusing.

- https://www.goop.com/ is a site that is very clear about its purpose. The most important news artiles have larger fonts and news categories are well labeled.

- http://www.berkshirehathaway.com/ is a very confusing website. It is very unclear what the focus of the page is. It seems like they rely on assumption.

5. Analysis: Are you looking for subjective opinions or objective facts?

I chose two sites, one that displays subjective opinions and one that displays objective facts.

- https://www.wsj.com/ The Wall Street Journal is a site you would go to when you're looking for objective facts. The news is supposed to be free of subjectivity so it's reliable.

https://perezhilton.com/ is a site for subjective opinions since its a gossip rag. With its wild colors and slow loading content it is also a very inconvenient website to use.

Website link:

file:///Users/Emily/Documents/Mod_0_Capstone/index.html