1. On a website, what is the purpose of HTML code?
HTML provides structure to a webpage
2. What is the difference between an element and a tag?
Element is comprised of the opening and closing tags and the content between them. Tags tell you about the information between them. However, the terms are often used interchangeably.
3. Why do we use attributes in HTML elements?
Attributes allow you to include extra information in an element, and tell you what kind of extra information is being supplied
4. Describe the purpose of the head, title, and body HTML elements.
Head: provides information about the page, but is not displayed as part of the page itself
Body: this tells the code that anything within this element is to be displayed on the page
Title: gives a title to the page that either shows in the tab display or the top of the web page, depending on the browser you're using.
5. In your browser (Chrome), how do you view the source of a website?
View --> Developer --> View Source (or option + command + u)
6. List five different HTML elements and what they are used for. For example,
is a paragraph element, and it is used to represent a paragraph of text.<b></b> makes text bold
<i></i> italicizes
<em></em> creates emphasis; this looks like italics but is not the same thing
<h1></h1> creates the largest heading; goes 1-6 with 6 being the smallest
<blockquote></blockquote> is used for longer quotes, typically browsers will indent the quote within this element
7. What are empty elements?
An empty element does not have words between the opening and closing tags, and typically only has an opening tag. Examples would be <br /> and <hr />. They often have a space or a forward slash before the closing bracket.
8. What is semantic markup?
These are text elements that do not affect the structure of a web page but do provide additional information, such as the <em> tag. Search engines and screen readers, in particular, can use this extra information.
9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
<abbr> is not new, but is used for both abbreviations and acronyms, rather than using a separate acronym tag. In addition, there is now a <header> element rather than <div id="header">, <nav> instead of <div id = "nav">, and <article> instead if <div class = "article">
CodePen link: https://codepen.io/slkarsh/full/GaPBXr
1.There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
An ordered list is numbered, whereas an unordered list is not (bullet points instead). A definition list is for words that have accompanying definitions listed.
2. What is the basic structure of an element used to link to another website?
<a href = "insert url"> text </a>
3. What attribute should you include in a link to open a new tab when the link is clicked?
target="_blank" within the <a> element
4. How do you link to a specific part of the same page?
With a relative url. Depending on where the file is stored, it could look something like <a href = "index.html"> or <a href = "music/notes.html">
1.What is the purpose of CSS?
CSS allows you to specify how the content of an element should appear
2. What does CSS stand for? What does cascading mean in this case?
CSS stands for Cascading Style Sheets. With CSS you can apply more than one rule to an element. Cascading is the order in which the selectors take precendence in an element.
3. What is the basic structure of a CSS rule?
A CSS rule most basically is comprised of a selector and a declaration. However, within a declaration there can be properties and values. The selector indicates which element the rule is for, and the declaration indicates how the selected element should be styled. The property indicates what aspect of an element you are styling (font, color, background color) and the value specifies the settings for the property (Times New Roman, yellow, blue, respectively).
4.How do you link a CSS stylesheet to your HTML document?
In the element of an HTML document, you can use the element to inform the browser where the CSS file lives. An example code would be: <link href = "css/style.css" type = "text/css" rel = "stylesheet" />
Within this code, href indicates the path to the CSS file, the type attribute specifies the document type (text/css) and the rel attribute informs the relationship between the HTML page and the linked file.
5.When is it useful to use external stylesheets as opposed to using interal CSS?
Whenever a website has more than one page, it makes the most sense to use external CSS rather than internal CSS.
6.Describe what a color hex code is.
A hex code represents values for red, green, and blue in hexadecimal code. They look like (for example) #66cdaa
7.What are the three parts of an HSL color property?
HSL is comprised of hue, saturation, and lightness. Hue is expressed as an angle (around a circle, between 0 and 360 degrees). Saturation and lightness are expressed in percentages. For lightness, 0% is white, 50% is normal, and 100% is black.
8.In the world of typeface, what are the three main categories of fonts? What are the differences between them?
Serif: has extra details on the main strokes of the letters (example being Times New Roman)
Sans-serif: have straight ends to the letters (example Arial)
Monospace: every letter has the same width (Courier)
9.When specifiying font-size, what are the main three units used?
Pixels, percentages, and ems. Pixels are standard, percentages mean a percentage of the default sixe of 16px (75% = 12px), and for ems, an em is equivalent to the width of a letter m.
1.If you're using an input element in a form, what attribute controls the behavior of that input?
The "type" attribute
2.What element is used to create a dropdown list?
The <select> element
3.If you're using an input element to send form data to a server, what should the type attribute be set to?
It should be set to "submit"
4.What element is used to group similar form items together?
The <fieldset> element, which can be captioned with the <legend> element.2332 b
1.Describe the differences between border, margin, and padding.
Border: all boxes have one, regardless of whether or not it is visible. Border separates the edges of one box from another Margin: lies outside the edge of the border Padding: space between the border of a box and the box's content
2.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 (clockwise order)
3.Describe the difference between block-level and inline elements.
inline can make a block-level element act as an inline element. An inline element does not start a new line with each item. A block-level element starts a new line.
4.What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning positions the element in relation to the browser window rather than the containing element. When an element is in a fixed position, it does not affect the positioning of surrounding elements. Since a fixed position element has been removed from the normal flow, boxes can overlap. The z-index property allows the developer to control which box appears on the top.
5.What is the difference between a fixed and liquid layout?
A fixed layout does not change size as the user increases or decreases the size of their browser window. Measurement is in pixels.
A liquid layout stretches and contracts with the increase or decrease in the size of a user's browser window. These tend to use percentages.
1.In an image element, why is the alt attribute important?
This is text that describes the image if you can't see it (image doesn't load, need to use a screen reader, etc)
2.What determines if an image element is inline or block?
If the <img> element is followed by a block level element, then the image will be block and the block level element will follow in a new line. If the <img> element is inside of a block level element, then it will appear inline and any other inline elements will flow around it.
3.What are the benefits of jpg or png image file formats?
A jpg file format should be used for images with multiple colors. A png file format should be used for images with either few colors or large areas of the same color. jpg is particularly good to use for photos, whereas png is good for diagrams and logos. Using the correct file format insures your page loads as quickly as possible.
1.What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
This is particularly useful when the sizes of the images you are using is consistent across your website. You can give the sizes names (like small, medium, and large) then in the HTML code where the <img> elements occur, you can use the names (small, medium, large) as class attribute values rather than specifying width and height attributes in the HTML code. This allows you not to have to write out the same code for each image and instead have the relevant information in CSS.
2. What is an image sprite, and why is it useful?
An image sprite is when a single image is used for several parts of an interface. It is useful because the browser only needs to request one image rather than multiples, allowing the page to load faster.
1.How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
In JavaScript, declaring a variable looks like: var variableName = variable value;
The equals sign is called the assignment operator and it indicates that you are going to assign a value to a variable.
2. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are numeric values.
Strings contain text and other characters (including numbers).
Booleans can only have values or true or false.
3. What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
-
Variable names must start with a number, $, or underscore. Variable names cannot start with a numnber.
-
Names can contain letters, numbers, $, or underscores. Cannot use a dash or period.
-
Can't use keywords or reserved words.
-
Variables are case sensitive. It is bad practice to create two variables with the same name but different cases (tree versus Tree).
-
Variable names should describe what kind of information the variable contains.
-
If the variable name contains more than one word, each word after the first word should be capitalized (firstName, favoriteColor, etc). Could also use an underscore between each word.
Some examples of reserved words are: var, enum, else, let, and class.
4. How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
An array is useful when storing information about a list of related values. It is especially handy because you can add to it at any time and when the array is created, you do not need to know how many values it will contain. To access an item in an array called firstName:
var firstName; firstName = ['Jonathan', 'Aaron', 'David'];
From here, the index values for the array contents are: 0 - Jonathan, 1 - Aaron, 2 - David
To retrieve the third item in the list, declare a variable, then set the value to the array item you wish to access with the index position in brackets:
var itemThree; itemThree = firstName[2];
To change the value of itemThree, first access the value from the array with the index value in square brackets, and then assigning a new value to it:
firstName[2] = 'Dave';
5. What is the difference between an expression and a statement?
An expression evaluates into a single value and rely on operators to calculate a value. A statement performs an action.
6.What are three types of operators and how are they used?
There are arthimetic operators, assignment operators, and string operators. Arithmetic operators perfrom basic math (* for multiply, / for divie, + for addition, etc). Assignment operators assign a value to a variable (var name = 'value';) and string operators combine strings together with a +.
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?
Entering sayHello() in the console will return "Hello!" whereas entering sayHello will return nothing.
2. What is the difference between function parameters and arguments?
Parameters act like variables within a function. Parameters occur within parentheses. In function getArea (width, height), width and height are the parameters. When a function with parameters is called, the values it should use need to be specified. Arguments can be values or variables.
3.What is the keyword return used for?
This is used to return a value to the code that called the function
4.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?
With local variables you won't run into naming conflicts since two functions can use variables that have the same name, but they are independent of each other. They also take up less memory than global variables and therefore take less time to load in a browser. The only reason I can think a globally scoped variable would make more sense to use than local would be if the value assigned to the global variable will not change.
User Interface/User Experience (UI/UX)
- Psychology
How much work does the user have to do to get what they want?
Good example: https://avantifandb.com/
Bad example: http://stanleymarketplace.com/
For the Avanti website, it is very easy to navigate to what you're looking for (probably info about the food and drinks available there). For Stanley Marketplace, it takes multiple clicks to locate what you might be looking for, and even then you're presented with arguably too much information.
- Usability
Are you basing your decisions on your own logic or categories, or the user’s intuition? How do you know?
From the previous examples, the Stanley Marketplace website continues to violate the rule and the Avanti one supports it. For Stanley, rather than breaking down the merchants into categories, the user's only option is to essentially view all of them, either in tiles of images or a never-ending list. Plus, the options for links are towards the middle of the page. Most websites have the navigation at the top of the page. Avanti's categories and layout are much more clear.
As a different example:
Support the rule: https://www.halfbakedharvest.com/
Violates the rule: https://www.howsweeteats.com/
Half Baked Harvest has its categories at the top of the page, and simplified - recipes, videos, etc. For How Sweet Eats, it's a bit more convoluted. What is "crumbs" as a category? As a food blog, I'm surprised the link for the "recipes" tab all the way to the far right of the page? This seems based largely on the designer's intuition and not the user's.
- Design
Do the colours, shapes, and typography help people find what they want and improve usability of the details?
Continuing off of the Avanti vs Stanley Marketplace example: The headings that tell you where new categories are have red block backgrounds. The menu links are clearly in different fonts and colors as well. For Stanley, the links are consistent in color and style, but have no subcategories.
For different examples:
Upholds rule: https://sephora.com
Violates: https://beautycounter.com
For the Sephora site, the link for "shop" is in bold, so it stands out from the page. If you're on the Sephora site, you're probably looking to shop. Then, within that category, further broad categories have links in bold to make it easy to navigate ("face" in bold, foundation as a subcategory of that not bold). For Beauty Counter, it's not as user-friendly I think partially because the pages are topped with essentially advertisements about their mission. In addition, the subcategories are denoted by check boxes, without any further way to continue filtering products. It's a minimalist style that is attractive but not as functional.
- Copywriting
Does it inform the user or does it assume that they already know what its about?
Violates: http://geekhack.org/index.php
Going on this website, I have no clue where to go or what to even look for. All I know is that it's a website for keyboard enthusiasts.
Follows the rule: https://healthcare.gov
While to an extent the user has to know what this website is about, it's also surprisingly easy to get more information about what the site can provide.
- Analysis
Are you using data to prove that you are right, or to learn the truth?
I'm not sure if I am misunderstanding this category, but it seems from a user perspective there isn't a way to see if a site conforms to or violates any of these rules, since they're more related to the developer's experience on the backend with the user and data-mining.