a standard for describing the structure and presentation of information via the internet.
are labels used to mark up the begining and end of an element.
is added to an HTML start tag. Attributes either modify the default funtionality of an element type or provide functionality to certain element types uable to funtion properly without them.
provides general information about the document, including it's **title element** and links to it's scripts and style sheets.
contains all the contents of an HTML document, such as text, hyperlinks, images, tables, etc.
Press control+U to access source code of a website in Chrome.
html defines the whole document.
body is the document body.
p paragraph text.
h1 main header text.
h2 secondary header text.
are elements that do not contain content such as br page break.
reinforces the meaning of information in web pages and web applications rather than merely to define it's presentaion or look.
HTML5 introduces a new set of elements that allow you to divide up the parts of a page. The names of these elements indicate the kind of content you will nd in them. They are still subject to change, but that has not stopped many web page authors using them already.
- The nav Element
- is used to contain the major navigational blocks on the site such as the primary site navigation.
- The article Element
- acts as a container for any section of a page that could stand alone and potentially be syndicated.
- The aside Element
- has two purposes, depending on whether it is inside an article element or not. When inside it should contain information that is related to the article but not essential to its overall meaning. For example, a pullquote or glossary might be considered as an aside to the article it relates to. When oustide it acts as a container for content that is related to the entire page. For example, it might contain links to other sections of the site, a list of recent posts, a search box, or recent tweets by the author.
is just that, a list that is not an any particular order. It starts with a ul tag that contains li sub tags
- Pepsi
- Coke
- Sprite
is a list that is an a particular numerical order by default. It starts with an ol tag that contains li sub tags
- Coke
- Sprite
- Pepsi
links are defined with the "a" tag, the href attribute specifies the destination address using an absolute URL (http://www....), local link use a relative URL (without the http://www....)
Visit TuringVisit My GitHub
Codepen "Show and Tell" Webpage Take A Look At My CodePen Pre-Work
CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.
means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.
A CSS rule is a statement that defines the style of one or more elements in your web page. These rules follow a specific structure. The format or syntax for CSS rules consists of a selector and a declaration.
A CSS rule defines styles to elements of all web pages using the style-sheet, including the "body" of your pages and HTML tags such as h1, p, and, ul. When stated in a CSS rule, these elements are called selectors.
h1 {declaration}
The declaration contains the property of the selector and the value of the property. The property always is followed by a colon ( : ) and each value ends in a semicolon ( ; ).
selector {property: value;}
- For example:
- h1 {font-weight: bold;}
- where
- h1: is the selector
- font-weight: is the property of the selector for this rule
- bold: is the value of the property
- {font-weight: bold;}: is the declaration
There are three ways of inserting a style sheet:
- External Style Sheet:
- With an external style sheet, you can change the look of an entire website by changing just one file. Each page must include a reference to the external style sheet file inside the element. The element goes inside the section:
- Example
- head
- link rel="stylesheet" type="text/css" href="mystyle.css"
- head
- Internal Style Sheet:
- An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the section of an HTML page.
- Inline Style:
- An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
External style sheets makes it so that what ever you change in the .css sheet, will effect every page in your website. This prevents you from having to make many code changes in each page. This is for "global" site changes.
- Hex Triplet:
- A six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation.
- Serif
- reference to the small lines that are attached to the main strokes of characters within the face.
- San-Serif
- are called such because they lack serif details on characters. Sans-serif typefaces are often more modern in appearance than serifs. The first sans-serifs were created in the late 18th century
- Script
- are based upon handwriting, and offer very fluid letterforms. There are two basic classifications: formal and casual. Formal scripts are often reminiscent of the handwritten letterforms common in the 17th and 18th centuries. Some scripts are based directly on the handwriting of masters like George Snell and George Bickham. There are modern creations, too, including Kuenstler Script. They’re common for very elegant and elevated typographical designs, and are unsuitable for body copy.
- Pixels
- Setting the text size with pixels gives you full control over the text size
- If you use pixels, you can still use the zoom tool to resize the entire page.
- Em
- To allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em
- Percent
- The solution that works in all browsers, is to set a default font-size in percent for the body element.
specifies an input field where the user can enter data. input elements are used within a form element to declare input controls that allow users to input data. An input field can vary in many ways, depending on the type attribute.
defines a drop-down list. The option elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option.
When using an input element to send form data to a server, the type attribute should be set to action.
is used to group related data in a form. The legend element defines a caption for the fieldset element.
- Border
- Every box has a border (even if it is not visible or is speci ed to be 0 pixels wide). The border separates the edge of one box from another.
- Margin
- Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes.
- Padding
- 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.
- The value of this property is most often specifed in pixels (although it is also possible to use percentages or ems). If a percentage is used, the padding is a percentage of the browser window (or of the containing box if it is inside another box).
- You can use a shorthand (where the values are in clockwise order: top, right, bottom, left) EXAMPLE: padding: 10px 5px 3px 1px
The display property allows you to turn an inline element into a block-level element or vice versa, and can also be used to hide an element from the page.
The values this property can take are:
- Inline
- This causes a block-level element to act like an inline element.
- Block
- This causes an inline element to act like a block-level element.
- Inline-Block
- This causes a block-level element to ow like an inline element, while retaining other features of a block-level element.
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 use relative, xed, or absolute positioning, boxes can overlap. If boxes do overlap, the elements that appear later in the HTML code sit on top of those that are earlier in the page. If you want to control which element sits on top, you can use the z-index property. Its value is a number, and the higher the number the closer that element is to the front. For example, an element with a z-index of 10 will appear over the top of one with a z-index of 5.
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.
To add an image into the page you need to use an img element. This is an empty element (which means there is no closing tag). It must carry the following two attributes:
This tells the browser where it can nd the image le. This will usually be a relative URL pointing to an image on your own site.
This provides a text description of the image which describes the image if you cannot see it. The text used in the alt attribute is often referred to as alt text. It should give an accurate description of the image content so it can be understood by screen reader software (used by people with visual impairments) and search engines. If the image is just to make a page look more attractive (and it has no meaning, such as a graphic dividing line), then the alt attribute should still be used but the quotes should be left empty.
Inline elements sit within a block level element and do not start on a new line. Examples of inline elements include the (b), (em), and (img) elements. If the (img) element is inside a block level element, any text or other inline elements will ow around the image as shown in the second and third examples on this page.
Block elements always appear on a new line. Examples of block elements include the (h1) and (p) elements. If the (img) is followed by a block level element (such as a paragraph) then the block level element will sit on a new line after the imageas shown in the rst example on this page.
Whenever you have many different colors in a picture you should use a JPEG. A photograph that features snow or an overcast sky might look like it has large areas that are just white or gray, but the picture is usually made up of many different colors that are subtly different. Use PNG format when savings pictures with few colors or large areas of the same color.
Whenever you use consistently sized images across a site, you can use CSS to control the dimensions of the images, instead of putting the dimensions in the HTML.
When a single image is used for several different parts of an interface, it is known as a sprite. You can add the logo and other interface elements, as well as buttons to the image. 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.
Values of the number type are, unsurprisingly, numeric values. In a JavaScript program, they are written as follows: 13
Use that in a program, and it will cause the bit pattern for the number 13 to come into existence inside the computer’s memory. JavaScript uses a xed number of bits, namely 64 of them, to store a single number value. There are only so many patterns you can make with 64 bits, which means that the amount of di erent numbers that can be represented is limited. For N decimal digits, the amount of numbers that can be represented is 10N. Similarly, given 64 binary digits, you can represent 264 di erent numbers, which is about 18 quintillion (an 18 with 18 zeros after it).
Strings are used to represent text. They are written by enclosing their content in quotes.
"Patch my boat with chewing gum" ' Monkeys wave goodbye '
Both single and double quotes can be used to mark strings as long as the quotes at the start and the end of the string match.
Almost anything can be put between quotes, and JavaScript will make a string value out of it. But a few characters are more di cult. You can imagine how putting quotes between quotes might be hard. Newlines (the characters you get when you press Enter) also can’t be put between quotes. The string has to stay on a single line.
To make it possible to include such characters in a string, the following notation is used: whenever a backslash (\) is found inside quoted text, it indicates that the character after it has a special meaning. This is called escaping the character. A quote that is preceded by a backslash will not end the string but be part of it. When an n character occurs after a backslash, it is interpreted as a newline. Similarly, a t after a backslash means a tab character.
Often, you will need a value that simply distinguishes between two pos- sibilities, like “yes” and “no” or “on” and “o ”. For this, JavaScript has a Boolean type, which has just two values: true and false (which are written simply as those words).
There are also some operations that can be applied to Boolean values themselves. JavaScript supports three logical operators: and, or, and not. These can be used to “reason” about Booleans.
The && operator represents logical and. It is a binary operator, and its result is true only if both the values given to it are true.
The || operator denotes logical or. It produces true if either of the values given to it is true.
Not is written as an exclamation mark (!). It is a unary operator that ips the value given to it—!true produces false and !false gives true.
When mixing these Boolean operators with arithmetic and other oper- ators, it is not always obvious when parentheses are needed.
The last logical operator is not unary, not binary, but ternary, operating on three values. It is written with a question mark and a colon. This one is called the conditional operator (or sometimes just ternary operator since it is the only such operator in the language). The value on the left of the question mark “picks” which of the other two values will come out. When it is true, the middle value is chosen, and when it is false, the value on the right comes out.
(var caught = 5 * 5;)
The special word (key- word) var indicates that this sentence is going to de ne a variable. It is followed by the name of the variable and, if we want to immediately give it a value, by an = operator and an expression.
The previous statement creates a variable called caught and uses it to grab hold of the number that is produced by multiplying 5 by 5.
After a variable has been de ned, its name can be used as an expres- sion. The value of such an expression is the value the variable currently holds. Here’s an example:
(var ten = 10; console.log(ten * ten); // → 100)
Variable names can be any word that isn’t a reserved word (such as var). They may not include spaces. Digits can also be part of variable names—catch22 is a valid name, for example—but the name must not start with a digit. A variable name cannot include punctuation, except for the characters $ and _.
When a variable points at a value, that does not mean it is tied to that value forever. The = operator can be used at any time on existing variables to disconnect them from their current value and have them point to a new one.
(var mood = "light"; console.log(mood); // → light)
(mood = "dark"; console.log(mood); // → dark)
You should imagine variables as tentacles, rather than boxes. They do not contain values; they grasp them—two variables can refer to the same value. A program can access only the values that it still has a hold on. When you need to remember something, you grow a tentacle to hold on to it or you reattach one of your existing tentacles to it.
Expression produces or evaluates some value.
Examples of expressions: new Date() produces new Date object without any side effect. [1,2,3] produces a new array without any side effect. 5+6 produces a new value 11.It just produces new value without any side effect.
Statement produces some behavior or does something and it has some side effect also. Based on the side effect, statements can be categorized.
x=5; is a statement and here side effect is assignment or change in x.
setTimeout() - start of timer is the side effect.
Statements are generally separated by semicolon.
Expression statement are the expression that has some side effect or simply "expression with side effect".
Examples of expression statement:
x+=6; is the complex expression(group of primary expressions) is doing assignment that is a side effect, so called expression statement.
Words with a special meaning, such as var, are keywords, and they may not be used as variable names. There are also a number of words that are “reserved for use” in future versions of JavaScript. These are also o - cially not allowed to be used as variable names, though some JavaScript environments do allow them. The full list of keywords and reserved words is rather long.
break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import in instanceof interface let new null package private protected public return static super switch this throw true try typeof var void while with yield
When your program contains more than one statement, the statements are executed, predictably, from top to bottom. As a basic example, this program has two statements. The rst one asks the user for a number, and the second, which is executed afterward, shows the square of that number.
(var theNumber = Number(prompt("Pick a number", "")); alert (" Your number is the square root of " +
theNumber * theNumber);)
The function Number converts a value to a number. We need that conver- sion because the result of prompt is a string value, and we want a number. There are similar functions called String and Boolean that convert values to those types.
A function de nition is just a regular variable de nition where the value given to the variable happens to be a function. For example, the follow- ing code de nes the variable square to refer to a function that produces the square of a given number:
var square = function(x) { return x * x;
}; console.log(square(12));
// → 144
A function is created by an expression that starts with the keyword
function. Functions have a set of parameters (in this case, only x) and
a body, which contains the statements that are to be executed when the function is called. The function body must always be wrapped in braces, even when it consists of only a single statement (as in the previous example).
is used to return the value of the variable in the function
The parameters to a function behave like regular variables, but their initial values are given by the caller of the function, not the code in the function itself.
An important property of functions is that the variables created inside
of them, including their parameters, are local to the function. This means, for example, that the result variable in the power example will be newly created every time the function is called, and these separate incarnations do not interfere with each other.
This “localness” of variables applies only to the parameters and to variables declared with the var keyword inside the function body. Vari- ables declared outside of any function are called global, because they are visible throughout the program. It is possible to access such variables from inside a function, as long as you haven’t declared a local variable with the same name.
The following code demonstrates this. It de nes and calls two functions that both assign a value to the variable x. The rst one declares the variable as local and thus changes only the local variable. The second does not declare x locally, so references to x inside of it refer to the global variable x de ned at the top of the example.
var x = "outside";
f1(); console.log(x); // → outside
var f2 = function () { x = "inside f2";
};
f2(); console.log(x); // → inside f2
This behavior helps prevent accidental interference between functions. If all variables were shared by the whole program, it’d take a lot of e ort to make sure no name is ever used for two di erent purposes. And if you did reuse a variable name, you might see strange e ects from unrelated code messing with the value of your variable. By treating function-local variables as existing only within the function, the language makes it possible to read and understand functions as small universes, without having to worry about all the code at once.
Function variables usually simply act as names for a speci c piece of the program. Such a variable is de ned once and never changed. This makes it easy to start confusing the function and its name.
But the two are di erent. A function value can do all the things that other values can do—you can use it in arbitrary expressions, not just call it. It is possible to store a function value in a new place, pass it as an argument to a function, and so on. Similarly, a variable that holds a function is still just a regular variable and can be assigned a new value.
UX is actually about “doing” the process of User Experience Design. UX Design (also sometimes called UXD) involves a process very similar to doing science: we do research to understand the users, we develop ideas to solve the users’ needs — and the needs of the business — and we build and measure those solutions in the real world to see if they work.
Users always want something, because they are people, and people always want something. Whether they are trying to get laid on a dating site, looking for sneezing pandas on YouTube, or stalking old boyfriends on Facebook, they want something
Every organization has a reason for creating a site or app in the first place. Typically it’s money, but it might be brand awareness, or getting new members for a community, etc. The specific type of business goal is important. If you want to show more ads your UX strategy will be a lot different than if you want to sell products or promote via social media. These things are often called “metrics” or “KPI’s” by the business-y folks.
The real test of a UX designer is how well you can align those goals so the business benefits when the user reaches their goal. (Not the other way around!)
- Psychology
- Usability
- Design
- Copywriting
- Analysis
Craigslist Real Estate This doesn't seem like something that you can trust.
Zillow This site makes feel like the listings are real.
Paradise With a View Requires to much time to try and figure out what's going on
VRBO Extremely easty to use, looks and feels reliable.
Craigslist Personals Looks terrible and definately not trust worthy.
Tinder easy to look at and definately trustworthy.
Wikipedia Couldn't state is better then Wikipedia.
Yale Art School? What is this?
Amazon I think this site lacks user experience in the way of anything that excite you enough to spark an impulse buy.
Jordan's Although not interactive this site provides a little more psychological pull that might bring an impulse buy.