-
On a website, what is the purpose of HTML code?
HTML describes the structure and worded content of pages on the web. It provides hierarchy to information on a page that makes it easier to understand. Similar to a newspaper, HTML code structures information in a way that assigns importance to content through headings and subeheadings.
-
What is the difference between an element and a tag?
An HTML element tells the browser something about the information that sits between its opening and closing
tags. It is made up of characters that live inside angled brackets, or tags. These elements are used to
describe the structure of pages. Tags, on the other hand, are components of elements that act like containters
for that element. There is an opening and closing tag in each element, which tells the browser something about
information between them. -
Why do we use attribute in HTML elements?
Attributes provide additional information about the contents of an element. They are on the opening tag of an
element and are made up of two parts: a name and a value, seperated by an equal sign. The attribute name indicates what kind of extra information you are supplying about the element's contents. The value is the information or setting for the attribute. -
Describe the purpose of the head, title, and body HTML elements.
-
The body element denotes that everything inside of this element is shown inside the main browser window.
-
The head element is generally placed before the body element and contains information about the page, rather than the information that is shown withing the main part of the browser window.
-
The contents of the title element are either shown in the top of the browser, above where you usually type in the url of the page you want to visit, or on the tab for that page.
-
In your browser (Chrome), how do you view the source of a website?
You can go to the view option on the main toolbar in Chome and navigate to Developer and View Source. Alternatively, you can right click anywhere in the browser window and navigate to Inspect.
-
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. -
<h1></h1>is the heading element. It is used to signify a main heading. -
<h2></h2>is another heading element. It is used for subheadings and appears smaller and less prominent than an h1 heading -
<b></<b>is used to make the enveloped contents bold. -
<i></i>is used to display the enveloped contents in italics. -
<sup></sup>is used contain characters that should be contained in superscript such as the suffixes for dates or mathematical concepts like exponents. -
What are empty elements?
Empty elements do not have any words between the openening and closing tags. They are written differently. They usually have only one tag. Before the closing angled bracket of an empty element there will often be space and a forward slash character. Example:
<br />,<hr />for line break and horizontal rule respectively. -
What is semantic markup?
Semantic markup is text elements that are not intenderd to affect the structure of your web pages, but they do add extra information to pages. Example:
<strong>to indicate strong importance. -
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements
-
The
<nav>element is used to contain the major navigational blocks on the site such as primary site navigation. -
The
<article>element acts as a container for any section of the page that could stand alone and potentially be syndicated. -
The
<aside>element has two purposes. When used inside an article, it should contain information that is related to the article but not essential for its overall meaning. When used outside of an article, it acts as a container for content that is related to the entire page.
Empathy, or the ability to understand and share the feelings of another, is a critical skill for becoming an adept software designer and a better person at large. A good software designer should never forget he or she is making procucts for people. A better understanding of these individuals and there feelings or dispositions will unyieldingly lead to products and services that serve them better. End users aside, an empathetic mindset facilitates a better team dynamic by allowing one to see past personal predilections and find common ground with team members, creating a more harmonious and productive work environment.
Furthermore, an empathetic mindset has enriched my personal and professional life. Whether making a sales call or merely conversing with a significant other, possessing a recptive and empathetic inclination leads to deeper, more fulfilling and fruitful relationships.
Lastly, given the commonly held notion that 'technology will save the world,' having designers that are sensetive to the needs of others could go a long way towards making that a reality.
-
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered lists are lists where each item in the list is numbered. These lists imply a sequential order to the information presented.
- Unordered lists are lists that begin with a bullet point, rather than characters that indicate order.
- Definition lists are made up of a set of terms along with the definitions for each of those terms.
-
What is the basic structure of an element used to link to another website?
Links are created using the
<a>element. Users can click on anything in between the opening and closing tag. The page specified by the link uses an href attribute.The basic structure is as follows:
<a href="http://www.example.com">Example</a>In this element, the URL is the address of the page you wish to link to. The content between the tags is what shows up in the browser.
-
What attribute should you include in a link to open a new tab when the link is clicked?
The following attribute wil open a link in a new tab or window, depending on browser and configuration:
<a href="http://www.example.com" target="_blank">target="_blank"is used in the opening tag to perform this action. -
How do you link to a specific part of the same page?
Before you can link to a specific part of the same page, you need to identify the points in the page that the link will go to. You do this with an id attribute. The link is then made that references the id attribute. Example:
<h1 id="top"> Example Main Heading</h1><a href="#top">Top</a>The link at the bottom will now bring you back to the referenced h1 element.
-
What is the purpose of CSS?
CSS allows you to create rules that specify how the content of an element should appear.
-
What does CSS stand for? What does cascading mean in this case?
CSS stands for cascasing style sheets. Cascading refers to the way CSS behaves if two or more rules that apply to the same element and which rules take precedence. If the two selectors are idnetical, the latter of the two will take precednece. If one selector is more specific than th others, the more specific rule will take precedence over the more general rules. You can additionally add
!importantafter any property value to indicate that it should be considered more important than other rules. -
What is the basic structure of a CSS rule?
CSS associates style rules with HTML elements. There is a selector that references HTML elements and a declaration that details styling preferences. Example:
p {font-family: Arial;} -
How do you link a CSS stylesheet to your HTML document?
To link an external style sheet you place the following code within the HTML
<head>element:<link href="style.css" type="text/css" rel="stylesheet" /> -
What is it useful to use external stylesheets as opposed to using interal CSS?
- It allows all the pages in a site to use the same style rules, rather than repeating them internally on each page.
- It keeps the content of the page seperate from how the page looks.
- It means you can change all the styles used accross all the pages by altering just one file, rather than each individual page internally.
-
Describe what a color hex code is.
Hex values represent values for red, green and blue in hexidecimal code. The hexidecimal value can be abbreviated if the values are the same Example:
#ffffff or #fff
-
What are the three parts of an HSL color property?
- Hue is the colloquial idea of color.
- Saturation is the amount of gray in a color.
- Lightnessis the amount of white (lightness) or black (darkness) in a color.
-
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif fonts have extra details on the ends of the main strokes of the letters. These details are known as serifs.
- Sans-Serif fonts have strait ends to the letters, and therefore, have a much cleaner design.
- Monospac font's letters are the same width, or fixed-width.
-
When specifiying font-size, what are the main three units used?
- Pixels (px) are the best way to ensure that type appears the size you intended. They are relative to the resolution of the screen.
- Percentages (%) is a relative meausurement to the browser's default font-size (16px).
- EMS (em) allow you to change the size of the text relative to the text in the parent element.
-
If you're using an input element in a form, what attribute controls the behavior of that input?
The
<input>element with the type attribute tells you what the button does or how it is engaged by the user. Examples are text, password, radio, file, ect. -
What element is used to create a dropdown list?
The <select> element is used. It contains two or more <option> elements.
-
If you're using an input element to send form data to a server, what should the type attribute be set to?
type="submit"is used to send a form to a server. It can have a name attribute and a value. The value is what the corrosponding button will present in a browser. -
What element is used to group similar form items together?
The
<fieldset>element is used to group similar form items together. The<legend>element often comes immediately after the fieldset element which can identify the purpose of the form controls.
-
Describe the differences between border, margin, and padding.
Every box in an HTML element has three available properties that can be adjusted to control its apperance. Every box has a border. It is present even when not visible or specified to be zero pixels wide. The border separates the edge of one box from another. Margins sit outside the edge of the border. You can set a margin to create a gap between the borders of two adjacent boxes. Padding is the space between the border of any box and any content contained within it. Adding padding can increase the readability of its content.
-
For a CSS rule
padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?Startinng at 1px, the sides are top, right, bottom, left.
-
Descirbe the different between block-level and inline elements.
Block level elements always appear on a new line. Inline elements sit within a block level element and do not start on a new line. These properties can be changed using CSS and the display property.
-
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 positions the element in realtion to the browser window, as opposed to the containing element. Elements with fixed positions do not affect the position of the surrounding elements and they do not move when the user scrolls up and down the page.
When you move any element from normal flow, the boxes can overlap. The z-index property allows you to control which box appears on top. It is represented by a numerical value. The higher values sit on top of the lower values. An element with the z-index property of 10 will appear on top of one with 5.
-
What is the difference between a fixed and liquid layout?
A fixed width layout design does 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 the browser window. They tend to use percentages.
-
In an image element, why is the alt attribute important?
The alt text provides a text description of the image if you cannot see it. It is important to make this information available and clearly because it is often used by screen reader software, used by people with visual impairments. It is also used by search engines.
-
What determines if an image element is inline or block?
If the image is followed by a block level element, the block level element will sit on a new line after the image. If image is inside a block level element, any text or inline elements will flow around the image. Additionally, block and inline properties can be controlled using the
displayproperty in CSS. -
What are the benefits of jpg or png image file formats?
-
Jpeg iamges should be used with images with many colors present. Photographs, even in momochrome have many different shades of subtly different colors in them.
-
Png and gif images should be used when a picture has an area that is filled largely with the same color, known as flat colors. Such images would be logos or icons.
-
-
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
Most of the time, images have the same sizes accross a web site. This allows you to manage them with a CSS class and attributes. It tends to provide an attractive uniformity accross the site. It can also save time by only typing the measurements of an image once.
-
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 know as a sprite. The advantage to using sprites is the web browser only needs to request one image rather than many images, which can make the page load faster.
-
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
1.Numbers are numeric values. 2.Strings are used to represent text and are written by enclosing their contents with quotes. 3.Booleans have the value of true or false and distinguish between two possibilities such as yes or no, on and off.
-
What are the three logical operators that JavaScript supports?
Javascript supports three logical operators: and, or, not. The && operator represents the logical 'and'. It is a binary operator and its result is true only if both the values given are true. The || operator denotes the logical 'or.' It produces a true value if either values given to it are true. Not is written as !. It is a unary operator that flips the value given to it. !True becomes false and !false becomes true.
- What is the naming convention used for variables?
Variables can be any word that isn't reserved as a keyword. They may not include spaces. Digits can be included, but the variable cannot start with a digit. It cannot contain punctuation except $ and _ . Most programmers start the variable uncapitolized and capitolize each new word after the first, such as var = namesOfThings.
-
What is the difference between an expression and a statement?
A fragment of code that produces a value is an expression. Every value that is written literally is an expression. An expressio between parentheses is an expression, as is a binary operator applie to two expressions or a unary operator applied to one. It can be conmpared to a sentance fragment in language.
Statements corrospond to full sentances in language. The simplest kind of statement is an expression with a semicolon after it. Pragrams are lists of statements.
-
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
Keywords may not be used for variable names becuase they have special meaning or are reserved for future use.
Some keywords are: break, case, catch, continue, debugger, default, delete, do, else, false ect.
-
What is control flow, and why is it useful for programming?
Control flow is the order a program executes. When program contains more than one statent, they are executed from top to bottom. Default control flow can be altered by introducing conditional execution, or using loops.
-
If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
Entering sayHello simply displays the contents of the variable; in this case, the function value. Entering
sayHello()actually calls the function and executes it, giving the result Hello! -
What is the keyword return used for?
A return statement determines the value a function returns. When control comes accross such a statement, it immediatley jumps out of the current function and gives the returned value to the code that called the function. A return keyword without an expression after it will cause the function to return
undefined. -
What are function parameters?
The parameters of 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. They are the names in the function definition.
functionName(perameter1, perameter2, perameter3) { code to be executed; } -
What is the naming convention used for function names?
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) The code to be executed, by the function, is placed inside curly brackets: {}
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.
-
Psychology: How does this make them feel?
In my opinion, Wired does a great job welcoming the user and presenting their content. The site is slick, yet familiar. I immediately know where to go and feel comfortable cruising around the site.
I had some trouble recalling any bad UX I can rememeber. A quora search yielded this site. It's interface looks dated. I feel bored with the site immediately. It is a technical site, so it would make sense that I would have no idea what they are talking about, but the site does little to make the curious lay person comfortable.
-
Usability: Could you get the job done with less input from the user?
The following bugs me. I don't know if there is a viable workaround from a business perspective or if I am simply having unrealistic expectations for free, quality content on the web. It has to do with ad-blockers and needing to disable them before viewing content. When confronted with this choice, I usually go somewhere else if possible. Sometimes I view the source if it's the only place to read an article. Disabling ad-blocker is the last thing I will do if I must see an article with ads. More often than not, I think "I don't need to read this" and move on.
The BBC lets me look at all their content without disabling ad-blocker. I like this. I want to read their stuff.
I occasionally find things I want to read on Forbes. I usually decide to read something else when the 'please whitelist' prompt comes up.
-
Design: Do users think it looks good? Do they trust it immediately?
This is a site for a well known travel blogger. With so many amature travel blogs with bogus information, design is paramount when deciding if a particulat blog is worth the time at glance. Matt's design is clean. He immediately shows you his third party endorsements from institutions you know and trust (CNN, Nat Geo, ect.).
I will use this site again to demonstrate bad design. It looks like it was created in the early nineties. Moving on!
-
Copywiriting: Does it reduce anxiety?
This is a site to buy excercise supplements that I use. Buying supplements online can be dicey due to the lack of regulations and conflicting opinions. This site makes you feel at ease by organizing their products by 'your goals' and 'your sport.' They also prevelantly link to third party articles and advice for those with more questions.
Similarly, GNC sells many of the same types of products. Their site also allows for shopping by goals but it is further down the page. Their main navigation has a slew of drop down menus with catagories and a lot more noise. It is a bit more cluttered and provoking on intitial inspection.
Analysis: Are you using data to prove that you are right, or to learn the truth?
Amazon is a big deal for a reason. They tailored their site to reflect user feedback from the beggining. By focusing on the user, the site just works for most people.
Comcast and other telecomm companies are notorious for disregarding user feedback. Their Xfinity site is pretty good, aside from some bugs and slowdowns in their on demand interface. But generally, everyone I know hates this company and has no other choice. This industry is begging to get disrupted. Maybe it never will. Or maybe Google Fiber will become viable some day. Either way, I would take the first viable option that is marginally better or even marginally worse for a company that treats their users like human beings...