Codepen Link

https://codepen.io/keilahoover/pen/KyMOOj

Ch. 1 & 2 HTML & CSS: design and build websites Question & Answers

1. On a website, what is the purpose of HTML code? Describes the structure and information of each page on a website.

2. What is the difference between an element and a tag? An element comprises the opening and closing tag and any content that lies between them. A tag is like a container for the information in an element.

3. Why do we use attributes in HTML elements? To provide more information about the contents of an element, using an attribute name and value. Name indicates what kind of added information is suppled, and the value is the information or setting for the attribute.

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

• The head element contains information about the page.
• The title element creates a title for the page, either found above the page's URL or on the tab for that page.
• The body element contains and shows the main browser window.

5. In your browser (Chrome), how do you view the source of a website? Right-click on the page and click "View Page Source." Or click View>Developer>View Source.

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

• h1 is one of six heading elements, and is used for main headings
• sub is a subscript element, and is used to contain characters that should be subscript. (such as footnotes)
• em is an emphasis element, and is used to italicize.
• strong is a strong element, and it is used to bold or show great importance
• s is a strikethrough element, and indicates something that is no longer accurate or relevant and strikes a line through the center

7. What are empty elements? Elements that only have one tag. Before the closing angled bracket of an empty element there will often be a space and forward slash character. For example, the br element.

8. What is semantic markup? Elements which proved extra information. Such as an emphasis on a word.

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

• article
• nav
• header

Ch. 3 & 4 HTML & CSS: design and build websites* Questions and Answers

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

• Ordered: each item in the list is numbered
• Unordered: list that begin with bullet points
• Definition: are made up of a set of terms along with the definitions of those terms

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

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

4. How do you link to a specific part of the same page? Add an id attribute to the sections of the page you want to link to. Set up a similar element as linking to another website except the value of the href attribute starts with #, followed by the value of the id attribute of the element you want to link to. It will look something like this Top

Ch. 10, 11, & 12 HTML & CSS: design and build websites questions and answers

1. What is the purpose of 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 Sheet. Cascading means rules can take precedence over other rules if set up properly. You must go by the following rules:

• Last Rule: if any selectors/rule are identical that apply to the same element, the latter will take precedence.
• Specificity: if one selector/rule is more specific than the other, the more specific rule will take precedence over the general ones (i.e. h1#intro)

3. What is the basic structure of a CSS rule? selector { declaration; } (i.e. p { color: black; }

4. How do you link a CSS stylesheet to your HTML document? Using the link element in your HTML document to tell the browser where to find the CSS file. Then use the type attribute to specify the type of document being linked to, and the rel attribute to specify the relationship between HTML page and the file it's linked to. (i.e. ,

5. Why is it useful to use external stylesheets as opposed to using internal CSS?

• It allows all pages to use the same styles rules
• Keeps the content separate from how the page looks
• You can change styles by simply altering one file

6. Describe what a color hex code is. six-digit codes that represent the amount of red, blue, and green in a color preceded by # (i.e. #EE3E80)

7. What are the three parts of an HSL color property? Hue, Saturation, Lightness

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

• Serif: extra details on the ends of the main strokes of letters
• Sans-serif: straight ends to letters
• Monospace: every letter is the same width

9. When specifying font-size, what are the main three units used? Pixels, percentages, EMS

Ch. 7 HTML & CSS: design and build websites questions and answers

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

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

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

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

Ch. 13 & 15 HTML & CSS: design and build websites questions and answers

1. Describe the differences between border, margin, and padding.

• Border: every box has a border, even if not visible or specified, and the border separates the edge of one box from another
• Margin: sit outside the edge of the border, and you can set the width of a margin to create a gap between the border of two adjacent boxes
• Padding: is the space between the border of a box and any content contained within it, can increase the readability of it's contents

2. 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 10px = left

3. Describe the difference between block-level and inline elements.

• Block-level: start on a new line
• Inline: flow in between surround text

4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Positions the element in relation to the browser window, z-index should be used so boxes do not overlap.

5. What is the difference between a fixed and liquid layout?

• Fixed Layout: do not change size as the user changes the size of their browser window
• Liquid Layout: stretch and contract as the user changes the size of their browser window

Ch. 5 HTML & CSS: design and build websites questions and answers

1. In an image element, why is the alt attribute important? The alt attribute is important in an image element so visually impaired individuals and search engines can read the image's description.

2. What determines if an image element is inline or block? A block image element always appears on a new line where as an inline image element sit within a block level element and do no start on a new line.

3. What are the benefits of jpg or png image file formats? Using jpg or png image file formats create sharper images and a quicker load time.

Ch. 16 HTML & CSS: design and build websites questions and answers

1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? It is beneficial to use CSS instead of HTML when specifying the width and height of an image so that consistently sized images can be edited in one place instead of several places in HTML.

2. What is an image sprite, and why is it useful? An image sprite is when a single image is used for several different parts of an interface, and it is useful so the web browser only needs to request one image instead of many image. Therefore, the web page will load faster.

Ch. 1 & 2 Eloquent Javascript questions and answers

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

• Numbers: Javascript uses a fixed numbers to store single number value, and the main thing to do with numbers is arithmetic using operators. (+, -, *, /, %) putting two or more operators together will produce a new value.
• String: represents text using quotation marks (single or double)
• Boolean Values: distinguishes between two possibilities -- true or false

2. What are the three logical operators that JavaScript supports? and, or, and not (&&, ||,!)

3. What is the naming convention used for variables? var or let

4. What is the difference between an expression and a statement?

• Expression is a fragment of code that produces value; every value is literally an expression
  • an expression can be content to just produce a value
• Statement: is if an expression corresponds to a sentence fragment a statement corresponds to a full sentence in a human language; stands on its own

5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? else, static, throw, true, and var are a few Javascript reserved words, and they should be not be used at variable names to prevent from errors occurring since reserved words exist always in the Javascript environment.

6. What is control flow, and why is it useful for programming? A control flow is when a program contains more than one statement, these statements are executed from top to bottom. It is useful in programming so functions are executed in the correct order for a website and user to interact well especially once more complicated executions are implemented such as loops and conditionals.

Ch. 3 Eloquent Javascript question and answers

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? Methods with empty parameter (sayHello()) lists are, by convention, evaluated for their side-effects, while methods without parameters (sayHello) are assumed to be side-effect free.

2. What is the keyword return used for? The return keyword determines the value the function returns

3. What are function parameters? Function parameters behave similarly to variables, but initial values are given by the caller of the function, not the code in the function itself. Parameters are the names listed in the function.

4. What is the naming convention used for function names? The naming convention use for function names is camelCase; the first word is lowercase and all following words are capitalized. (i.e. iLovePizza)

UI/UX

Psychology *1. How does this make them feel?

• Positive UX results: http://www.defringe.com/ Immediately, a user will feel at ease with the minimal, clean design and layout of Defringe's website. Users have creative free-range to look through mood boards and artistic inspiration without feeling overwhelmed and lost. The intuitive UX helps the user find more than they expected with ease.

• Negative UX results: https://www.deviantart.com/ As soon as you hit the website, the user sees a large amount of art that has nothing to do with the other. The design of the website is outdated creating a less pleasant experience for the user. Finding true inspiration is difficult since the UX does not help guide the user in the right directions.

Usability *2. Are you being clear and direct, or is this a little too clever?

• Positive UX results: http://lingerdenver.com/ As a user, you can tell right away that this is a restaurant's website, and to the point about details and user interaction. The website guides the user through most priority to least. That way the user knows what actions to take before arriving at Linger, and then what to expect once they arrive.

• Negative UX results: http://www.busboysandpoets.com/ A prime example of being a little too clever. The idea is there, but the user experience is all over the place and not structured. The website could still have the personality it does, and clean it up a bit with proper UI/UX design.

Design *3. Do clickable things look different than non-clickable things?

• Positive UX results: https://us.polaroidoriginals.com/ All throughout Polaroid's website, clickable objects react when the user hovers over it. For example, the navigation bar titles fade-out when you hover over one title. Also when the user hovers over "Gift" in the nav bar, a gift icon replace the word "Gift."

• Negative UX results: https://www.soundstrue.com/store/ The navigation bar is hard to find and does not react to a user when it hovers of a title. Very little clickable things change when a user interacts with it.

Copywriting *4. Does it sound confident and tell the user what to do?

• Positive UX results: https://www.toyota.com/ The user knows right away, whether they came with a goal or not, how to navigate Toyota's website. It directs the user to "Select Vehicle" or "Build & Price." A few simple words so the user then feels confident they can achieve the goals they were looking for by visiting the site.

• Negative UX results: https://himclothing.com/ HIM Clothing's website overwhelms the user with options instead guiding them with confidence to where they know the user would want to explore on the site.

Analysis *5. Are you using data to prove that you are right, or to learn the truth?

• Positive UX results: https://www.modcloth.com/ From a quick glance and browse, a user can tell whether they will connect with Modcloth's website or not. In this way, Modcloth is utilizing user data to better understand how to market the correct demographic market.

• Negative UX results: https://www.luckysmarket.com/ The user immediately gets hit with a video that won't stop playing unless you clicked through, like they want you to, or let it play out. This screams a 'needy' and not confident website/business. It's a forced approach to bandaid the issues on the site instead of doing the correct analysis to understand what the customer/user wants.