- On a website, what is the purpose of HTML code?
The purpose of Hyper Text Markup Language is to provide the structure of a website.
- What is the difference between an element and a tag?
An HTML element is tells the browser something about the information that lives inside that element. An HTML element is usually made up of two tags, an opening and a closing tag.
- Why do we use attributes in HTML elements?
Attributes are used to provide additional information about the contents inside of an HTML element. Attributes are made up of a name and a value, separated by an equals sign.
- Describe the purpose of the head, title, and body HTML elements.
The head provides information about the site and often times links to files used to create the site. The title is usually shown at the top of the browser commonly above the URL bar and on the browser tab for the site. The body contains everything that can be seen on the webpage itself as well as links to other javascript files that may be used on the site.
- In your browser (Chrome), how do you view the source of a website?
In Chrome, to view the page source, you can go to View > Developer > View Source. Alternatively you can right click or control click > View Page Source. Lastly, on a mac, you can press CMD + Option + 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>Heading 1 element - Provides a level 1 heading for the page</h1>
<p>paragraph element - provides a wrapper for paragraph text</p>
<em>emphasis element - represents italicized text</em>
<strong>strong element - represents bold text</em>
<blockquote>block quote element - used for longer quotes that take up a whole paragraph</blockquote>- What are empty elements?
Empty elements are HTML elements that do not have any words in between their opening and closing tags. Examples would be a line break
<br />or a horizontal rule<hr />.
- What is semantic markup?
Semantic markup is the use of HTML elements that don’t necessarily affect the structure of your web page, but add extra information to describe what is on 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.
The names of these new elements indicate what type of information you will find inside them:
<nav>nav element will typically contain navbar information</nav>
<article>article element willy typically contain some type of article or paragraph text</article>
<footer>footer element will contain footer information at the bottom of the page</footer>- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Each item in an ordered list is numbered and typically must be read back in the same order. An unordered list is a list of bullet points that don’t necessarily need to be in a specific order. A Definition list is made up of a set of terms along with the definitions of those terms.
- What is the basic structure of an element used to link to another website?
The basic structure of a link element is an anchor
<a>tag with an ‘href’ attribute. The ‘href’ attribute value will contain the URL or page where the link will take you. The text or elements in between the opening and closing<a>tags will be what the user clicks on in order to visit that link.
- What attribute should you include in a link to open a new tab when the link is clicked?
The ‘target’ attribute, when set to ‘_blank’ will open the link in a new tab.
- How do you link to a specific part of the same page?
You can link a specific target of the same page you are already on, by setting the ‘href’ value to an ID that is on the current page.
- What is the purpose of CSS?
The purpose of CSS is add styling to an HTML page. CSS enables you to create rules that specify how HTML content should appear.
- What does CSS stand for? What does cascading mean in this case?
CSS stands for Cascading Style Sheets. Cascading in this context refers to the priority of stylesheet rules when pertaining to a particular HTML element. When stylesheet rules are conflicting, the most specific rule pertaining to an HTML element is chosen. For example an element ID is more specific than an element 'class'. Cascading also has to do with order. Styles further down in a stylesheet will override styles further up unless styles further up are more specific. Stylesheets linked further down on an HTML page will also override previously linked stylesheets.
- What is the basic structure of a CSS rule?
The basic structure for CSS consists of two parts: the selector and the declaration. The selector is used to select an element from the HTML page and the declaration, which is inside curly braces, indicates how that element should be styled. Inside the declaration, styling is made up of two parts: a property and a value. The property refers to which CSS property will be changed, and the value specifies the setting you want to use for the given property.
body {
font-size: 16px;
}- How do you link a CSS stylesheet to your HTML document?
Typically a CSS stylesheet is linked to an HTML document in the head of the HTML document using a link tag indicating where the CSS file is located using an href attribute. The type attribute is used to specify the type of document being linked to and the res attribute specifies the relationship between the HTML page and the document it is being linked to. Often it is written like this:
<link href=“css/main.css” type=“text/css” rel=“stylesheet”>- When is it useful to use external stylesheets as opposed to using interal CSS?
Using external stylesheets as opposed to internal CSS can be beneficial as it allows us to reuse the same CSS for multiple HTML pages, it keeps a separation of concerns between the page content and the page styling, and it makes it easier to change styling across multiple HTML pages from only one file.
- Describe what a color hex code is.
A hex code is a six-digit code that represent the amount of red, green, and blue in a color. Hex codes are preceded by a # sign and can create a very wide variety of colors.
- What are the three parts of an HSL color property?
The three parts of HSL are Hue, Saturation, and Luminance. Hue is quintessential idea of color i.e. red, green, blue. Hue can be thought of as a spectrum. Saturation refers to the amount of gray in a color. At maximum saturation there would be no gray and at minimum it would be mostly black, gray, and white. Luminance refers to how bright a color is. At maximum luminance there would be very little black in the color.
- 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 have extra details or 'Serifs' on the ends of the main strokes of the letters. Sans is the french word for 'without', therefore Sans-Serif fonts are fonts that do not have 'Serifs' and have straight ends to the letters. This makes for a cleaner design. Every letter in Monospace fonts has the exact same width. Monospace stands for fixed width. This can be useful in programming as these letters align nicely.
- When specifiying font-size, what are the main three units used?
The three main units used when specifying font size are Pixels, Percentages, and EMS. Pixels enable you to specify the precise size over how large the text is relative to the resolution of the screen. Percentages refer to what size the text is relative to the default text size. Most browsers have a default text size of 16px, although it is possible to change the default size. Ems allow you to change the size of the text relative to the text size of the parent HTML element. This way if the user changes their default size, the text sizes on your page will still work together relatively.
- If you're using an input element in a form, what attribute controls the behavior of that input?
When using an input element in a form, the 'type' attribute controls what type of data is being collected (i.e. 'text', 'password', 'radio buttons'. The 'name' attribute handles where the data will be sent once it has been submitted. The 'name' attribute lets the server know which input value corresponts to which part of the database. This interaction is what lets the value entered in the form input to be stored in the correct place in the database.
- What element is used to create a dropdown list?
The element used to create a dropdown list is known as the 'select' element. The 'select' element lets users choose from two or more 'option' elements within 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?
An input element that sends form data to the server would be of type 'submit'. The 'value' of an input of type 'submit' is the text that appears on that submit button.
- What element is used to group similar form items together?
The 'fieldset' element is used to group form elements together. This can be particularly helpful for longer forms. The 'legend' element within a 'fieldset' element contains a caption that helps identify the reason for grouping these form elements.
- Describe the differences between border, margin, and padding.
The border is what separates the edge of one box from another. Every box has a border whether or not it is visible. Margin is space that sits outside the border of a box. Margin is used to create space between adjacent boxes or a box and something else on the page. Padding is the space between the border of a box and any content that lives inside of the box such as text or an image.
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
The CSS padding selector starts at the top and works clockwise. So in this case, the top would be 1px, right is 2px, bottom is 5px, and left is 10px.
- Describe the different between block-level and inline elements.
A block level element starts on a new line and takes up the entire width of the page while an inline element takes up only the width of its content.
- 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 in which elements are positioned relative to the browswer window and not according to their containing element. Fixed position elements do not move when a user scrolls throught the page and and they do not affect the position of surrounding elements. Fixed position is often used for elements that are supposed to be in the background of a page. The z-index plays an important role in this scenario because it determines which element will be on top when two elements overlap. The higher the z-index, the closer the element will be to the front of the site.
- What is the difference between a fixed and liquid layout?
A fixed layout will not change when the size of the window changes. A liquid layout can change when the size of the window changes. Liquid layouts can be very helpful in making websites responsive for better viewing on different devices such as mobile or tablets.
- In an image element, why is the alt attribute important?
Image alt attributes are important because they provide a text description of an image for those who may not be able to see it. This is important from an accessability standpoint and for those who may be using screenreaders.
- What determines if an image element is inline or block?
IMG elements are inline meaning they will flow horizontally with text and other elements. They also have characteristics of block elements in that they have a width and a height. If an image element is placed within a paragraph or other text, it will be inline with those elements. However if a block level element follows an image it will start on a new line, giving the image the appearence of being a block level element.
- What are the benefits of jpg or png image file formats?
JPEG is a lossy compressed file format and is great for storing high resolution photos at a relatively small size. JPEGs are best for storing realistic looking images and have good color representation over millions of colors. PNG is a lossless compression file format and is best for story line drawings, text, line art, or images with few colors. PNGs also have the ability to have a transparent background, this can come in handy when placing logo's and other images of that nature.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
In general it is best to stylize HTML elements in a separate CSS file as to keep a separation of concerns between files. Also, when setting the width and height of an image in a separate CSS file, it is easy to apply those dimensions to multiple images. A default width and height can easily be applied to all images on a page using this CSS:
img {
width: 100px;
height: 100px;
}- What is an image sprite, and why is it useful?
An image sprite is a single image that is used for different parts of a web page. Usually a logo and some icons combined together into one image and then sections of that image used on different parts of the page. The benefit to this is that the site only needs to load one image which can help achieve faster load times.
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
The numeric data type handles numbers, which can be whole numbers, decimals or negative numbers. Numeric data types can be used in many different circumstances such as calculations, positioning elements on a page, comparing values, or setting the amount of time before something happens. String data types are enclosed in either single or double quotes and typically use letters and characters. Strings are typically used to add content to a page. Booleans either have a true or false value. Booleans help programmers make decisions based on whether certain values are true or not.
- What are the three logical operators that JavaScript supports?
The three logical operators in javascript are 'and' (&&), 'or' (||), and 'not'(!). These logical operators allow you to compare the results of two or more comparison operators.
- &&
(2 > 1) && (3 < 4)
// returns true- ||
(2 > 1) || (3 > 5)
// returns true since the first comparison is true- !
(!false)
// returns true- What is the naming convention used for variables?
Different languages have different naming conventions for variables. Variables in JavaScript are declared using either a 'var', 'let', or 'const' keyword and then follow 6 rules for naming:
1. Variable names must begin with a letter, dollar sign, or an underscore. Then cannot start with a number.
2. Variable names must not use a dash or a period.
3. Variable names must not contain specific reserved JavaScript keywords.
4. Variable names *are* case sensitive. It is bad practice to name two variables the same name with different case.
5. Variable names should describe the data they are storing.
6. Variable names typically use what is called 'camelCase' meaning the first letter of each word is capitalized except the first word. You can also use 'snake_case' which puts an underscore in between each word.
- What is the difference between an expression and a statement?
A script is a series of instructions that tell a computer what to do. A statement is an individual instruction for the computer to follow. Statements are ended with a semicolon so that when a JavaScript file is compiled and minified, the computer still knows when an individual instruction is over and to move onto the next step. An expression is simply something in JavaScript that returns a single value. Typically an expression consists of either assigning a value to a variable or taking multiple values that return a single value such as a calculation or string concatination. An expression is usually a type of statement.
- What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
A reserved keyword in JavaScript is a word that has a special meaning to the language and are actually part of the JavaScript syntax. Some special keywords are 'var' (used to declare a variable), 'for' (used for creating loops), 'new' (used to create a new instance of a class), or 'return' (used to return a value from a function). It is important that variable names not use special keywords as their name because these words already have meaning in JavaScript. Hypothetically, if you were to assign a variable to one of these words, then when you tried to use that word later in your code, JavaScript would not know if you meant the variable name or the special keyword.
- What is control flow, and why is it useful for programming?
Control flow has to do with the order in which the computer executes code. Typically a computer executes code from the top of a file down to the bottom of a file, however there are many things in JavaScript that can affect this order. Different statements can affect control flow in different ways. For example an 'if' statement will execute different code based on the outcome of a certain condition. This enables programmers to make decisions and return dynamic outcomes based on certain conditions. Loops are another type of statement that can affect control flow in that they allow code to repeat for a set of values or while a certain condition remains true or false.
- 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' will return the actual function itself, while entering 'sayHello()' will invoke the function and execute the code inside the function.
- What is the keyword return used for?
A function in JavaScript can only return one value each time it is invoked. The return keyword determines what value will be returned from the function. Once a value has been returned from a function, the execution of that function will stop, as the main purpose of a function is typically to return a value. For example:
function isJavascriptCool (num) {
if ( num > 2 ) {
return 'yup JS is super cool!';
} else {
return 'eh its ok';
}
}
isJavascriptCool(8); // returns 'yup JS is super cool' and the rest of the function does not execute- What are function parameters?
Function parameters in JavaScript are placeholders for arguments that a function will take in in order to execute the code inside the function. For example:
function addNumbers (num1, num2) {
return num1 + num2;
}
// num1 and num2 are the parameters of the function
addNumbers(3, 4); // returns 7, 3 and 4 are the arguments passed into the num1 and num2 parameters- What is the naming convention used for function names?
Function names in JavaScript are typically written in 'camelCase', capitalizing the first letter of each word except the first word. The name of a function should be descriptive of what the code inside is doing. There are some exceptions to these rules however. Many times a function does not have a name at all. This is called an anonymous function. Often an anonymous function will be assigned to a variable:
const addNumbers = function(num1, num2) {
return num1 + num2;
};Another exception to these rules is when declaring a constructor function, the name of the function is typically capitalized. This is to let programmers know that this is a special function. For example:
function Person (name, age) {
this.name = name;
this.age = age;
this.sayHi = function() {
return `Hi ${this.name}`;
}
}
const gray = new Person('Gray', 32)
gray.sayHi(); // "Hi Gray"There is a great series of UI/UX posts called UX Crash Course: 31 Fundamentals. Read the first three, short posts: What is UX?, User Goals & Business Goals, and The 5 Main Ingredients of UX. 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.
Post links to the sites and brief descriptions in your prework gist.
1. Psychology - Are you thinking of the user’s wants and needs, or your own?
- Bad Site: https://facebook.com
When facebook decided that it was going to charge for pages to 'boost posts', essentially creating an environment where it was virtually impossible for pages to reach their facebook fans without paying for posts, were they thinking of the users wants and needs, or their own? I'm going to guess they were thinking mostly of their own needs in this scenario. I don't really see how this is a benefit to users since not only are the page owners not capable of reaching their fans without paying, but individuals who deliberately 'liked' that page are now not seeing content that they signed up to see.
- Good Site: https://reddit.com
Instead of the 'behind closed doors' algorithm that facebook and instagram use to determine what you want to see, reddit outsources its algorithm for what its users see to the users themselves. The top most seen content is determined by the users upvotes and its right out in the open for everyone to see. This transparency makes for a great user experience, clearly they were thinking of the users benefits when they came up with this.
2. Usability - Could you get the job done with less input from the user?
- Bad Site: https://nextdoor.com
This site is a great concept and helps connects neighbors, but if you are checking it out for the first time, you can't even get a glimse of what the actual site is like until you go through a long, arduous onboarding process where they ask you for every bit of information short of your social security number. Literally, you have to give them your email, address, phone number or credit card, then they ask you to invite 3 friends, and then fill out your profile before you can even see the site. Give the user a chance to see the site in the context of their neighboorhood before asking all of this information for the love of god!
- Good Site: https://www.grammarly.com/
When you go to grammarly for the first time, they tell and show you exactly how it works right on the homepage and then you click one button 'add chrome extension' and you're up and running!
3. Design - Do the colours, shapes, and typography help people find what they want and improve usability of the details?
- Bad Site: Amazon Product Page (http://a.co/1rZ3r3J)
Obviously Amazon is probably the most successful ecommerce site the world has ever seen, however I still think their product pages look a bit janky and don't really help me find the best information. Particularly the product description and features always sort of hidden and mashed together. Also the links on Amazon's product page are basically hardly styled at all and give the page an overall dated feel in my opinion.
- Good Site: REI Product Page (https://www.rei.com/product/110922/rei-co-op-magma-10-sleeping-bag-mens)
REI's product pages are very nicely laid out. The description and technical specifactions of the product are very easy to read and the page overall has a very clean feel which makes it easier to find what you are looking for.
4. Copywriting - Is it clear, direct, simple, and functional?
- Bad Site: http://www.marriott.com/default.mi
The first thing you read when you visit Marriot's site is "Light Up the Night. Enjoy 750 bonus points per night, starting with your third night." Ok great, chances are most people don't even really care about getting bonus points and don't really know the worth of 750 bonus points. 750 bonus points could be worth $6 or a free vacation to Hawaii for all I know. This also only applies to people who are planning to stay more than 3 nights. Also, "Light Up the Night" to me sounds a little cheesey and I don't even really know what that is supposed to mean.
- Good Site: https://www.airbnb.com/
The first thing you read when you visit Airbnb is "Book unique homes and experiences all over the world." This is very simple and very direct. It tells you exactly what this site is for and what you can do with it. Its also very enticing. Who doesn't want to book unique homes and experiences all over the world?
5. Analysis - How can you use this analysis to make improvements?
- Bad Site: https://denver.craigslist.org/
One could argue that this is part of the beauty of craigslist, but the UI doesn't look like its changed a single bit since the day they started. Maybe they analyzed their userbase and no one wanted to change anything. I do wonder how much better it could be though if they were constantly pushing great updates.
- Good Site: https://splice.com/
Splice is an incredible webapp for music makers and really helps with the creative process. Splice started out with its main focus being project backup and as sort of a dropbox specifically for music software. While they still do that really well, they have listened to their users and added so many new amazing features that are revolutionizing the music making process. Some of the new features include a rent-to-own platform for expensive audio plugins and SpliceSounds which is a monthly subscription platform for finding new samples. Neither of which had been done before.