-
On a website, what is the purpose of HTML code?
- Structure and presentation of the webpage.
-
What is the difference between an element and a tag?
- Elements tell the browser something about the information that sits between the opening and closing tags. Tags tell you something about the information that is between their opening and closing tags.
-
Why do we use attributes in HTML elements?
- They provide functions like modifying elements and provide functionality to certain element types unable to function correctly without them, they also provide additional info about the contents of the element.
-
Describe the purpose of the head, title, and body HTML elements.
- In HTML a head tag holds the metadata (document title, character set, styles, links, scripts), the title element declares the name or title of the document, the body element defines the main content of the document that is visible to the user.
-
In your browser (Chrome), how do you view the source of a website?
- Right click > inspect > source tab or option + command + U
-
List five different HTML elements and what they are used for. For example, p is a paragraph element and it is used to represent a paragraph of text.
- <h1-/h1> is a heading element tag which adds a header and they go 1-6, <img-/img> is an image element which is used for insereting an image, <a-/a> is an anchor element which is used for inserting a link, <div-/div> tag defines a division or section in the HTML code, <button-/button> tag adds a clickable button. Answers wouldn't show if opening or closing were correct so I changed that a bit for each element.
-
What are empty elements?
- Tags that have no data presented within them.
-
What is semantic markup?
- Provides extra information.
-
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
- header, aside, footer
CodePen link: https://codepen.io/garrett-iannuzzi/pen/vMLOYa
-
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered lists: typically numbered, uses a ol tag. Unordered lists: group together related items but not in a specific order (bullet points), uses a ul tag. A definition list is a list of terms and corresponding definitions, uses dd and dl tags.
-
What is the basic structure of an element used to link to another website?
- a href="http://google.com">Google</a, this is missing the open and closing obviously.
-
What attribute should you include in a link to open a new tab when the link is clicked?
- An anchor
-
How do you link to a specific part of the same page?
- You do not need the domain name in the URL. You can use shorthand known as relative URL. You still use the element however.
-
What is the purpose of CSS?
- Create rules that specify how the content of an element should appear.
-
What does CSS stand for? What does cascading mean in this case?
- Cascading style sheets. It means the how and where styles are written.
-
What is the basic structure of a CSS rule?
- It contains a selector and a declaration. The selector indicates which element the rule applies to. The declaration indicates how the elements referred to in the selector should be styled.
-
How do you link a CSS stylesheet to your HTML document?
- You can use a element to tell the HTML document where to find the CSS file that is used to style the page.
-
When is it useful to use external stylesheets as opposed to using internal CSS?
- It is useful to use external stylesheets when you are building a site with more than 1 page. This allows you to use the same style rules. It also keeps content separate from how the page looks. You can change the styles used across all pages by altering just one file.
-
Describe what a color hex code is.
- A six-digit code that represents the amount of red, green, and blue in a color, preceded by a pound or hash sign.
-
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 which have extra details on the ends of the main strokes of the letters. Sans-serif which have syright ends to the letters and therefore have a cleaner design. Lastly, monospace, every letter font is the same width.
-
When specifying 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?
- action= " "
-
What element is used to create a dropdown list?
- select
-
If you're using an input element to send form data to a server, what should the type attribute be set to?
- input type= submit
-
What element is used to group similar form items together?
- fieldset
Chapters 13 & 15
-
Describe the differences between border, margin, and padding.
- The border separates the edge of one box from another. The Margins sit outside of the border. The padding is the space between the border of a box and any contained within it.
-
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- Clockwise order, top, right, bottom, left
-
Describe the difference between block-level and inline elements.
- Block level elements start on a new line (h, ul, li). Inline elements flow in between surrounding text(img, b, i).
-
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- Fix positioning will position the element in relation to the browser window and not the containing element. Any element that is fixed will not affect the position of surrounding elements. Z-index is important because it can allow you to control which box appears on top, this allows you to fix any problems from overlapping boxes.
-
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. With a liquid layout it will stretch and contract as the user increases or decreases their browser window.
-
In an image element, why is the alt attribute important?
- It provides a text description of the image which describes the image if you can't see it.
-
What determines if an image element is inline or block?
- Block elements always appear on a new line, inline elements sit within a block level element and do NOT start on a new line.
-
What are the benefits of jpg or png image file formats?
- Most websites use these formats, within these two options you can base your choices on the amounts of colors int he photo. The more color use a jpg, if the image has a lot of the same color go with png.
-
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- Whenever you use consistently sized images across a site you can use CCS to control the dimensions of the images, instead of putting the dimensions into HTML. Where the images appear in HTML you can just use the name values of large, medium, or small instead of using height and width.
-
What is an image sprite, and why is it useful?
- When a single image is used for several different parts of an interface. They are useful because the web browser only needs to request one image rather than many images.
-
How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
- By using var (variable keyword) + the variable name then a ;. In JavaScript the equals sign really means assignment operator which assigns a value to the variable.
-
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numbers: the numeric data type that handles numbers, used for tasks that involve counting, determining the size of the screen, and you do not use commas. Strings: data that consists of letters and other characters, they are enclosed in quotes which can be single or double but must match, can be used when working with any kind of text, and frequently used to add new content to a page. Booleans: data types that can have one of two values which are true or false.
-
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 a letter,
$, or _ and it must NOT start with a number. The name can contain letters, numbers, $ , or must not use a dash or period in a variable name. You can NOT use keywords or reserved words. All variables are case sensitive (ex: score v Score, it is also bad practice to create two variables that have the same name but different cases). You should use a name that describes the kind of information that the variable stores. Lastly if your variable name is made up of more than one word use a capital letter for the first letter of every word after the first word.
- Must start with a letter,
-
How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
- This can be helpful when working with lists or sets of values that are related to each other because you do not need to specify how many values it will hold. To access the values in the array you must specify the array name along with the index number in square brackets. To change the value of an item in an array you can select it and assign it a new value just like any other variable.
-
What is the difference between an expression and a statement?
- An expression evaluates into a single value where a statement expresses some action to be carried out.
-
What are three types of operators and how are they used?
- Assignment operators: assign a value to a variable. Arithmetic operators: perform basic math. String operators: combine two strings.
-
If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
- With sayHello() you are indicating what information the function needs to work.
-
What is the difference between function parameters and arguments?
- Function parameters are words that act as variables when defining a function and arguments are words that can act like variables when calling a function.
-
What is the keyword return used for?
- 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?
- Local variables are created inside a function using the var keyword, it can only be used inside that function, a global variable is created outside of a function, it can be used anywhere within the script, global variables also use more memory but can come in handy when multiple functions need to access the data or write to an object.
- 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.
- Psy: How are you rewarding good behavior? https://www.instagram.com/ is a great example of how you are rewarded for good behavior, you like things and post and people do the same for you which feels good so you come back. On the other hand a site like www.wikipida.com doesn't really reward you for good behavior, you can find your answer but there is no reward system.
- Usability: Are you being clear and direct, or is this a little too clever? www.google.com is a great example of being clear and direct. One search box, type in it, and bam, results. My example for a site that is not clear would be any government website....you name it, any of them, too many links, fine print, takes you in circles, not user friendly at all.
- Design: Does it communicate the purpose and function without words? www.expedia.com is as good example of design, on the home page your eye is drawn to the different search boxes, each box clearly states what type of search it would be, boat, hotel, flight, etc.. you know right away where to click for what your looking for, very easy. Something like http://www.roverp6cars.com/ I have no idea what to do here...
- Copywriting: Does it reduce anxiety? https://www.inspirato.com/ reduces my stress level right away with a soothing video and not much going happening on the screen. The links are simple and the images are very nice. An example of something that will increase my anxiety is http://www.arngren.net, this does not motivate me, this does not inform me of anything, at least I think, just overall not very good.
- Analysis: Are you looking for subjective opinions or objective facts? Amazon does a great job of using data from reviews and putting in into a ratings system for perspective buyers. These opinions are subjective and they allow you read the review yourself and you can decide if it's legit or not. http://paradisewithaview.com/ has no place to leave a review or see any past experience from a buyer.