The purpose of HTML code is to format, layout and organize the website's content so that its readable and easily understood by the viewer. HTML code allows us to format webpages in a way that mimics that format of paper versions of new articles (for example) so the reader can absorb the information in a familiar way.
An element is a specific section of content. Tags are what indicate the open and close of that section/element. The element could be a heading, paragraph, etc. The opening tag and closing tag are the container that holds the content for the heading element, paragraph element, etc.
Attributes in HTML elements provide more information about that element. For example, the attribute could tell the browser the language used in the element. Attributes are made up of a name and a value.
The purpose of the head is to provide information about the page. The information in the head element is not shown on the browser page itself. The title is usually found within the head element and the title's purpose is to provide the text that will be shown on the tab or top of the browser to indicate which website it is. The purpose of the body is to outline what should be/will be shown on the webpage itself (what will be shown in the browser window).
In Chrome you can view the source of a website by opening that website, then selecting View, then Developer > View Source
<h1></h1>is used to represent a main heading which will be the largest heading on the page<h2></h2>is used to represent a subheading which will be smaller than the main heading<body></body>is used to represent the body of the webpage, meaning everything that will be shown on the webpage itself.<head></head>is used to represent information about the webpage. This content is not shown on the webpage itself.<title></title>is used to represent the title of the webpage itself, which will be what is shown on the tab of the browser.
Empty elements are elements that do not have text between the opening and closing angle brackets. They are kind of a stand-alone-single-tag rather that the typical opening/closing tag pair. They will have a space and a forward slash before the closing angle bracket. Two examples of empty elements are Line break <br /> and Horizontal rule <hr />.
Semantic markup refers to HTML elements/tags that allow us to describe the content more accurately. For example, strong, emphasis, block quote, cite, etc. They are useful for screen readers to see additional meaning in the content and for search engines to identify quotes (for example). More specifically, to indicate that the meaning of a piece of text is slightly different, you would want to use <em><em/> rather than just <i></i>. Even though they appear the same visually in the output, its important to indicate the slight difference in meaning via <em></em>.
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
In HTML 5 there are new semantic elements that are introduced which basically just remove the need to use
<header>
<nav>
<article>
<aside>
<footer>
Click here.
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered Lists have each item in the list numbered in sequence. Unordered Lists have each item in the list bullet pointed. Definition Lists have a set of terms and each term has a definition with it. Their difference are really just how the list items are layed out. Also, definition lists have two parts so each item in the list has two tags that are used to list both parts.
The basic structure of an element used to link to another website is <a href="https://www.absoluteurl.com"></a>. The basic element is <a></a> but also needs the href attribute to indicate which website the link is taking the user to.
To have a link open in a new tab you would need to include the target="_ blank" attribute in the open <a> tag.
To link to a specific part of the same page you would need to use the <id> attribute to designate the different sections of that page then use the href attribute to link to that specific id attribute value.
The purpose of CSS is to control the design of HTML elements to make pages more attractive
CSS stands for Cascading Style Sheet. Cascading in this case refers to how the rules/selectors are applied to the various elements of an HTML document.
The basic structure of a CSS rule is a selector followed by a declaration in curly brackets. The declaration is made up of a property and a value separated by a colon. An example of the basic structure of a CSS rule is h1 {color: blue;}.
You link a CSS stylesheet to your HTML document in the <head> element by using the <link> element and the href, type, and rel attributes. An example is <link href="css/styles.css" type="text/css" rel="stylesheet" />
It generally recommended to use external stylesheets especially when the site has more than one page. Three reasons why using an external style sheet is beneficial in this case are:
- Allowing all pages to use the same style rules.
- Keeping the content of the page separate from how the page appears.
- Making changes to the style that will update across all pages rather than having to change each page on its own.
A color hex code is a 6 digit code that points to a specific color. The first 2 digits identify how much red, the second 2 identify how much green, and the third 2 digits identify how much blue. Hex codes are formatted like this... #66cdaa.
Hue, saturation and lightness make up an HSL color property.
- In the world of typeface, what are the three main categories of fonts? What are the differences between them?
The three main catergories of fonts are serif, sans-serif and monospace. Serif has added details at the end of the main strokes (like a fancy tail on a letter) where as sans-serif letters have straight edges without these added details. Monospace letters all have the same width whereas serif and sans-serif letters have widths that very letter-to-letter.
The main three font-size specifying units are pixels, percentages and ems.
When using an input element in a form, the type attribute controls the behavior by determining what kind of input the user will be creating.
The select element is used to create a dropdown list. The select element is used with the option elemend and value attribute.
- If you're using an input element to send form data to a server, what should the type attribute be set to?
"Submit". This creates a button that is used to send the form daata to the server.
The fieldset element groups form items together.
Each HTML element essentially has its own box around it. The border is the edge of the box. The margin is the space outside the border separating it from other boxes' borders. The padding is the space inside the border separating it from the contexts of the box (like an interior margin).
- 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
Block-level elements are arranged up to down, each on a new line. Inline elements are arranged left to right, all in a row within the flow of the contents (text).
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning puts an elements in a certain place on the page in relation to the browser window. The element does not move when the user scrolls. Z-index is important because it determines whether the fixed position element is visible over the contents of the page or whether something else is visible over the fixed position element. It essentially decides what should be shown 'on top'.
A fixed layout is the same size (width) regardless of how big or small the user's screen or browser window is. A liquid layout stretches and shrinks to keep its porportions nad layout as a user's window changes sizes and over different sized screens.
The alt attribute is important because it is used by screen readers to read the information about the image to users who are visually impaired.
The image element is typically in line. If a block level element comes after the image element, the block level element will sit on a new line. If the image element is inside a block level element, it will be inline and the other text and elements will flow around it.
Jpg is the preferred format when an image has many different colors in it, like a photograph. Png or gif is the preferred format when an image has few, flat colors in it, like a logo or diagram.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
Specifying the height and width of images is beneficial because images take longer to load. When the height and width are specified, the page can load around the space that the image will take up once it loads. Doing the height and width specification in CSS rather than HTML is beneficial because it keeps the layout/design rules in CSS while the content stays in HTML.
An image sprite is a single image that is used more than once throughout a page/interface. An image sprite is useful because the web browser only has to request and load one image rather than several so it can load faster.
- How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
You declare a variable by using the var keyword with the variable name (that you are declaring) followed by a semicolon. The equal sign in Javascript means that you are assigning a value to the variable you've declared. The equal sign is known as the assignment operator.
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numeric data type - uses whole numbers and decimals. Ex: 5280 (no comma) Ex: 0.25 (decimal) Used for more than just mathematical calculations. Can be used for size, position, setting amount of time, etc.
- String data type - uses text between quotation marks. Can be single or double quotes. Ex: 'Hi, Ivy'
- Boolean data type - uses true or false values. Works like an off/on switch. Can determine which part of a script should run.
- What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- Must start with letter, $ or under_score. Can't start with number or symbol other than $ or under_score.
- Can't have any periods or dashes.
- Can't use keywords or reserved words.
- Case sensitive. Bad practice to use same name with different case.
- Should describe the information it is storing. For example, firstName or age.
- Use camelCase for names that are more than one word.
JavaScript reserved keywords to avoid using as variable names: break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, function, if, import, in, instanceof, new, return, super, switch, this, throw, try, typeof, var, void, while, with, yield
Some JavaScript future reserved words: enum, package, private, protected, public
- How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
An array can be useful when dealing with multiple related values because it works as a list. This allows an unspecified number of items to be added to the list rather than having to declare individual variables for each when you may only use a percentage of them. To access or change a value in an array you would specify the index number for the item you want to change inside square brackets after the array name. For example, colors[2]= 'purple'. In this example the array name is colors and the index number for the value we want to change to purple is 2 which means it is the third item on the list.
A statement is what we call each individual instruction (or step) in a script.
An expression evaluates into (results in) a single value assignment for a variable.
I believe an expression is a type of statement.
- Assignment operator. The = is an assignment operator which assigns a value to the variable.
- Arithmetic operator. These perform basic math
(+, -, /, *)to result in a single value. - String operator. These combine two or more strings into one new string. This process is called concatenation.
"2" === 2 and "2" == 2 Why does one of those expressions return true and one return false?
Found this online: In JavaScript it means of the same value and type. The === operator is called a strict comparison operator, it does differ from the == operator. For "a == b" to evaluate to true a and b need to be the same value. In the case of "a === b" a and b must be the same value and also the same type for it to evaluate to true.
In the chrome console practice exercises on variables, I get an error if I use 'location'.
- If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
If you enter sayHello, it will not operate as a function. When I tried this in the console in Chrome, it returned:
ƒ sayHello(){console.log("Hello!")} which appears to be an indicator that a function exists by that name. So it seemed to reference that function, or point you in the direction of that function, rather than execute that function.
If you enter sayHello(), it will execute that function and output "Hello!".
Parameters are the info that the function needs in order to do that task(s). They are written in the function declaration as the variables in the parentheses. Arguments are the specific values of those variables that are assigned in order to call the function.
The keyword return is used to indicate that a value should be returned by the function. This value is returned to the code.
- 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 preferred over global variables because they do not create naming conflicts and can be used more than once with different values. It could be valuable to use a global variable for anything that remains constant or needs to be called by more than one function.
What is the user’s motivation to be here in the first place?
Good example: Map My Run Homepage is a good example because I'm there to log a workout and all my options are clearly and easily laid out at the top of the page so I can easily get to what I need.
Poor example: Bailiwick's Coffee Homepage is a poor example because I'm there to find out about any events happening at the coffee shop and couldn't find this info. Also the menu doesn't include any information about syrup options, pricing, etc. The lack of content coupled with the design makes this a poor example. The webpage is simple and doens't have much content. There are no links outside of the navigation links so I found myself mousing over every part of each page to see if one of the text/images was a link.
Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
Good example: C3 Church's webpage is a good example because finding the link to service times can be done without having to click. You can find it right away if you scroll down on the homepage or if you hover over the navigation links at the top right. The two links with dropdown options have an arrow indicting that they are drop downs so no assumptions have to be made.
Poor example: Brew Dog Canal Winchester webpage is a poor example because its very easy to find a listing and description of the beers but I'm there to look for any events taking place at that location. I actually couldn't find that information on the webpage and gave up pretty quickly when I couldn't find what I was there for right away. There are a lot of different content areas you can go to but its not as clear what you'll find in them so I found myself guess-and-checking.
Do users think it looks good? Do they trust it immediately?
Good example: Marriott.com is a good example because the design of the website looks good, professional and well put together. Users will trust it immediately.
Bad example: Otels.com is a poor example in comparison because it looks less pleasing to the eye, less professional and has quite a few ads on the main page which could limit user's from trusting it immediately. Which works because I'm pretty sure the whole company is just 5 people in some guy's basement in Cleveland.
Does it sound confident and tell the user what to do?
Good example: Dollar Car Rental homepage is a website I went to expecting to use it as a poor example. A few things on the page changed my mind. Primarily, it says "Never forget whose dollar it is" above the form to sign up for email offers with a button stating "Sign Up". This combined with the main text proclaiming "Nationally endorsed by Dave Ramsey" confidently conveys the message that if you book with Dollar Car Rental, you will be saving money.
Poor example: Slate Real Estate homepage is a poor example because the text doesn't convey confidence, inspire confidence or direct the user what to do or where to go.
Do you know why users do that, or are you interpreting their behaviour?
Good Example: I can't link to this example because its a software program not a website. SPG hotels used an operating system called LightSpeed. If you were in the part of the operating system to create a reservation and did not complete a reservation, it would ask you why you were exiting without creating a reservation. You had to choose from a dropdown before you could proceed. This provided data for why reservations would be started but not completed.
Poor Example: Columbus Floor By Design Customer Review page is a poor examples. Its clear by the fact that the most recent review is from 2012 that they are not seeking user feedback to use to update the user experience on their website.