On a website, what is the purpose of HTML code?
HTML code describes the structure of a web page by displaying the hierarchy of information.
What is the difference between an element and a tag?
An element refers to the bit of code between the opening and closing tags.
Why do we use attributes in HTML elements?
In order to provide additional information about the contents of an element. They are made up of two parts: a name and a value separated by an equals sign.
Describe the purpose of the head, title, and body HTML elements.
Within an HTML document are various HTML that help establish the HTML document's hierarchy. Of these three elements, the element, which holds information regarding the overall HTML page. The <title> element lies within the element's opening and closing tags. The <title> element refers to the title of the website. The element refers to anything that will be displayed within the main browswer window.
In your browser (Chrome), how do you view the source of a website?
Right click > View Page Source
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.ul Unordered List - Is used to create bulleted lists ol Ordered List - Is used to create numbered lists h1 Header 1 - This denotes the main header a Link - Links are created using this element strong Bold - indicates a strong importance and will show in bold
What are empty elements?
An element that does not have any words between the opening and closing tag. The often have a structure similar to
What is semantic markup?
Text elements that do not intend to add to the structure of your page, but do add extra information. The purpose of this markup is to provide extra information to screen readers and search engines.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
header, footer, nav
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
ordered - an ordered list is a list of numbered items
unordered - a list of items utilizing bullet points
definition - a list made of a set of terms along with the definitions for each of those terms
What is the basic structure of an element used to link to another website?
Links are creating using the an tag. linked text .
What attribute should you include in a link to open a new tab when the link is clicked?
linked text
How do you link to a specific part of the same page?
First, you would have to give all of the anchors id attributes. For example, id="id name". Second, when linking to the section within the code, you use the # symbol follow by the value of the id attrubute. For example, linked text .
What is the purpose of CSS?
CSS allows you to create rules that control the way a web page is styled by associating rules with HTML elements. These rules determine how content should be displayed in a web browser.
What does CSS stand for? What does cascading mean in this case?
Cascading Style Sheets. Cascading has two seperate indicators, the first being 'The Last Rule' later in the code takes precendence over any other code earlier in the sheet that may be conflicting. The second being 'Specificity' meaning, the more specific rule will take precedence over more general ones.
What is the basic structure of a CSS rule?
First, you would determine your selector. Selectors indicate which element the rule applies to. Examples could be h1, p, body. Followed by an open & closed curly bracket. Within the curly bracket, you would make a declaration which indicates how the elements referred to in the selector should be styled. Declarations are split into two parts, the property and the value separated by a colon. Properties indicate the aspects of the elements you want to change. Values specify the settings you want to use for the chosen properties.
selector { property: value; }
How do you link a CSS stylesheet to your HTML document?
You should link the CSS stylesheet in your HTML document's section. Underneath the <title> of the site, the link to the stylesheet that would look like .
When is it useful to use external stylesheets as opposed to using interal CSS?
When you are building a site with more than one page, you should use an external CSS style sheet because it allows pages to use the same rules, keeps content separate from how the page looks, and a change can be made in one place versus at every instance.
Describe what a color hex code is.
A hex code is a 6 digit code that follows a # symbol that indicates the amount of red, green, and blue in a color.
What are the three parts of an HSL color property?
Hue, saturation, and lightness.
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
Serif, sans serif, and monospace. A serif typeface has 'feet' or 'hooks' similar to typefaces used in printing press times. Sans serif typefaces do not have 'feet' and give a little more modern of a look. Serif's served actual purposes in the printing press days, they are said to lead the reader's eye and make reading easier in print. Serif fonts seem more modern, which is why they are so widely used today, but they are ultimately harder to read. Monospace typefaces have a fixed width each character can tak up horizontally, in code this is more common because the monospace typeface aligns nicely making it easier to follow.
When specifiying font-size, what are the main three units used?
Pixels, percentages, and ems.
If you're using an input element in a form, what attribute controls the behavior of that input?
If using an input element, when you specify the type of the input from: text, text area, password, name, value, checked, radio, and more.
What element is used to create a dropdown list?
The select attributes helps create a form with a drop down list with various values to choose from.
If you're using an input element to send form data to a server, what should the type attribute be set to?
You should utilize the post method, because with the post method, the values are sent in what are known as HTTP headers.
What element is used to group similar form items together?
The
Describe the differences between border, margin, and padding.
Border - every box has a border within HTML, but it does not have to visible. The border separated the edge of one box from another. Technically everything in HTML is surrounded by a box.
Margin - Margins sit outside of the edge of the border, you can set the width of a margin to create a gap between the borders of two boxes. The margin helps establish white space between visible objects.
Padding - Padding is the spce between the border of a box and any content contained within it. Adding padding can increase the readability of its contents. Helps with alignment of the content within the box.
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 different between block-level and inline elements.
An inline element does not cause a line break, it also doesn't take up the full width of the page. A block element however does cause a line break and extends from the whole width of the page.
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning is a type of absolute positioning that remains in the exact same place. When the user scrolls down the page, it stays in the exact same page. A real-world example of this would be a sticky navigation. The z-axis is important to note here, because as the user scrolls, the sticky navigation will likely be hovering over other parts of the web page like images or other text. It's important that readability remains in tact, so it should be designed to lay atop something and be readable regardless.
What is the difference between a fixed and liquid layout?
Fixed width layouts remain the same and do not increase or decrease in size depending on the screen visiting the site. It's nice because you can control the layout more, but it is not good for this day in age when there are so many different screen sizes. It's impossible to predict what your user might be viewing your site on. Liquid layouts stretch, contract, stack and are manipulated to fit the size of their browswer window.
In an image element, why is the alt attribute important?
The image element is a way that you add an image to the web page that you are building. An img element must have a src and alt attribute. The src attribute tells the browser where the image can be found. The alt attribute provides a text description of the image for disabiled viewers or those who are opting now to download images.
What determines if an image element is inline or block?
The placement of the img element and whether it is on the same line as the paragraphing or not.
What are the benefits of jpg or png image file formats?
They are lower file size, so you can have more images render quickly on your site. GIFs, SVG's and others are a bit larger.
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
If you want to consistently use the same 1 or 2 image sizes throughout a site, but want the ability to change or update in the future it is smarter to crop your images utilizing CSS. Because you can create classes that then can be applied to the HTML img elements, you can keep consistency while still being able to adapt the code easily. By using CSS classes, you can alter the CSS class once and have it applied to each instance versus having to edit each HTML img element.
What is an image sprite, and why is it useful?
A sprite is an image that is used multiple times throughout the same website. For example, logos or accreditations that need to be visible on every page to maintain intergrity and brand identity. These are useful, because they are requesting one image and placing it several places.
How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
To declare a variable, you give a variable a name. This should be written as var name; once you have declared the variable, the you then can assign the variable a value. This should be written as var name = value; where the equals sign is acting as the 'assignment operator'. The assignment operater indicates that you 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.
numbers - Any number: positive, negative, decimal. Numeric data type.
string - a data type that consists of letters and other characters. It always must be enclosed by a pair of quotes. For example: 'My name is Ayla Dharamsey!'
boolean - Data types that can have one of two values, true or false. For example: Is the sky red? False
What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- The name must begin with a letter, $, or an underscore _ . It must not start with a number.
- The name can contain letters, numbers, $, or an underscore. Cannot use a hyphen or period.
- The name must be devoid of any javascript keywords or reserved words. For example, var.
- All variables are case sensitive. It is bad practice to make two varibales that have the same name using different cases.
- Use a name that describes the kind of information that the variable stores.
- If your variable name is made up of more than one word, use camel case.
How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
An array helps store a list of values for a specific variable. For example, so the variable was Cities in the Colorado, a list of values could be (Denver, Pueblo, Castle Rock, Dillon). To create an array, you would:
var cities;
cities = ['Denver', 'Pueblo', 'Castle Rock', 'Dillon'];
What is the difference between an expression and a statement?
An expression produces values based off of statements using evaluation. Statements are instructions to perform predetermined actions.
What are three types of operators and how are they used?
Expressions rely on things called operators, allowing programmers to create a signle value from one or more values.
Assignment Operators - Assign a value to a variable. Example: color = 'beige';
Arithmetic Operators - Perform basic math area = 3 * 2; returning 6
String Operators - greeting = 'Hi + Molly'; returning Hi Molly
Comparison Operators - Compare two values and reture true or false, buy = 3>5; which would return false
Logical Operators - Combine expressions and return true or false, buy = (5<3) && (2<4); which would return true
If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
sayHello is just a name of a variable, but sayHello() is the name of a function.
What is the difference between function parameters and arguments?
When a function needs specific inofrmaiton to perform its task, you give the function parameters. Parameters are used as variables within the function. Arguments are values that are specified to be used.
What is the keyword return used for?
The return keyword 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?
It depends on where you declare the variable within the code. If the variable is declared within a function, then it is a function-level or local variable. If the variable is declared outside of a function, then it is considered a global variable. Global variables might be beneificial for a science-related site where users needed to use constant equations or variables. For example, you could create a variable for the numerical value of pi, or you could create a variable for the speed of light.
-
Psychology: What is the user’s motivation to be here in the first place?
a. Supporting: https://www.amazon.com/ When users are visiting amazon.com, MOST users are interested in purchasing something for delivery. Amazon does such a great job at enticing people to purchase things, by the retargeting used on your previous seraches that were not purchased. b. Violating: https://github.com/ I think that from the acutal UX of github, it's pretty unclear what the user would want to be doing. Maybe that's because it is a site made for a group of people with a certain knowledge base, but regardless, if an every day person went to look at github, I would argue that they would not know what it's main purpose or how to use it would be. -
Usability: Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
a. Supporting: https://www.centurylink.com/home/ In any site that requires a log in, we expect that form to be in the upper right area of a web page. I think it is subconsciously expected to be here. b. Violating: Blackboard.com I used this site throughout college, and I think that it is incredibly unituitive which makes usability very difficult. Simple actions like checking your grades is difficult. -
Design: Does it represent the brand? Does it all feel like the same site?
a. Supporting:https://www.chefzorbas.com/ From the color choices to the logo, this site represents itself as a greek restaurant. b. Violating: https://www.greystar.com/ ; A company I used to work with, you would never know that they own mostly senior-living buildings by their branding. -
Copywriting: Is the biggest text the most important text? Why not?
a. Supporting:https://www.zara.com/us/ The largest bit of text on the site is their logo, which I would agree is most important. The second largest would be the season's collection name, which is what they are trying to sell. So I think in terms of copywriting, that would be very important. b. Violating:https://www.facebook.com/ When you sign into your feed, it's hard to even establish what is the 'largest' text. What sticks out the most is the first name of the first person on your feed. -
Analysis: Are you using data to prove that you are right, or to learn the truth?
a. Supporting: amazon.com / the design on the home page of your amazon site probably isn't very visually appealing, but I know that it is a very effective UI. The placement of your most recent searches and how easy it is to buy them (including the single-click buy option) makes this UI exteremely effective. b. Violating:https://www.zara.com/us/en/woman-new-in-l1180.html?v1=363021 I don't think that they do any user testing at all on this site, to be honest. As a Zara customer, I've always found this UI to be very visually appealing, but not very functional, especially on the phone (which I would think effects their sales). I think that even just navigating off of the home slider is difficult.