What is the difference between an element and a tag? Tags are containers and tell you about the information between the opening and closing tags. An element comprises the opening and closing tags and any information that lies between the two.
Why do we use attributes in HTML elements? Attributes indicate what kind of extra information you are giving to an elements content.
Describe the purpose of the head, title, and body HTML elements. head- contains information about the page title- will appear in the title bar or tabs at the top of the browser window. body- is anything in the main browser window written within the body tags.
In your browser (Chrome), how do you view the source of a website? To view the source of the website you would hit option command i.
List five different HTML elements and what they are used for. (h1)- used for main headings (strong)- emphasize importance of content it will show the content in bold (q)- used for shorter quotes that sit within a paragraph (abbr)- used for abbreviation or acronym (address)- specific use to contain the contact details for the author of the page.
What are empty elements? Empty elements are that do not have any words between the tags. '''/br>'''
What is semantic markup? Semantic markup is provides extra information such as emphasis, quotations, abbrevations, definitons and so on.
What are three new semantic elements introduced in HTML 5? article nav footer CODE PEN LINK: https://codepen.io/patjneel87/full/xLbLvw
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? Ordered lists use numbers for the list an example would be steps for a recipe. Unordered list begin with bullepoints. and Definition lists are made up of a set of terms and their definition.What is the basic structure of an element used to link to another website? The basic structure for a link to another website is a ''' href="http://www.fis-ski.com">FIS'''
What attribute should you include in a link to open a new tab when the link is clicked? If you want your link to open in a new window youwould add the target attribute, and the value should be _blank
How do you link to a specific part of the same page? You would use the id attribute. The value of the href attribute starts with the # symbol.
What is the purpose of CSS? CSS allows you to specify how the content of an element will appear.
What does CSS stand for? What does cascading mean in this case? Cascading Style Sheets. The cascading means that you simplify the style sheets by creating generic rules that apply to most elements, and then override the properties of elements that need to be changed.
What is the basic structure of a CSS rule? Structure contains two parts the selector(indicates which element the rule applies to) and the declaration(indicates how the elements referred to in the selector should be styled). Inside the decleration is the property(indicate the aspects of the property you want to change) and the value(specify the settings you want to use for the chosen properties).
How do you link a CSS stylesheet to your HTML document? You would use the link element in your HTML document to indicate where the CSS file is located.
What is it useful to use external stylesheets as opposed to using interal CSS? Allows all pages to use same style rules. You can change the styles used across all pages by altering just one file. Keeps the content separate from how the page looks.
Describe what a color hex code is. Six digit codes that represent the amount of red, green, and blue in a color.
What are the three parts of an HSL color property? The three properties 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 catagories of font are serif, sans-serif, and monospace. Serif fonts have extra detail on the ends of the main strokes of the letters. Sans-serif have straight ends to letters. Monospace font is the same width.
When specifiying font-size, what are the main three units used? The three main units used are pixels (10px), percentages (200%), and EMS (1.3em).
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 value of the type attribute with determines what kind of input will be created.
What element is used to create a dropdown list? When creating a dropdown list the select element is used and it also contains two or more option elements.
If you're using an input element to send form data to a server, what should the type attribute be set to? If sending over form data to a server you should use the submit type attribute.
What element is used to group similar form items together? You would use the fieldset element when grouping similar form items together.
Describe the differences between border, margin, and padding. The border separates the edge of one box from another. Margin sits outside the edge of the border. Padding is the space between the border of a box and any content contained within it.
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? 1px is top, 2px is right, 5px is bottom, 10px is left.
Describe the different between block-level and inline elements. Block level elements start on a new line and act as the main building blocks of any layout. Inline elements flow between surrounding text.
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 that it positions the element in relation to the browser window as opposed to the containing element. It requires the position property to have a value of fixed. The z-index allows you to control which box appears on top.
What is the difference between a fixed and liquid layout? Fixed layouts do not change size as the user increases or decreases the size of their browser window. Liquid layouts stretch and contract as the user increases or decreases the size of their browser window.
In an image element, why is the alt attribute important? It provides a text description of the image if you cannot see it.What determines if an image element is inline or block? It depends where the image is placed. If its followed by a block level it'll start on a new line. Inline elements sit within a block level element and do not start a new line.
What are the benefits of jpg or png image file formats For pjeg it is better if the image is made up of many colors. For png if the image as exactly the same color.
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? It'll help the page load more smoothly. Also you can use CSS to control the the dimensions(if the images are all consistent).
What is an image sprite, and why is it useful? It is an image that is used for several different parts of an interface. The browser only has to request one image rather than many, which makes it load faster.
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. numbers- numeric values uses fixed numbers of bits. strings- used to represent text enclose content in quotes cannot be divide, multiplied, or subtracted. boolean- only has two values true and false.
What are the three logical operators that JavaScript supports? and, or, and not. Used to reason about Booleans and is &&, or is ||, and not is !
What is the naming convention used for variables? var it indicates that it is going to define a variable.
What is the difference between an expression and a statement? Expression is fragment of code that produces a value. Statement a program is simply a list of statements. If an expression corresponds to a sentence. Statement corresponds to a full sentence.
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? Reserved words (break,class,var,yield). Your variable definition does not work as expected.
What is control flow, and why is it useful for programming? The statements are executed from top to bottom in a linear direction.
If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console? Typing just sayHello will show you the actual function. Whereas sayHello() will show you the result of the funtion which is Hello!
What is the keyword return used for? A return keyword without an expression after it will cause the function to return undefined.
What are function parameters? Behave like regular variables, but their inital values are given by the caller of the function. Parameters are also local to the function.
What is the naming convention used for function names? Fucntions are divided into those that are called for their side effects, and those that are called for their return value.
UX is user experience. The goal of a UX designer is to make the users effective. The user always wants something. Business goals can vary, but a specific type of business is important. The five main ingredients of UX are psychology, usability, design,copywritiing, and analysis.
Psychology What is the user’s motivation to be here in the first place? Good: IMDB Imdb has the largest database for anything you could ever want to know pertaining to a person, film, tv show, etc. Or a question. Imdb is updated at an incredible rate.
Bad: CAA> CAA is ok. The site is extremely minimal you can look at careers and who to contact at their headquarters around the world. To me the site comes off a bit elitist in that I kind of feel that I shouldnt be there.
Usability Have you provided everything the user needs to know? Good: Redbull they do a great job providing content and everthing you would want to know about everything the company is involved with.
Bad: Two Brothers Brewing By no means a bad site, but it was defintitely on the minimal side as far a content goes. That could also have something to do with their small size, and limited number of resources.
Design Does it represent the brand? Does it all feel like the same site? Good: Audi I think Audi does a good job of representing throughout the website pushing their business goal of luxury cars.
Bad:CAA I already used this site as an example above, but the site is so minimal it's hard to tell what the brand represents. Maybe they're aiming for mystique? Or they're letting the everyone know they're the best? I'll hand it to them it does feel the same across the site. Mainly because the main page is the entire site.
Copywriting Does it sound confident and tell the user what to do? Good: NOAA this is current and has its facts up to date. And can direct the user if they have any questions pretaining to any environmental concerns.
Bad: Fox News I picked this site because it was filled with an overwhelming amount of information, which I guess could be said of any news outlet. Out of the other outlets I looked at this one seemed the most un conscisce with information. That could also have it being a news publication, and therefore not the best example of copywriting.
Analysis Are you using data to prove that you are right, or to learn the truth? Good: BMW does a great job showcasing the features to their electric cars. Not necessarily to prove that they're right, but how the car is better for the environment and highlights its features.
Bad: Tesla Although the site is good. I feel they could've used more data highlighting the importance of their alternative energy technologies, and how it would have a more positive effect on the planet.