IS117 - Final Exam Review

pdf

School

New Jersey Institute Of Technology *

*We aren’t endorsed by this school

Course

117

Subject

Information Systems

Date

Oct 30, 2023

Type

pdf

Pages

Uploaded by MagistrateComputerWallaby18

IS117 - Final Exam Review ❖ REM - font size of the element ❖ Margin, padding and border ➢ CSS elements that allow you to design ❖ What's the combinations necessary for: ➢ Padding 0.5 em 0 0.25em ➢ You read it as top, right and left (third one gets read twice), bottom ❖ What’s the formula for calculating the height of the box? ➢ Diagram in the book ➢ Add up heights of top and bottom borders, top and bottom margins, and top and bottom padding ❖ What’s a reset selector? ➢ set margins, padding, etc to 0 ❖ Border for block element ➢ Change style, width, color ❖ What if I set the background color of the page to orange, but I don’t set the section within.. ➢ Also be orange ➢ Background and section are the same color until specified ❖ Check page 205 ❖ Fluid design vs fixed design ➢ Avoid targeting particular screen sizes ➢ Want to minimize the appearance of scrollbars on smaller viewports ➢ The size of the page adjusts to the browser resolution ❖ What does z-index do? ➢ 2 objects on the screen, you can control which one lays on top of the other one ➢ Higher number z-index gets the priority over the other ❖ Absolute positioning ➢ Page 227 ➢ The browser takes the element out of the flow of the elements shown on the webpage ➢ Take it out of the flow and positions it closest to the nearest block ❖ Static Positioning ➢ HTML is static by default ➢ Nothing can be moved around ❖ Fixed positioning ➢ Ex) the .footer at the bottom of the page ➢ Position fixed locks the footer on the webpage even if you scroll

❖ UL tag ➢ Unordered list ➢ If you want to make it horizontal, you want to set the float properties of each of the LI elements to the left ➢ The default is bullet points (pg 240) ❖ Ordered list ➢ Default is numbered ❖ What’s a description list? ➢ Includes terms and descriptions ❖ What's href do for an a element? ➢ Provides the location of where it's going to go when the link is clicked ➢ Place and/or placeholder that the link goes to ➢ Placeholder on same page → # ❖ What are the best ways to test responsive design? ➢ Developer tool ➢ Also do device emulator, go through each device itself (phone, desktop, etc.) ❖ What do media queries do? ➢ Adjust the appearance of the web page to different device sizes ➢ Ex) @media only screen ■ (min-width 768 px) and (max width 990px) ■ Only works within the set range, that’s where the screen is changing ❖ Things are in relation to other parts; when one element changes, so do the rest ❖ Slick nav ➢ Mobile menu - designed for mobile ➢ Similar to bootstrap ➢ Reads your navigation, makes new negativation, turns your off when it gets to the screen size and the ❖ Different types of image files used for web ➢ Jpeg, png, gifs (moving images that repeat a certain scene, animation) ❖ Alt ➢ In case a picture is missing, it shows a descriptive text ➢ Good for the visually impaired ❖ Fig caption ➢ Adds the caption of the figure element on the screen ❖ Rollover ➢ When you roll the mouse over, the CSS is triggered, and the background picture changes when rollover occurs ➢ Ex) Shopping - shows you front of the dress and then the back, one pic is on the other is off ❖ Stop floating block elements

➢ Clear ❖ Image rollovers by using the :hover selector ➢ Changes image for div element ❖ What does an image map do? ➢ In this position on this screen in this location, there could be a picture sitting .You can set an image map and its shows what location it goes to when you click different parts of the pic ➢ Hotspots - when you make a clickable spot on a screen Questions:

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

- By default, the element in the box model is: - As tall as it needs to be for its contents - What set of css rules will make sure that the aside is to the right side of the main? - float:right - To have element A stack over another element B, you must - Use position:fixed with a A’s z-index a higher value than B’s z-index - Absolute positioning removes a block from its - Flow of elements on the page - Absolutely positioned elements are removed entirely from the document flow - Normal flow and positions it relative to the closest containing block that was positioned. - Absolute position? - When an element is positioned, its position is calculated relative to the closest positioned ancestor, which is also known as the containing block. The containing block establishes a new local coordinate system for the positioned element, and all positional properties, such as top, bottom, left, and right, are calculated relative to it. - When you set the position property for a block element to absolute, the browser - takes the element out of the flow of elements on the web page - When you used fixed positioning for a block element, you can - use the top, bottom, left, and right properties to set its position on the page - When you use fixed positioning for a block element, - Does not move in the browser window, even when you scroll - It positions the element relative to the viewport (the browser window) - By default, HTML elements use what kind of positioning - static - Which of the following pseudo class becomes active when a mouse moves over an element such as a link or an image? - :hover - You can use the CSS list-style-type property to change - The bullet or number style in an unordered or - A description list is a list that - a list of items with a description or definition of each item - The href attribute for an <a> element specifies - the page and/or placeholder that the link should go to - Which of the following are valid ways to test responsive design - Resizing the browser window - Using browser dev tools - Testing on different devices - Using online tools - Scalable images adjust to the

- scalable images adjust to the size of the container they are in without losing quality, making them a versatile and useful asset for designers and developers - the easiest way to test a responsive web design at various screen sizes is to - Use Developer tools - when you use ems or percentages to size fonts - the font size changes as the size of the font used by its parent element changes - When you use mobile-first coding for a responsive web page, you start with the CSS - @media and start with the smaller screen sizes - The command used to stop the floating of block elements is - Add the clear property to the element that needs to clear the float - Which of the following is NOT true about favicons? - Favicon typically has the extension .fav - You can use CSS to do image rollovers by using the :hover selector for a style rule that - Changes the background image for a div element - In the picture element that follows the source elements Group of answer choices - provide different images for different screen sizes - In the code that follows margin: 0 auto; the auto keyword means - o center the element horizontally within the containing block - For the following code: <body> <header><h2>Header</h2></header> <aside><h2>Aside</h2></aside> <main><h2>Main content</h2></main> <footer><h2>Footer</h2></footer> </body> What set of css rules will make sure that the aside is to the right side of the main? - main{width:600px; float:left;} - aside{width:360px; float:right;} - For the following code, What set of css rules will make sure that the aside is to the right side of the main? - - Absolute positioning removes a block from its normal flow and positions it relative to the closest containing block that was positioned. - true