-
On a website, what is the purpose of HTML code? HTML describes the structure of pages. HTML elements tell the browser something about the information that sits between the opening and closing tags.
-
What is the difference between an element and a tag? HTML elements are made up of tags; an element comprises the opening tag and the closing tag and any content that lies between them.
-
Why do we use attributes in HTML elements? Attributes provide additional information about the contents of an element.
-
Describe the purpose of the head, title, and body HTML elements. Everything inside the body element is shown inside the main browser window - before the body element is usually the head element. The head element contains information about the page.The title element shows either in the top of the browser or the tab for that page.
-
In your browser (Chrome), how do you view the source of a website? View > Developer > View Source
-
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 main headings element.<b></b>is the bold element, it makes characters appear bold.<i></i>is the italics element, it make characters appear italic.<sup>superscript element, used to contain characters that should be superscript: eg. Suffixes of dates, mathematical concepts.<sub>subscript element, used to contain characters that should be subscript: eg. Footnotes or chemical formulas -
What are empty elements? Elements that do not have any words between an opening and closing tag. Eg. Line breaks and horizontal rules
-
What is semantic markup? Semantic markup provides extra information. Text elements that do not affect the structure of your web pages, but add extra information to the page.
-
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements
<header><nav><footer>
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their difference? Ordered lists are lists where each item in the list is numbered in chronological order, while unordered lists are lists where items are organized by bullet points. Finally, definition lists are comprised of a set of terms in conjunction with the definitions for each the listed terms.
- What is the basic structure of an element used to link to another website?
Links are created using the
<a>element. The text between the<a>tag and</a>tag is link text. Developers use the<a>element use the href attribute to define the link target. - What attribute should you include in a link to open a new tab when the link is clicked?
The target attribute is used to have a link to open a new tab. The value of this attribute is
_blank. - How do you link to a specific part of the same page?
To link to a specific part of a singular page, identify the point in the page that the link will go to using an id attribute on any existing HTML element. To link to an element using an id attribute, the
<a>element is used again. The structure of the href attribute is#followed by the id attribute of the selected element.
- What is the purpose of CSS? CSS is used 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? Cascading Style Sheet; Cascading refers to which rules take precedence.
- What is the basic structure of a CSS rule? A CSS rule contains two parts: a selector and a declaration. CSS declarations sit inside curly brackets. Declarations are split into two parts: a property and a value, separated by a colon.
- How do you link a CSS stylesheet to your HTML document?
The
<link>element is used in an HTML document to tell the browser where to find the CSS file styling the page. This link element is placed within<head>element. It uses three attributes, the href, type, and rel. - When is it useful to use external stylesheets as opposed to using internal CSS? Having an external style sheet means that the same code does not need to be repeated on every page. Therefore, once the user has downloaded the CSS stylesheet, the rest of the site will load faster. Additionally, you only need to edit a single style sheet, and linked pages will be updated.
- Describe what a color hex code is. A hex code is a six-digit code that represents the amount of red, green and blue in a color, preceded by the # sign.
- What are the three parts of an HSL color property? Hue, Saturation, and Lightness.
- In the world of typeface, what are the three main categories of fonts? What are the differences between them? Serif, San Serif, and Monospace. Serif fonts have detail on the ends of the letters. Sans-Serif fonts have straight ends to the letters. The characters in monospace fonts are fixed-width.
- When specifying font-size, what are the main three units used? Pixels, percentages, and Ems.
- If you're using an input element in a form, what attribute controls the behavior of that input? The value of the type attribute determines the behavior of the input.
- What element is used to create a dropdown list?
The
<select>element is used to create a dropdown list box. - If you're using an input element to send form data to a server, what should the type attribute be set to?
The input element should be set to
type="submit” - What element is used to group similar form items together?
The
<fieldset>element is used to group related form controls together.
-
Describe the differences between border, margin, and padding. The border separates the edge of one box from another, while margin is the outside edge of the border, and is used to create a gap between the borders of adjacent boxes. Finally, padding is the space between the border of a box and the content inside it.
-
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
padding-toppadding-rightpadding-bottompadding-leftThe values are in clockwise order: top, right, bottom, left.
-
Describe the different between block-level and inline elements. Block level elements look like they start on a new line, while inline elements flow within the text and do not start on a new line.
-
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning is a type of absolute positioning that requires the position property to have a value of fixed. It positions an element in relation to the browser window. Therefore, when a user scrolls down the page, the element stays in the same place. The
z-indexproperty allows you to control which box appears on top and maintains page hierarchy. -
What is the difference between a fixed and liquid layout? The fixed width layout will stay the same regardless of what size the browser window is, where a liquid layout will stretch or shrink to accommodate the screen.
- In an image element, why is the alt attribute important? An alt attribute is important because it provides of a description of the image content, which is used by people using screen reading software and search engines. It helps people with visual impairments understand the content of images.
- What determines if an image element is inline or block?
Where an image is placed in the code will affect whether it is inline or block. If the
<img>is followed by a block level element then the element will sit on a new line. Whereas, if the<img>element is within .a block level elements other inline elements will flow around the image. - What are the benefits of jpg or png image file formats? JPG files are best suited to photographs because they display color with the greatest clarity, whereas png images are best for displaying logos, illustrations (images with large areas of flat color), and files with an alpha channel (transparency)
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? Specifying image sizes helps pages load more smoothly. HTML and CSS code typically loads before images, therefore telling the browser how much space to leave for an image allows it to render the rest of the page without waiting for the image to download.
- What is an image sprite, and why is it useful? Images sprites are useful because the web browser only needs to request one image rather than many images, which can help the web page load faster.
-
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are numeric values.
Strings are used to represent text.
Boolean data has two values: true and false. They are used to distinguishes between two possibilities, such as “yes” or “no” and “on” or “off.”
-
What are the three logical operators that JavaScript supports? JavaScript supports three logical operators: and, or, and not.
-
What is the naming convention used for variables? Variable names can be any word that isn’t a reserved word and cannot include spaces. Digits can also be part of variable names, but the variable name cannot start with a digit. A variable name also cannot include punctuation, except for the characters
$and_. -
What is the difference between an expression and a statement? An expression is a fragment of code that produces a value, whereas a statement is the equivalent of a full sentence capable of standing on its own and producing an effect.
-
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
breakcasecatchconstReserved words are “reserved for use” in future versions of JavaScript.
-
What is control flow, and why is it useful for programming? When a program contains more than one statement, the statements are executed from top to bottom. Alternative forms of control flow are possible in JavaScript. Conditional execution is used to choose between two different routes. Conditional execution is based on a Boolean value and is written with the
ifkeyword in JavaScript. There is also loop, looping control flows allow us to go back to a point within the program and repeat it in the current program state. A statement starting with the keywordwhilecreates a loop.
- If we have a function defined as
function sayHello(){console.log("Hello!”)}, what is the difference between enteringsayHelloandsayHello()in the console?
sayHello recalls the written function as the result.
ƒ sayHello(){console.log("Hello!”)
Whereas, sayHello() executes the function and causes the console to respond with the variable value, Hello!
- What is the keyword
returnused for? A return statement determines the value the function returns. When control comes acrossreturn, the program leaves the current function and gives the returned value to the code that called the function. - What are function parameters? Parameters define the scope of a function. Locally defined variables will be newly created every time the function is called, and do not interfere with each other. This applies to variables declared with the ‘var’ keyword inside the function body. Variables declared outside of any function are called global. This distinction helps prevent unintentional interference between functions.
- What is the naming convention used for function names?
The naming convention used for function names is
function Name.
Psychology, Usability, Design, Copywriting, and Analysis.
Psychology: What is the user’s motivation to be here in the first place?
Support:
Twitter
Violate:
Reddit
Both of these websites seek to provide users with constantly updating information and news; however, I find reddit’s UX a confusing stumbling block which limits access to content. Twitter offers users a simple chronological timeline that is constantly being updated.
Usability: Are you working with the user’s assumptions, or against them?
Support:
Chase
Violate:
Imgur
Chase assumes that users want their finances to be secure. If users access their accounts from an unrecognized device or location, then Chase will require the user the authenticate their identity. While this is extra effort for the user, most users recognize how this additional step safeguards their finances. When uploading images to Imgur, many users accidentally share their images with the websites’ community. This is because Imgur’s UX isn’t informative and the website operates under the assumption that all uploaded content is intended to be shared.
Design: Do users think it looks good? Do they trust it immediately?
Support:
Apple
Violate:
Huffington Post
When web users visit Apple’s corporate webpage, they are met with a very visually appealing site which asserts confidence and caters to their target clientele and positioning as a luxury brand. Huffington Post is a cacophony different stories and sections and headlines and colors. The lack of clear hierarchy and style makes the news source feel less credible.
Copywriting: Is it clear, direct, simple, and functional?
Support:
MailChimp
Violate:
SalesForce
When I visit SalesForce, I walk away having no idea what the platform does, and this is because the copywriting is clunky and uninformative. Whereas, when I visit MailChimp, I am introduced to their platform at a high level, and their specific tools are explained greater detail below the fold. The pieces of copywriting are simple, direct, small, digestible bits of information.
Analysis: Have you collected information that can give you those types of answers?
Support:
Google
Violate:
Ask.com
So much of Google’s search engine arena is built on top of years of data collected from millions of users. The ability for Google to supply predictive search and rich results is an example of how Google has leveraged years of user data to provide users with the result they want at an even faster rate. We can contrast Google with ask.com; ask.com does not have the depth of user information to return results with the same insight and speed that Google does.