-
On a website, what is the purpose of HTML code?
To describe the struture of web pages.
-
What is the difference between an element and a tag?
The difference is that tags are smaller pieces within an element. An element is made of two tags, an opening and a closing tag, with information between the two tags. The goal of an element is to give meaning to the information between the two tags to the browers.
-
Why do we use attributes in HTML elements?
Attributes are held in the opening tag and offer more details about the information within the element. An attribute has 2 parts, a name and a value. The name tells what kind of information you are providing about the element's content. The value is the actual information.
-
Describe the purpose of the head, title, and body HTML elements.
These elements dictate high level structure and information of a page. The head element contains information about the page itself but the information in here will not appear on the page. Within the head element is the title element. Any information within the title element will appear in your web page tab at the top of the page. Below the head element is the body element. All information held within the body element will appear on the actual page.
-
In your browser (Chrome), how do you view the source of a website?
View/Developer/View Source or option+command+u.
-
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>represents a main heading.<h6></h6>represents the smallest level subheading.<b></b>represents bold characters.<i></i>represents italic characters.<sup></sup>represents superscript text.<sub></sub>represents subscript text.
-
What are empty elements?
They are elements with only one tag and therefore no information between tags.
<br />creates a break.<hr />creates a break with a horizontal rule.
-
What is semantic markup?
Are elements that add extra information to the information within them but will not alter the structure of your code. This markup is most often used for screen readers and search engines to aid in their performance.
-
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
<header></header><nav></nav><article></article>
These new elements help developers describe the structure of a page more clearly to perhaps a screen reader or search engine.
Want to learn what drives me to be a web developer?
https://codepen.io/quinnef/pen/XwzxNe
-
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
An ordered list is where each item in the list is numbered. An unordered list is where every item in the list is denoted by a bullet point, but order is not important. A definition list is where each item is followed by its definiton.
-
What is the basic structure of an element used to link to another website?
<a href="website_url">website_name</a>a is the element. href is the attribute. -
What attribute should you include in a link to open a new tab when the link is clicked?
<a href="website_url" target="_blank">website_name</a>target is the attribute added. -
How do you link to a specific part of the same page?
<a href="#top"></a>id is the attribute added. id is represented by # in the link. The code would look like this<h1 id="top">Heading</h1>
-
What is the purpose of CSS?
CSS dictates the styling of code. CSS can make code look really really pretty... or really really ugly.
-
What does CSS stand for? What does cascading mean in this case?
CSS stands for cascading style sheets. Cascading in this case means that styles can fall from one style sheet to another. One html document can use multiple style sheets.
-
What is the basic structure of a CSS rule?
"CSS works by associating rules with HTML elements." A rule has 2 parts: a selector and a declaration.
p {font-family: Arial;}In this examplepis the selector.{font-family: Arial;}is the declaration. -
How do you link a CSS stylesheet to your HTML document?
By using the
<link>element in the HTML document within the<head>element. The<link>element uses 3 attributes: href, type and rel.<link href="css/styles.css" type="text/css" rel="stylesheet" />The
hrefattribute specifies the path to the CSS file. Thetypeattribute specifies the type of document being linked too. Therelattribute specifies the relationship between the HTML page and the file it is linked too. -
When is it useful to use external stylesheets as opposed to using interal CSS?
External stylesheets are better used for sites with more than one page. In this way, one can update just the external stylesheet and all edits will be automatically updated on the site. If a change needed to be made but the site used internal CSS, those edits would need to be done on each page. The content is also then kept separate from the styling keeping the site code more organized.
-
Describe what a color hex code is.
A hex code is a six-digit code that represents the amount of RGB in a color.
-
What are the three parts of an HSL color property?
The three parts are hue (expressed as an angle between 0 and 360 degrees), saturation (%) and lightness (% where 0 is white, 50 is normal, 100 is black).
background-color: hsl(0,0%,78%) -
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
The three main categories are serif, sans-serif and monospaced.
-
When specifiying font-size, what are the main three units used?
The three main units are pixels, percentages (based around 16px being the default starting point) and EMS (width of the letter 'm').
-
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. -
If you're using an input element to send form data to a server, what should the type attribute be set to?
type="submit" -
What element is used to group similar form items together?
The
<fieldset>element.
-
Describe the differences between border, margin, and padding.
Border separates the edge of one box from another. Margin sits on the outside edge of the border and it creates a gap between two borders. Padding sits on the inside edge of a box ans creates a gap between the border of the box and any content held within.
-
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
Top, Right, Bottom, Left
-
Describe the difference between block-level and inline elements.
Block-level elements start on a new line, for example
<h1>,<p>,<ul>, etc. Inline elements flow inbetween surrounding text, for example<img>,<b>,<i>, etc. -
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning takes the box out of normal flow and "positions the element in relation to the browser window" and "no longer affects the position of other elements on the page." When using fixed positioning, boxes can overlap, so the z-index controls which appears on top.
-
What is the difference between a fixed and liquid layout?
Fixed width layouts do not change as the window size increases or decreases where as with liquid layouts adapt as the window size increases or decreases.
-
In an image element, why is the alt attribute important?
The alt attribute provides a text description of the image if the image can not be seen. This way the viewer still has context as to what context the missing image provides. This attribute can also be helpful for readers that help those who can not see understand what is happening on the page.
-
What determines if an image element is inline or block?
If an image element is outside of a block element, the block element will always start on a new line. If an image is placed within a block element the image element becomes inline and other inline elements will not start on a new line. In Chapter 16 it also states that all images are by default inline. To make an image a block element using a display property with a value of block.
-
What are the benefits of jpg or png image file formats?
Images will look sharper and load faster in these two formats. JPGs are good for images that have many different colors, like sunsets and portraits. PNGs are good for images that have large areas filled with exactly the same color, like logos or diagrams.
-
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
By specifying in CSS it "keeps rules that affect the presentation of your page in the CSS and out of the HTML markup" that most so deal with the content of the page.
-
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". A good example for this is a button and its normal, hover, and click states. These three different images used to show the buttons state only need to be uploaded one at a time as needed in the button image space depending on the buttons current state. Web pages can load faster because the web page only has to request one image at a time instead of all three at once.
-
How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
var quantity;is how a variable is declared, by creating a variable and giving it a name. An equals sign is called an 'assignment operator' and it says that we "are going to assign a value to the variable." -
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
The numbers data type handles all numbers, including whole, negative and decimal. The string data type handles all letters and other characters and the data is always surrounded by a pair of quotes. The boolean data type can either be '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?
- Name must begin with a letter, $, or _, NOT with a number
- Name can contain letters, numbers, $, or _, NOT able to use a - or .
- Can NOT use keywords or reserved words
- Use case sensitivity
- Name should describe the kind of information being stored
- Use camelCase
-
How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
Arrays are useful when dealing with multiple related values because "you do not need to specify how many values it will hold". This prevents you from having to create enough variables for all the values and perhaps not even need to use all of them. To access and change a value in an array you specify the index number of that value and assigning it a new value.
-
What is the difference between an expression and a statement?
An expression evaluates where as a statement instructs.
-
What are three types of operators and how are they used?
- An assignment operator uses = to assign a value to a variable
- An arithmetic operator uses numbers and *, /, +, -, ++, --, % to perform basic math
- A string operator uses + and joins the strings on either side
-
If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
Simply typing 'sayHello' returns the function but does not execute the function. To execute the function, we must call the whole name of the function, 'sayHello()'.
-
What is the difference between function parameters and arguments?
Parameters are words that act like variables within the function. The values or variables that hold real numbers used to calculate are arguments.
-
What is the keyword return used for?
The keyword 'return' is used "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 better because they take up less memory than global variables and remove the risk of naming conflicts because local variables are contained only within the function in which they are used. Regarding memory, local varialbes are only stored in memory during the period of time that a function is being executed. Different functions can then name variables the same thing, but since those variables are isolated separately in each function, no issues will occur. Global variables apply to all functions and are stored in memory to be used whenever a webpage is loaded into the browser. A good time to use a global variable would be for an end result, for example, if local variables are helping to figure out the area of a wall, the global variable could be the final calculation to use those other functions to determine the final wall area.
-
Psychology
Question: How much work does the user have to do to get what they want?
Supports: https://www.spinultimate.com/pages/team-gear
Violates: https://www.fiveultimate.com/team
Explanation: Both of these companies sell gear for ultimate frisbee teams. If my goal is to go to these sites and immediately order gear for my team, the 'supports' site makes that very easy by offering 'Place Your Order' in the Team Gear menu drop down and an 'Order Now' button at the very top of the Team Gear page. Even on the home page there is a 'Place Your Order' option just below the fold. In the 'violates' example, I see no way to order in the Team Gear drop down or anywhere above the fold on the Team Gear page. There is a 'Best Way To Order Team Gear' section just below the fold, but this make the process seem cumbersome and give me the impression that I have to read all that text, download a file, and perhaps even contact someone to help me place an order. The 'supports' site makes the process seem so simple, just one click.
-
Usability
Question: Are you being clear and direct, or is this a little too clever?
Supports: https://denver.craigslist.org/
Violates: https://www.redbull.com/int-en/tv/tv
Explanation: One website that is notoriously NOT clever is Craigslist. A site that is so simple, basic, yet easy to use and understand. Red Bull TV, both on my laptop and Fire Stick, plays a video instantly when you go to the site. That video continues to play in the background as you search around. In my opinion, it is a little too clever and dynamic and therefore distracts me as I am trying to search for the media I actually want to watch.
-
Design
Question: Do users think it looks good? Do they trust it immediately?
Supports: http://www.theevergreensalon.com/
Violates: https://essencehairandbodyretreat.com/
Explanation: I encountered this question when I was searching for a new studio to get my hair cut in the area I recently moved to. Most studio websites in my surrounding area are not great. That immediately led me to distrust many of these studios. I realize hair is different than web design, but a hair studio is there to style your hair with todays trends and we trust them to make us look good. My fear that arose was if they do not care up the style and usability of their website, how will they care about the styling of my hair? Neither of the website links above are amazing, but the 'supports' one certainly made me feel calm and more confident than the 'violates' one.
-
Copywriting
Question: Is it clear, direct, simple, and functional?
Supports: https://www.twinsix.com/
Violates: http://evoulve.com/
Explanation: The 'violates' example is almost too simple, with no text besides the company name on the homescreen. The name and image used are pretty ambiguous and I do not know what the company does. If I click on the menu bar on the left, I am taken to another screen with an explanation of the company. Great. However, my first time on this page, I did not notice the circles on the right side that when hovered over show more information the site offers. Hiding the copy in this way was unclear and hard to find. The 'supports' example has all copy required to understand the site on the left side bar. Though the logo does not explain the company in full, the 3 menu items provide context as to what the site provides: apparel and bikes. Lower down the 'About Us' menu item is visble and therefore can easily provide copy to help your understanding of the site.
-
Analysis
Question: Are you looking for bad results too?
Supports: https://www.southwest.com/contact-us/contact-us.html?clk=GFOOTER-CUSTOMER-CONTACT-US
Violates: https://www.usaultimate.org/
Explanation: I recently had a bad experience with Southwest Airlines. I went on their site to contact them about this issue. In their Contact Us/Email Us pop up, they offer 3 options: Compliment, Comment or Question, and Complaint. While I was not happy that I had to make a complaint, it was oddly nice to see this as an option. Almost as if Southwest knows and accepts that complaints/bad results will occur and are ready to address them. This also let me know I was in the proper place to state my complaint. I also received a follow up email asking how my flight was and to answer and optional survey about my experience. Hopefully Southwest will use this survey information to better the related systems within the company. Many websites do not send out follow up emails or surveys. I know lots of data can by received from website analytics, but that is just one element to analyize. Are companies missing opportunities to analyze and improve by not reaching out to the actual consumer? Or most sites now do have pop ups or easy ways to sign up for email newletters, which again can help a company connect with and understand its users on another level. This 'violates' site does not offer an option to sign up for an email newsletter either to general visitors. I do believe once you become a member, they collect your email and send newsletters out to that list. But perhaps data from non members would also be helpful?