On a website, what is the purpose of HTML code?
- HTML code is what describes the structure of websites. It creates the rules for the text and organization of the page.
What is the difference between an element and a tag?
- Tags are the opening and closing containers with information about what is within them, while elements are technically the opening tag, closing tag, and the content within them. They are often used interchangably.
Why do we use attributes in HTML elements?
- We use attributes in HTML elements to give even more information about the content within the element. Attributes specify even more details about the element such as what language the text is in or what color the text should be.
Describe the purpose of the head, title, and body HTML elements.
- The head element contains information about the page itself. The body element wraps around what will be shown on the actual browser window. The information within the title element is shown either on the tab of the website or at the top internet browser title bar.
In your browser (Chrome), how do you view the source of a website?
- To view the source of a website in Google Chrome Canary, you first click the view tab in the browser, then scroll to "Developer", and then click "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.
<html></html>indicates that everything within it is HTML code.<body></body>is an element which indicates that anything within it will be shown within the main browser window.<h1></h1>, <h2></h2>, etc., are used as headings ranging in size/importance.<b></b>is used to make text bold and is used to make text italic.<br/>is used to create a line break within a paragraph.
What are empty elements?
- Empty elements don't have any words between the opening and closing tags, so there is (usually) only one tag. Before the closing angled bracket of an empty element, there will often be a space and a forward slash character (such as the line break element
What is semantic markup?
- Semantic markup includes text elements that don't directly affect the structure of the web page itself, but add extra information for other purposes such as screen readers or search engines. A good example is the element, which places emphasis on a word or phrase. This does cause the text to become italic, but the actual reasoning for using instead of is that it communicates the fact that there is emphasis put upon that word or phrase.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
- HTML 5 uses
<abbr>for abbreviations and acronyms. HTML 5 also replaces manyelements with more specific layout elements such as<header>, <nav>, <article>, and <footer>.
Link to my Pen: https://codepen.io/whitneyburton/live/YOWqMr
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered lists are ordered by number, unordered lists are ordered by a set of bullets, and definition lists are organized as a set of terms, usually for definitions. They all have different uses - ordered often used for a set of steps (, unordered often used simply for a list of items (i.e. a recipe), and definition lists are exactly as they sound, for definitions.
What is the basic structure of an element used to link to another website?
- The basic structure of an element used to link to another website is one that starts with the
<a>element, and the href attribute which stands for Hypertext REFerence. After<a href=, you state the website you want to link to by adding<a href="URL to website"> Text you want user to click on </a>
What attribute should you include in a link to open a new tab when the link is clicked?
- In order to get the link to open in a new tab, you add the attribute of target = " _ blank " to the a tag.
How do you link to a specific part of the same page?
- In order to link to a specific part of a page, you have to use an ID attribute to your element, which tells the link where to go. The ID attribute has to start with either a letter or an underscore. Then, link to the < a > element by adding that same ID attribute by adding a # to the beginning.
What is the purpose of CSS?
- The purpose of CSS is to specify how the content of an element should appear - from colors, to fonts, to margins.
What does CSS stand for? What does cascading mean in this case?
- CSS stands for Cascading Style Sheets. Cascading means that the code is order sensitive depending on last rule, specificity, and if it has !important property value.
What is the basic structure of a CSS rule?
- The basic structure of a CSS rule includes two main parts: a selector and a declaration. The selector tell which element the rule applies to (for example, if you are changing the paragraphs font, you would use the p selector). The declaration tells how that element should be styled (this is where you'd list the font family).
- Within the declaration, there are two more parts: the property and the value. The property tells which part of the element you want to change. For example, font-family or color. The value tells what type of property you want to select, for example, selecting the font Arial.
- You can list multiple declarations under a selector, and could also list multiple selectors.
How do you link a CSS stylesheet to your HTML document?
- You link a CSS stylesheet to your HTML document by using an empty < link > element (no closing tag needed). The link element needs 3 attributes: href (link to the CSS file itself), type (type of document: text/css), and rel (specifies the relationship between the HTML page and the file it's linked to: stylesheet).
When is it useful to use external stylesheets as opposed to using interal CSS?
- It's useful to use external stylesheets opposed to internal when you're building a website with more than one page. Doing so allows all pages to use the same style rules (you don't have to repeat them over for each page), it keeps the content separate from how the page looks, and it keeps it simple by allowing you to change styles used across all pages by altering just ONE file, instead of separately for each page.
Describe what a color hex code is.
- A hex code includes values that represent red, green, and blue in hexidecimals (two characters for each for a total of 6 characters). The code is not case sensitive. IF all the characters were the same (black or white) they are abbreviated to 3 characters.
What are the three parts of an HSL color property?
- The three part sof an HSL color property are hue, saturation, and lightness.
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 (extra details on the ends of the main strokes of the letters), Sans-serif (straight ends to the letters), Monospace (every letter is the same width).
When specifiying font-size, what are the main three units used?
- The main three units used are pixels (very precise), percentages (based off of the default size of browsers of 16px), and ems (equial to the width of the letter m).
If you're using an input element in a form, what attribute controls the behavior of that input?
- The
typeattribute controls the behavior of that input.
What element is used to create a dropdown list?
- The
selectelement is used to create a dropdown list.
If you're using an input element to send form data to a server, what should the type attribute be set to?
- The type attribute should be set to
name.
What element is used to group similar form items together?
- The
<fieldset>element is used to group similar form items together
Describe the differences between border, margin, and padding.
- The border separates the edge of one box from the next (like a fence around a yard), the margin sits outside the edge of the border (like the sidewalk outside of the fence), and the padding is the space between the border of the box and the content within it (like a garden within the perimeter of the fence).
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- Each pixel value corresponds to the top, right, bottom, and left sides of the box. It runs in clockwise order starting from the top of the box.
Describe the different between block-level and inline elements.
- Block-level elements are separated onto separate lines while inline elements stay within one line and do not separate from one another.
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- The role of fixed positioning is to place an element in an exact position on the page, so that it does not move hen the user scrolls and it does not affect the position of anything surrounding it. The z-index is important when using fixed positionings because it alows you to control which box appears on top, since once an element is moved out of the normal flow, boxes can overlap. Z-index prevents that.
What is the difference between a fixed and liquid layout?
- The difference is that fixed layouts don't change as the user changes the size of their browser window, while liquid layouts stretch or contract based on the users browser window size. Fixed layouts usually use pixels while liquid use percentages.
In an image element, why is the alt attribute important?
- The alt attribute is important because if the image doesn't show up, it replaces the space with a text description of what the photo is supposed to be. It's also used by screen readers to read what the photo is of, and by search engines.
What determines if an image element is inline or block?
- Because the img element is an inline element, any text will automatically flow around the image when the
<img>is WITHIN the a blocklevel element such as WITHIN a<p>. If<img>is outside of and followed by a block element, then the blocklevel element will sit on a new line.
What are the benefits of jpg or png image file formats?
- The benefit of a jpeg file format is for photos that have many different colors, as it saves all of the subtle differences. Png (or GIF) file formats are suited for pictures that have an area filled with flat color (one exact color).
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- The benefit is that the CSS code will often load faster than the images themselves so by specifying the size within the CSS code the browser can render the rest of the page while the image can load in the background. By using CSS instead of HTML, you can consistently size many images on your website all within the CSS.
What is an image sprite, and why is it useful?
- An image sprite is the use of only a single image for multiple parts of a website. This is useful because it allows the browser to request only that one image and fulfill many parts of the webpage, causing the webpage to load faster.
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
-
Numbers are literally just numbers. To perform arithmetic, you can use operators such as
+, -, *, /... etc. These operations follow the order of operations. There is also the%operation, which will tell you what the remainder of the division problem is (called "modulo"). Special numbers include infinity, -infinity and nAn (not a number). -
Strings represent text by using quotations surrounding that text. You can use single or double quotes, or backticks to surround the text. The benefit of backticks is that you can press enter and it will actually start a new line. Typing
/nwithin your string will force a newline within the string. You can concatenate, or combine two strings, by using the+sign. Backtick-quoted strings are called template literals and have the special power of being able to embed other values, such as ${} operations. The ${} operation will calculate whatever is within the brackets and include it in the string, for example:half of 100 is ${100/2}. - Boolean is a value which distinguishes between the two values true or false. Boolean has a set of rules it follows in order to determine whether a statement is true or false such as: uppercase are always "less than" lower case letters (i.e. Z < a --> true), and alphabetic letters increase in "value" farther into the alphabet (Aardvark < Zebra --> true).
What are the three logical operators that JavaScript supports?
The logical operators that JavaScript supports include:
(1) and && : only results in true if both values given are true.
console.log(true && false) // → false console.log(true && true) // → true
(2) or || : only results in true if ONE value given is true.
console.log(false || true) // → true console.log(false || false) // → false
(3) not ! : flips the value which is given to it.
!true produces false, and !false gives true
- When it comes to order of operations with these logical operators, it goes as follows:
|| has the lowest precedence, then comes &&, then the comparison operators (>, ==, and so on), and then the rest.
What is the naming convention used for variables?
- The naming convention used for variables is binding. Binding is the way that you can tell a variable to catch and hold onto a value.
What is the difference between an expression and a statement?
- An expression is a piece of code that results in a value (
const x = 5;), while a statement is an instruction/action (such as conditions with "if" or loops with "while" or "for" --const y=getAnswers();). - An expression is like a fragment of a sentence, while a statement is a full sentence.
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
- The list of JavaScript reserved words include:
break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import interface in instanceof let new package private protected public return static super switch this throw true try typeof var void while with yield
It's important to avoid using them for variable names because they're reserved for "future use" in Javascript and will return a syntax error if used. Other words with special meaning such asletaren't able to be used because they are keywords in JavaScript.
What is control flow, and why is it useful for programming?
- Control flow is the fact that programs execute code from top to bottom in the order the statements are written. It's useful for programming because it allows us to strictly dictate which statements are executed first and in an order that allows for the conversions to make sense.
If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
- The difference is that sayHello would simply return "Hello!" while sayHello() is calling a funciton and without any parameters within the parenthesis, the console returns an "Uncaught TypeError".
What is the keyword return used for?
- The return statement is used to determine the value of the function. It causes the program to jump out of it's current function and immediately return the value to the code which called that function.
What are function parameters?
- When a method/function needs more information in order to work, that information is given within the parameter of the method. A function can have no parameters or multiple listed within the parenthesis. For example, within the function
document.write('Good afternoon!');putting "Good afternoon!" within the parenthesis tells write() what to write into the page.
What is the naming convention used for function names?
- Generally speaking it's best practice to not write function names that are more clever or lengthy because it only takes you more time and makes your code less adaptable. Unless you're absolutely certain you will need that specific and clever name for the future, it's not a good use of your time. When you use short and obvious names it makes it easier for others to read your code.
- Psychology: Is this something they want to do again? Why? How often?
- Website that supports this: https://www.instagram.com (or the app) Instagram is so easy to use and addictive that users want to use it again and again, dozens of times a day.
- Website that violates this: https://www.mountainproject.com Mountain Projects home page is so busy feeling that I often only use it when I know exactly what to type into my Google search to get straight to the page I need (instead of using their search base), or I'd rather use my own guide books.
- Usability: Have you provided everything the user needs to know?
- Website that supports this: https://www.turing.io/ Turing's website provides all the information about the program that you'd like as well as links to other websites with more information.
- Website that violates this: http://tinytuba.com/ This website literally doesn't provide any information. It's just a tiny squaking tuba.
- Design: Do the colours, shapes, and typography help people find what they want and improve usability of the details?
- Website that supports this: https://amazon.com Amazon's website clearly differentiates the different sections of the website and draws the eyes to where they need to go.
- Website that violates this: https://en.wikipedia.org Wikipedia doesn't utilize many colors, shapes, or typography, and as a first time user to the site it may feel overwhelming to navigate because of this.
- Copywriting: Does it reduce anxiety?
- Website that supports this: https://theuselessweb.com/ The Useless Web's homepage literally only gives you one option to give you what you want. User wants a randomly entertaining website, and the user just has to click the big pink "please" in order to get it.
- Website that violates this: http://www.burlingtonnews.net/burlington_ufo_center.html This website is insanly busy with too many colors and boxes - its not clear where the eyes should go. It definitely causes anxiety.
- Analysis: How can you use this analysis to make improvements?
- Website that supports this: https://www.facebook.com/ Facebook has made many, many changes to their UI/UX over the years, and I feel they've all been big improvements to make the website easier to use and navigate.
- Website that violates this: http://www.neopets.com// Neopets doesn't seem that there has been many changes at all over the years. The website still seems a bit old school and could use a makeover.