- On a website, what is the purpose of HTML code? HTML is used to build and structure web pages as they are eventually seen in the browser.
- What is the difference between an element and a tag? An element consists of everything from the start of one tag to the end of another. Tags go at the beginning and sometimes end of an element but do not include the content inbetween.
- Why do we use attributes in HTML elements? Attributes can specify more information about elements in the first tag.
- Describe the purpose of the head, title, and body HTML elements. The head tag precedes the description some of the style and title features of the web page. The title tag names the web page which is referenced in the title of the tab, default bookmark title and search engine results. Body defines the HTML document's body wherein content will be placed.
- In your browser (Chrome), how do you view the source of a website? Right clicking and selecting view source or using the shortcut command+option+i to open developer console.
- 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.<b>bolds,<i>italicizes,<hr>is a horizontal rule,<br>is a line break and<h1>is a header. - What are empty elements? Empty elements are those with just one tag such as
<br>which does not need a second tag and has no content. - What is semantic markup? Semantic markup goes beyond merely formatting the information, instead indicating something about the importance of the content. Semantic markup allows for the page to be more readable for other computers which in turn enhances its accessibility.
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements. HTML 5 allowed for semantic elements to be used directly as tags as opposed to the previously used
<div id="header">strutcture. Now, some semantic elements like<header>, <aside>, <article> or <footer>can be used instead!
Prompts: What role does empathy play in your life and how has it helped you? How does empathy help you build better software? Why is empathy important for working on a team? Describe a situation in which your ability to empathize with a colleague or teammate was helpful. When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?
Building software requires extensive forethought. It's fairly easy to be caught up in the idealistic goals of what you're building in a whirlwind of ego and optimism. An empathetic approach, in the end, gives the best opportunity to develop a product which truly satisfies your user's needs. Scientists have shown that listening empathetically makes us more receptive to information. Instead of immediately relating an interaction with a user back to our own preconceptions and ideas about a product, we instead can listen and appreciate their insight without prejudice. This inherently leads to better product design which can make the difference between a product's successful launch or failure.
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? An ordered list is a numbered list. Formatting of this list (roman numerals or alphabetically ordered lists) are implemented using CSS on an ordered list. An unordered list is made up of bullet points. A definition lists utilizes a term and a definition to provide a list with terms followed by indented definitions.
- What is the basic structure of an element used to link to another website? The element used to create links is the
<a>tag. Typical structure is<a href="www.google.com">Google</a>wherein the the URL is enclosed in quotes and is preceded by href= and the link name is noted after the element is closed. - What attribute should you include in a link to open a new tab when the link is clicked? After the link is closed with its second pair of quotes, it should be followed by a space and then
target="_blank"before the first tag is closed with a>. - How do you link to a specific part of the same page? Specific parts of the page are linked by using the
<a>tag under the structure of<a href="#Example">Directs to example heading </a>while also ensuring that the heading is appropriately tagged as<h2 id="Example">.
- What is the purpose of CSS? CSS provides the page with styling to improve the appearance, organization and usability of the information displayed.
- What does CSS stand for? What does cascading mean in this case? CSS stands for cascading style sheet. Cascading refers to both the fact that rule typically 'cascade' from the general
<body>rules to the more specific rules for each heading, paragraph and other bit of information. It also explains that a style sheet can be used on multiple pages for the website and therefore cascades from one page to another. - What is the basic structure of a CSS rule? Basic structure of a CSS rule first identifies to what it should be applied (body, h1, h2, etc.) followed by a { with rules inside structured as rule: detail and followed by a ; and finished by }. An example CSS rule would be h1 { color: red;}.
- How do you link a CSS stylesheet to your HTML document? CSS stylesheets are linked using the
<link>tag and fall under the<head>. The link must include the href= followed by the file path as well as the type which is "text/css" and the 'rel' which details the relationship between the stylesheet and HTML - usually just "stylesheet". - What is it useful to use external stylesheets as opposed to using interal CSS? External stylesheets are useful as means of providing the formatting for all or several of the pages on your website. This saves space and time as you do not have to write up the same styling rules for each page. This also makes the site load faster as the stylesheet does not have to be reloaded for every page. Finally it improves readability of the HTML as it is not cluttered with integrated CSS.
- Describe what a color hex code is. A color hex code defines a color by representing values of red green and blue using alphanumeric characters.
- What are the three parts of an HSL color property? HSL color properties are made up of hue, saturation and lightness where hue is a number betwheen 0 and 360 (where each hue is represented by a different 'degree' on the color wheel), saturation is the amount of gray in the color (on a scale of 0-100%, where 100% is full saturation) and lightness is the amount of white (where 100% is white, 50% is normal and 0% is black).
- In the world of typeface, what are the three main categories of fonts? What are the differences between them? The three main categories of fonts are serif, sans-serif and monospace. Serif fonts typically contain extra strokes at the end of letters which improve readability. Sans-serif fonts have straight ends to letters and improve design. Monospace fonts have a fixed width for every character where other fonts have different widths between characters.
- When specifiying font-size, what are the main three units used? Specifying font size is done using pixels, percentages or ems.
- If you're using an input element in a form, what attribute controls the behavior of that input? The type attribute controls much of the behavior of the input.
- What element is used to create a dropdown list? A dropdown list is created using the
<select>attribute. - If you're using an input element to send form data to a server, what should the type attribute be set to? The "submit" type is used to send form data to a server.
- What element is used to group similar form items together? The
<fieldset>element is used to group form items.
- Describe the differences between border, margin, and padding. **Border is the line around any 'box' that is formed. Margin is the space around a box which when used seperates one box from the next. Padding is the space inside a box which seperates the content inside from the border.
- For a CSS rule
padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? Top, right, bottom and left respectively. - Describe the difference between block-level and inline elements. Block-level elements can have width and height set and force a line break after each element. Inline elements cannot have width or height set and will allow other elements to sit immediately to their right or left while still respecting their margine and padding.
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning positions an element relative to the window. Other elements with non-fixed positioning then ignore the fixed element when determining where they should be placed. Z-index is important because it solves issues that fixed elemnts would otherwise have with covering up elements underneath by prioritizing which element should be shown on top.
- What is the difference between a fixed and liquid layout? Fixed layouts use pixel sizes to indicate how pages should be layed out and are static according to how they are set initially. Liquid layouts favor percentage based scaling such that the page adapts appropriately to different screen or font sizes.
- In an image element, why is the alt attribute important? The
altattribute serves as a descriptive property for the image to help better identify it for the visually impaired or robot viewer. - What determines if an image element is inline or block? Image elements are inline if they are placed inside a header like
<p>,<h1>, etc. Additionally their default state is inline. They can be specified as block using CSS or if placed after a block element.. - What are the benefits of jpg or png image file formats? JPGs are useful for photos with a lot of color in them. PNGs are good for images with large sections of the same color.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? Specifying image heights and widths through CSS is frequently more efficient as you can specify a standard height and width for a number of images on the website all with one CSS property as opposed to doing them one by one in HTML.
- What is an image sprite, and why is it useful? An image sprite is when an image is used by several different parts of an interface. This image can be manipulated so that it appears differently when hovered or clicked to provide more interactivity to the web page. Additionally it cuts down on the space used as instead of requiring multiple images it can be done with one image.
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numbers are any type of number such as an integer or float without quotes around it. Strings are text contained between quotes. Booleans are true or false values.
- What are the three logical operators that JavaScript supports? Javascript supports
&&to signify 'and'||to signify 'or' and!to signify 'not'. - What is the naming convention used for variables? Variables are typically named using a structure in which the first part of the name is lowercase and subsequent parts have the first letter capitalized like nameNameName.
- What is the difference between an expression and a statement? Expressions produce or evaluate a value while statements produce some sort of behavior which has a side effect.
- What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? Examples of reserved words are default, do, else, true, fale, typeof, etc. It's important to avoid using them for variable names in order to not accidentally create a variable definition error.
- What is control flow, and why is it useful for programming? Control flow describes the order in which the program will be executed. It is useful as it provides the structure of how the code executes and therefore makes it operate as intended if used properly.
- 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 returns the function as it is written while sayHello() returns the result of the function being run.
- What is the keyword return used for Return marks the value that a function will return.
- What are function parameters? Function paramaters are the variables placed inside the brackets of a function. A function can have 0 parameters or several, but the parameters are not given until the function is called.
- What is the naming convention used for function names? Functions should be divided and named such that the function name succinctly describes what the function is trying to do. Names that are too long or over-descriptive should be avoided as possible.
- Psychology: How much work does the user have to do to get what they want? Good: www.Twitter.com. Twitter doesn't have too many extra functions beyond what their primary purpose is, so it's not hard to put appropriate features in accessible places. Nevertheless, everything is close on hand and simple to understand. Bad: www.Yahoo.com. The wide range of services and information that yahoo provides make it more difficult for them to streamline their opening experience, but for the user that's looking for a specific service instead of just a home-page for news the website can be very difficult to work through.
- Usability: If the user doesn’t read the fine print, does it still work/make sense? Good: www.google.com There's not much to wonder when visiting google, but the very simple homepage makes it near impossible for the user to be confused. Bad: www.en.wikipedia.org A lot of wikipedia's traffic probably comes from search engines, but what does come directly to the home page is probably the homepage doesn't provide the best experience for a first time user.
- Design: Does the design lead the user’s eyes to the right places? How do you know? Good: www.news.google.com Directs viewers straight to top stories with good curated content to the right, categories above and to the left also feel properly placed for navigation. Bad: www.udemy.com Could probably do with a less cluttered layout in which visitors would have a better opportunity to get to what they're looking for before being bombarded with icons for courses.
- Copywriting: Is it clear, direct, simple, and functional? Good: www.xcel.com Provides clear text categories to guide navigation without confusing or overwhelming. Bad: www.xfinity.com Very little guiding text and overwhelming in other areas where content has clearly been prioritized over clarity.
- Analysis: Do you know why users do that, or are you interpreting their behaviour? Good: www.tdameritrade.com seems to have analyzed what features were actually being used by visitors and cut out all the fat. Bad: www.espn.com Seems to have just tried to display as many possible items on the website as opposed to appropriately managing what does and does not get shown.