Module 0 Capstone Project

JacobOgren-mod-0-capstone.md

Chapters 1 and 2 of HTML & CSS: Design & Build Websites

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

It provides the structure or bones of a site. HTML pages are text documents.

What is the difference between an element and a tag?

Elements are made up of characters that live inside angled brackets. Each element is typically made up of 2 tags, an opening and closing tag.

Why do we use attributes in HTML elements?

Attributes provide additional information about the contents of an element. Required a name and value.

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

Body - Everything inside this element is shown inside the main browser. Head - This contains information about the page (The title tag is typically inside the the head tag. Title - This is either shown in the top of the browser or on the tab for that page.

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

Option + Command + U. Or go to View and click "View Source."

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.

HTML has 6 levels of headings. <h1> is used for main headings. <h2> is used for subheadings. <p> is used to create a paragraph. <b> will make characters appear bold, while <i> will make the characters appear in italic.

What are empty elements?

They usually have just one tag. Two examples are: <br /> which is a line break, and <hr /> which is a line break with a horizaontal rule or line.

What is semantic markup?

Element that are not intended to affect the structure of web pages, but rather describe the content of your web page more accurately. Other programs, such as screen readers and search engines, can idenitfy this content and treat it differently.

What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.

<abbr> is now used for both abbr and acronym.

<cite> is used to reference a piece of work, such as a book, film or research paper - it is rendered italics. It should no longer be used for a person's name - but it was allowed in HTML 4, so most people will likely continue to use it.

Per page 431 - the following tags: <header>, <nav>, <article>, <aside> and <footer> appear to be new, versus traditional layouts which include these elements inside a <div> tag.

Learning Web Development CodePen

https://codepen.io/jogren11/pen/XOOXJO

Chapters 3 and 4 of HTML & CSS: Design & Build Websites

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

Ordered lists are numbered, unordered are bulleted, and definition lists are used to define terminology. Each of these have different tags.

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

Use the <a> element with an href attribute. Set the value to the URL of the desired page linked in quotations. Add a link text and end with a closing </a> tag

Examples: Search the Web!

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

target="_blank"

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

First, you must use the id attirbute to identify specific parts of a page. Only start id attributes with a letter or underscore.

Example link to same page: Top

Chapters 10, 11 and 12 of HTML & CSS: Design & Build Websites

What is the purpose of CSS?

CSS allows you to specify how the content of an element should appear.

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

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. Even the simplest HTML document may have three or more style sheets associated with it including: The browser's style sheet, The user's style sheet, one of fonts and color and a second for format, etc.

CSS rules also cascade in that one can override another based on specificity, importance, what was written last, etc.

What is the basic structure of a CSS rule?

All CSS rules contain a selector (which element the rule applies to) and a declaration (how the selector should be styled). Declarations include a property and a value.

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

Use a link tag in the HTML document with href="css/styles.css" type="text/css" rel="stylesheet".

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

When you're building a site with multiple pages. This way the CSS doesn't blend with the HTML - it also streamlines any editing process, so you just have to change the style in one place versus across all pages.

Describe what a color hex code is.

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

What are the three parts of an HSL color property?

Hue, Saturation, Lightness.

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

Serif (details on the ends), Sans-Serif (straight ends to letters) and Monospace (every letter has the same width.

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

Pixels, Percentages and Ems.

Chapter 7 of HTML & CSS: Design & Build Websites

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

The "type" attribute.

What element is used to create a dropdown list?

The Select element plus 2 or more option tags.

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

I suppose that there are option, for example "text", "radio", "password", "checkbox", etc. However, it's important to include the name attribute with a value, which will be sent to the server.

What element is used to group similar form items together?

The fieldset element - Use the legend element to essentially title the grouping.

Chapters 13 & 15 of HTML & CSS: Design & Build Websites

Describe the differences between border, margin, and padding.

A border separates the edge of one box from another. The padding is the space between the letters or contents of a box and the border. The margin exists outside of the border and can be set to add space between adjacent boxes.

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

These are in clockwise order start from the top (top, right, bottom, left).

Describe the different between block-level and inline elements.

Block-level elements, like <h1>, <p>, <ul>, and <li> start on a new line. Inline elements, like <img>, <b>, and <i> flow in between surrounding text, or in other words, will shared the same line as other elements.

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

Fixed positioning is a form of absolute positioning that places the element in a fixed position. The difference to absolute positioning is that if an element is fixed, it does not move when the user scrolls. Z-index is used to control which boxes appear on top - more than likely you would want the fixed element to appear on top (example: navigation bars).

What is the difference between a fixed and liquid layout?

A fixed layout will stay the same width no matter what size the browser window is, whereas the liquid layout will shrink and stretch to fill the screen.

Chapter 5 of HTML & CSS: Design & Build Websites

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

It provides a text description of the image to be understood by screen reader software (used by people with visual impairments and search engines).

What determines if an image element is inline or block?

This is dependent on where you place the element within the code. For example, if the image element is followed by a block level element, the image element is block while the other block level element sits on a new line after the image. If the image element is inside a block level element, the image appear inline while the text flows around the image.

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

Whenever you have many different colors in a picture you should use a JPEG. Use GIF and PNG format when saving images with few colors or large areas of the same color.

Chapter 16 of HTML & CSS: Design & Build Websites

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 across a site, CSS allows you to control the dimensions of all the images, versus putting the dimensions in each of the HTML elements. A great example of this is on e-commerce sites which tend to show product photos at the same size.

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

It is when a single image is used for several different parts of an interface. For example, when a single image has several states, including hover and active. 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.

Chapter 2 of Javascript & JQuery: Interactive Front-End Web Development

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

Use a keyword, like var, to create a variable. In order to use the variable you must give it a name, otherwise known as an identifier.

The equal sign is called an assignment operator. It says that you are going to assign a value to a 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.

The numeric data type handles numbers (ex. 9, 23, 7672, -14). Strings consist of letters and other characters and are enclosed within a pair of quotation marks. Finally, booleans 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 underscore (2.) The name can contain letters, numbers, dollar sign, or an underscore, but not a dash or period (3.) You cannot use keywords or reserved words (4.) It is bad practice to create two variables that have the same name using different cases (5.) It is best practice to use a name that describes the kind of information that the variable stores (6.) Use camelCase or snake_case.

A few examples of Javascript reserved words are else, float, and class.

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

Arrays allow us to group together related values in a list. To access a value from an array, after the array name you specify the index number for that value inside square brackets. Like variables, you change the value of an item in an array by selecting it and assigning it a new variable using the equals sign and the new value for that item.

What is the difference between an expression and a statement?

An expression results in a single value, while statements result in one or more values.

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

Assignment Operators simply assign a value to a variable, Arithmetic Operators perform basic math, and String Operators combine two strings.

Chapter 3 of Javascript & JQuery: Interactive Front-End Web Development

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

sayHello() is the name of the function, so this is what you would type in to execute the statement. I assume that sayHello would not execute the function.

What is the difference between function parameters and arguments?

Parameters are words that act as variables. Arguments are either real numbers or variables that hold real numbers - both are placed in the parentheses after the function identifier.

What is the keyword return used for?

'return' is explicitly stated to return a value to the code that called the function.

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?

Local variables are created inside a function and cannot be accessed outside of the function in which it was created. Global variables are created outside of a function and can be used anywhere in the script.

Local variables are better in that they take up less memory, and that they decrease the risk of naming conflicts.

A variable that is globally scoped in useful when you want a consistent variable to reference throughout your script.

UX Crash Course

Psychology - How does the site make you feel?

Good: I belive that Facebook it especially good when it comes to tapping into their user's psychology. The newsfeed is carefully selected to instill emotions and even the notification signs can provoke feelings of excitment (www.facebook.com)

Bad: (www.candgdenver.com) The site to this bar doesn't offer much information. The menu itself seems cluttered and difficult to process. It is clear that it's maker didn't focus too much on how the user would feel when navigating through different tabs

Usability - Are you being clear and direct, or is this too clever?

Good: Google does a great job of keeping it simply (www.google.com)

Bad: While I don't think Yahoo is a bad site, the home page is a bit cluttered and not nearly as innately user friendly as that of Google (www.yahoo.com)

Design - Do users think it looks good? Do they trust it immediately?

Good: The following site is that of my friend's catering company. I think the web designer did a great job or using color, shape and typography, along with representing a uniform brand to intill trust in users (www.mountaincrust.com)

Bad: The Front Range Community College site is a poor represention of UX design. I think it uses a stange blend of colors and it looks quite unprofessional (www.frontrange.edu)

Copywriting - Does it motivate the user to complete goals?

Good: TurboTax offers motivational responses (for example: 'Great Job!' or 'You're almost done!') to reduce user anxiety (www.turbotax.intuit.com)

Bad: I recently followed a link to the Pueblo Community College website and didn't find the content very digestible. It seemed very dated and difficult to navigate with lots of barriers to find information (www.pueblocc.edu)

Analysis - How can you use data and analysis to make improvments?

This is a tough one, since I don't have access to their data. That said, whenever I visit Amazon I find that their content, and the products which they advertise, are very relavent to me. I can only imagine the amount of data that they use to make this happen (www.amazon.com)

This site that I found looks like it hasn't been updated or improved in a long time. That said, they play on this theme which adds to it's charm (www.spacejam.com)