sashajustice/Prework

## Prework
##1. On a website, what is the purpose of HTML code?##
The Purpose of HMTL code is to give a page structure, it describest the structure of the pages.HTML pages are text documents.

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

HTML code is made up of characters inside angled brackets. Elements are usually made up of two tags, an opening and a closing tag. The tags are like
containers that indicate someting about the info between their opening and closing tags.  Many times the two terms are used interchangeably
but specifically, an 'element comprises the opening tag AND the closing tag and any content that lies between them.

3.Why do we use attributes in HTML elements?
We use attributes because they tell us more information about the elements.

4. Describe the purpose of the head, title, and body HTML elements.
Head - The head is placed above the body and contains information about the page rather than information that is shown within the main part of the browser.
Title - Thh contents are shown in the top of the browser . Anything written between the title tags will appear in the title bar at the top of the browser window.
Body - Everything inside of the body is shown inside the main browser window.

5. In your browser (Chrome), how do you view the source of a website?
option cmd u = is the shortcut to console.

6.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.
a. H1 - The main heading
b. h2 - The sub heading
c.body - the body of the page adn what's viewable in the browser
d.title - Anything written between the title tags will appear in the title bar at the top of the browser window or on your browser tab, depending
on what browser you use.
e.head - This contains information
about the page. The title is placed inside the head.

7.What are empty elements?
There are a few elements that do not have any words between an opening and closing tag. An empty element has one tag usually. Beore teh closing
angled bracket of an empty element, there will often be a space adn a forward slash character.

8. What is semantic markup?
Semantic markup is not intended to affect the structure of your pages, but thye provides extra information such as where emphasis is placed in a sentence, meaning of acronyms etc.

9.What are three new semantic elements introduced in HTML 5?
a. <em> element
b. <blockquote>
c.<strong>

Codepen link for day 1
https://codepen.io/Sashajustice/pen/qKqrPv

Day 2

1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered lists have numbers.
Unordered are a list with no numbers or characters. They have bullet points.
Definitions -  are made up of a set of terms along with the
definitions for each of those terms.

2.What is the basic structure of an element used to link to another website?
<a href="https://www.apple.com>apple></a>


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


4.How do you link to a specific part of the same page?
You use a relative URL instead of an absolute URL to a new page.
ex. <a href="movies.html">

part 2
1.What is the purpose of CSS?
CSS allows you to create rules that specify how the content of
an element should appear.

2.What does CSS stand for? What does cascading mean in this case?
Cascading Style Sheets
3.What is the basic structure of a CSS rule?
A CSS rule
contains two parts: a selector and a declaration
a.Selectors indicate which
element the rule applies to.
The same rule can apply to
more than one element if you
separate the element names
with commas.
b.Declarations indicate how
the elements referred to in
the selector should be styled.
Declarations are split into two
parts (a property and a value),
and are separated by a colon.

4.How do you link a CSS stylesheet to your HTML document?
<link href="css/happy.css" type="text/css"
 rel="stylesheet" />

5.When is it useful to use external stylesheets as opposed to using interal CSS?
It is useful to use external stylesheets when building a site with more than one page
All of your web pages can share
the same style sheet. and this way you're not repeating code.

6.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.

7.What are the three parts of an HSL color property?
The three parts of an HSL color property are hue, saturation and lightness values.

8.In the world of typeface, what are the three main categories of fonts?
The 3 main categories of fonts are Serif, Sans-Serif and Monospace.
What are the differences between them?
a.Fantasy
b.Cursive
c. Monospace . Every letter in a monospace (or
fixed-width) font is the same
width. (Non-monospace fonts
have different widths.)

9.When specifiying font-size, what are the main three units used?
The Three main units used tO specificy font-size are Pixels, percentages and EMS.


Part 3

1.If you're using an input element in a form, what attribute controls the behavior of that input?
The attribute that controls the behavior of that input is the form control.
input type button?


2.What element is used to create a dropdown list?
The <select> element is used to create a dropdown list


3.If you're using an input element to send form data to a server, what should the type attribute be set to?
The element should carry the action attribute and the method should be Post

4.What element is used to group similar form items together?
<fieldset>

===================================
1.Describe the differences between border, margin, and padding.
a.Border separates the edge of one box from another.
b.Margin- sits outside the edge of the border. You can set the width of a marging to create a gab between two different boxes.
c.Padding: The space between the border of a box and any content inside it. Adding it , increases readability of contents.


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

3. Describe the different between block-level and inline elements.
-A block-level element start on a new line
Examples include:
<h1> <p> <ul> <li>

-inline elements flow in between surrounding text
for ex.
<img> <b> <i>

4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
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.

5. What is the difference between a fixed and liquid layout?
-A liquid page layout  uses relative units instead of fixed units.
-A fixed layout is a more outdated Fixed (aka static)
It layout has a fixed width in pixels. The ‘container’ of the website is programmed to not move (that’s where the name ‘static’
comes from). This width stays the same independently of which screen size or resolution the viewer has.


DAY 4
1. In an image element, why is the alt attribute important?

The alt attribute is important for accessibility reasons. For people who can’t see, it tells them what’s on their page.


2. What determines if an image element is inline or block?
If the <img> is followed by a block level element or within one like an h1 then it’s block, if it’s within an inline element then it’s inline.

3. What are the benefits of jpg or png image file formats
-when you have many different colors in a picture, you should use a JPEG
png formats are ideal when saving images with few color or large areas of the same color.

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

1. 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.

Day 5
1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
-Numbers are numeric values
-Strings are used to represent text.You write them by enclosing their content in quotes.
-Booleans are a Javascript type with two values, true or false.

2.What are the three logical operators that JavaScript supports?
-The 3 logical operators that Javascript supports are:
a.and
b.or
c.not

3.What is the naming convention used for variables?
const apple = () => {
}

function apple() {
}
All variables should be declared before used. It is preferred that each variable declarative statement and comment.
They should be listed in alphabetical order if possible.

4.What is the difference between an expression and a statement?
-A fragment of code that produces a value is called an expression. Every value
that is written l is an expression even if it's meaningless.
-A statment A A statement stands on its own, so it amounts to something only if it has an effect.

5.What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
break case catch class const continue debugger default
delete do else enum export extends false finally for
function if implements import interface in instanceof let
new package private protected public return static super
switch this throw true try typeof var void while with yield
-They are important to avoid so you don't get errors.

6.What is control flow, and why is it useful for programming?
-When your program contains more than one statement, the statements are
in an order. It helps you keep track of what's happening when you know theres an order.

================
1. 25
2. number is blue, string is red
3.undefined
4."Hello Turing!"
5.undefined
6.9
7.undefined
8."Connect these strings"
9."Hello Turing! How are you?"
10.5 < 3
11. the first equals is also saying the data type is the same as well as the value which is why we get a false.
12.Yes it will log Hey to the console.
13.if(2 > 3) {
console.log("I'm a big boy!");
} else {
return ("guess I'm not so big!");

=============================
Day 6
===========================

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?
-When you write sayHello, you're writing a string in the console, but when you write sayHello(), you're actually calling a function

2.What is the keyword return used for?
A return statement
determines the value the function returns.  "When control comes across such
a statement, it immediately jumps out of the current function and gives the
returned value to the code that called the function."


3.What are function parameters?
var yes = function(x,y) {
}
The x and y in the parenthesis are the parameters. They are the info passed into the function
What is the naming convention used for function names?

4.What is the naming convention used for function names?
Function names should be verbs if the function changes the state of the program, and nouns if they're used to
return a certain value.

Day 7
There is a great series of UI/UX posts called UX Crash Course: 31 Fundamentals. Read the first three,
short posts: What is UX?, User Goals & Business Goals, and The 5 Main Ingredients of UX.
After you're done reading the third post, read through the each section of questions again:
Psychology, Usability, Design, Copywriting, and Analysis. Choose one question from each of these sections
(so 5 total questions), and find one site that is good at supporting that question, and find another site that
violates that question.

a.Psychology
  question= What habits are created if they do this over and over?
  Good at supporting the question: Face book with the targeted feeds of your friends can have you surfing for hours
  Bad at supporting the question: Black board- makes me want to leave
b.Usability
  Question=Have you provided everything the user needs to know?
  good=https://www.instagram.com
  bad=https://www.mtv.com
c.Design
  Question=Do clickable things look different than non-clickable things?
  Good at supporting the question: https://bluebottle.com has a very clean design and the clickable buttons are very clear to see.
  Bad at supporting the question: https://new.consensy.net  could be cleaner and have clearer differences between what's clickable and not
d.Copywriting
  Question=Does it sound confident and tell the user what to do?
  Good=https://www.apple.com
  Bad - https://mendocinowoodlands.org/
e.Analysis
  Question=Are you using data to prove that you are right, or to learn the truth?
  good= https://www.slack.com
  bad= http://www.foxnews.com/
	##1. On a website, what is the purpose of HTML code?##
	The Purpose of HMTL code is to give a page structure, it describest the structure of the pages.HTML pages are text documents.

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

	HTML code is made up of characters inside angled brackets. Elements are usually made up of two tags, an opening and a closing tag. The tags are like
	containers that indicate someting about the info between their opening and closing tags. Many times the two terms are used interchangeably
	but specifically, an 'element comprises the opening tag AND the closing tag and any content that lies between them.

	3.Why do we use attributes in HTML elements?
	We use attributes because they tell us more information about the elements.

	4. Describe the purpose of the head, title, and body HTML elements.
	Head - The head is placed above the body and contains information about the page rather than information that is shown within the main part of the browser.
	Title - Thh contents are shown in the top of the browser . Anything written between the title tags will appear in the title bar at the top of the browser window.
	Body - Everything inside of the body is shown inside the main browser window.

	5. In your browser (Chrome), how do you view the source of a website?
	option cmd u = is the shortcut to console.

	6.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.
	a. H1 - The main heading
	b. h2 - The sub heading
	c.body - the body of the page adn what's viewable in the browser
	d.title - Anything written between the title tags will appear in the title bar at the top of the browser window or on your browser tab, depending
	on what browser you use.
	e.head - This contains information
	about the page. The title is placed inside the head.

	7.What are empty elements?
	There are a few elements that do not have any words between an opening and closing tag. An empty element has one tag usually. Beore teh closing
	angled bracket of an empty element, there will often be a space adn a forward slash character.

	8. What is semantic markup?
	Semantic markup is not intended to affect the structure of your pages, but thye provides extra information such as where emphasis is placed in a sentence, meaning of acronyms etc.

	9.What are three new semantic elements introduced in HTML 5?
	a. <em> element
	b. <blockquote>
	c.<strong>

	Codepen link for day 1
	https://codepen.io/Sashajustice/pen/qKqrPv

	Day 2

	1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
	Ordered lists have numbers.
	Unordered are a list with no numbers or characters. They have bullet points.
	Definitions - are made up of a set of terms along with the
	definitions for each of those terms.

	2.What is the basic structure of an element used to link to another website?
	<a href="https://www.apple.com>apple></a>


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


	4.How do you link to a specific part of the same page?
	You use a relative URL instead of an absolute URL to a new page.
	ex. <a href="movies.html">

	part 2
	1.What is the purpose of CSS?
	CSS allows you to create rules that specify how the content of
	an element should appear.

	2.What does CSS stand for? What does cascading mean in this case?
	Cascading Style Sheets
	3.What is the basic structure of a CSS rule?
	A CSS rule
	contains two parts: a selector and a declaration
	a.Selectors indicate which
	element the rule applies to.
	The same rule can apply to
	more than one element if you
	separate the element names
	with commas.
	b.Declarations indicate how
	the elements referred to in
	the selector should be styled.
	Declarations are split into two
	parts (a property and a value),
	and are separated by a colon.

	4.How do you link a CSS stylesheet to your HTML document?
	<link href="css/happy.css" type="text/css"
	rel="stylesheet" />

	5.When is it useful to use external stylesheets as opposed to using interal CSS?
	It is useful to use external stylesheets when building a site with more than one page
	All of your web pages can share
	the same style sheet. and this way you're not repeating code.

	6.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.

	7.What are the three parts of an HSL color property?
	The three parts of an HSL color property are hue, saturation and lightness values.

	8.In the world of typeface, what are the three main categories of fonts?
	The 3 main categories of fonts are Serif, Sans-Serif and Monospace.
	What are the differences between them?
	a.Fantasy
	b.Cursive
	c. Monospace . Every letter in a monospace (or
	fixed-width) font is the same
	width. (Non-monospace fonts
	have different widths.)

	9.When specifiying font-size, what are the main three units used?
	The Three main units used tO specificy font-size are Pixels, percentages and EMS.


	Part 3

	1.If you're using an input element in a form, what attribute controls the behavior of that input?
	The attribute that controls the behavior of that input is the form control.
	input type button?


	2.What element is used to create a dropdown list?
	The <select> element is used to create a dropdown list


	3.If you're using an input element to send form data to a server, what should the type attribute be set to?
	The element should carry the action attribute and the method should be Post

	4.What element is used to group similar form items together?
	<fieldset>

	===================================
	1.Describe the differences between border, margin, and padding.
	a.Border separates the edge of one box from another.
	b.Margin- sits outside the edge of the border. You can set the width of a marging to create a gab between two different boxes.
	c.Padding: The space between the border of a box and any content inside it. Adding it , increases readability of contents.


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

	3. Describe the different between block-level and inline elements.
	-A block-level element start on a new line
	Examples include:
	<h1> <p> <ul> <li>

	-inline elements flow in between surrounding text
	for ex.
	<img> <b> <i>

	4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
	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.

	5. What is the difference between a fixed and liquid layout?
	-A liquid page layout uses relative units instead of fixed units.
	-A fixed layout is a more outdated Fixed (aka static)
	It layout has a fixed width in pixels. The ‘container’ of the website is programmed to not move (that’s where the name ‘static’
	comes from). This width stays the same independently of which screen size or resolution the viewer has.


	DAY 4
	1. In an image element, why is the alt attribute important?

	The alt attribute is important for accessibility reasons. For people who can’t see, it tells them what’s on their page.


	2. What determines if an image element is inline or block?
	If the <img> is followed by a block level element or within one like an h1 then it’s block, if it’s within an inline element then it’s inline.

	3. What are the benefits of jpg or png image file formats
	-when you have many different colors in a picture, you should use a JPEG
	png formats are ideal when saving images with few color or large areas of the same color.

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

	1. 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.

	Day 5
	1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
	-Numbers are numeric values
	-Strings are used to represent text.You write them by enclosing their content in quotes.
	-Booleans are a Javascript type with two values, true or false.

	2.What are the three logical operators that JavaScript supports?
	-The 3 logical operators that Javascript supports are:
	a.and
	b.or
	c.not

	3.What is the naming convention used for variables?
	const apple = () => {
	}

	function apple() {
	}
	All variables should be declared before used. It is preferred that each variable declarative statement and comment.
	They should be listed in alphabetical order if possible.

	4.What is the difference between an expression and a statement?
	-A fragment of code that produces a value is called an expression. Every value
	that is written l is an expression even if it's meaningless.
	-A statment A A statement stands on its own, so it amounts to something only if it has an effect.

	5.What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
	break case catch class const continue debugger default
	delete do else enum export extends false finally for
	function if implements import interface in instanceof let
	new package private protected public return static super
	switch this throw true try typeof var void while with yield
	-They are important to avoid so you don't get errors.

	6.What is control flow, and why is it useful for programming?
	-When your program contains more than one statement, the statements are
	in an order. It helps you keep track of what's happening when you know theres an order.

	================
	1. 25
	2. number is blue, string is red
	3.undefined
	4."Hello Turing!"
	5.undefined
	6.9
	7.undefined
	8."Connect these strings"
	9."Hello Turing! How are you?"
	10.5 < 3
	11. the first equals is also saying the data type is the same as well as the value which is why we get a false.
	12.Yes it will log Hey to the console.
	13.if(2 > 3) {
	console.log("I'm a big boy!");
	} else {
	return ("guess I'm not so big!");

	=============================
	Day 6
	===========================

	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?
	-When you write sayHello, you're writing a string in the console, but when you write sayHello(), you're actually calling a function

	2.What is the keyword return used for?
	A return statement
	determines the value the function returns. "When control comes across such
	a statement, it immediately jumps out of the current function and gives the
	returned value to the code that called the function."


	3.What are function parameters?
	var yes = function(x,y) {
	}
	The x and y in the parenthesis are the parameters. They are the info passed into the function
	What is the naming convention used for function names?

	4.What is the naming convention used for function names?
	Function names should be verbs if the function changes the state of the program, and nouns if they're used to
	return a certain value.

	Day 7
	There is a great series of UI/UX posts called UX Crash Course: 31 Fundamentals. Read the first three,
	short posts: What is UX?, User Goals & Business Goals, and The 5 Main Ingredients of UX.
	After you're done reading the third post, read through the each section of questions again:
	Psychology, Usability, Design, Copywriting, and Analysis. Choose one question from each of these sections
	(so 5 total questions), and find one site that is good at supporting that question, and find another site that
	violates that question.

	a.Psychology
	question= What habits are created if they do this over and over?
	Good at supporting the question: Face book with the targeted feeds of your friends can have you surfing for hours
	Bad at supporting the question: Black board- makes me want to leave
	b.Usability
	Question=Have you provided everything the user needs to know?
	good=https://www.instagram.com
	bad=https://www.mtv.com
	c.Design
	Question=Do clickable things look different than non-clickable things?
	Good at supporting the question: https://bluebottle.com has a very clean design and the clickable buttons are very clear to see.
	Bad at supporting the question: https://new.consensy.net could be cleaner and have clearer differences between what's clickable and not
	d.Copywriting
	Question=Does it sound confident and tell the user what to do?
	Good=https://www.apple.com
	Bad - https://mendocinowoodlands.org/
	e.Analysis
	Question=Are you using data to prove that you are right, or to learn the truth?
	good= https://www.slack.com
	bad= http://www.foxnews.com/