Web Dev

Ace your homework & exams now with Quizwiz!

What is the purpose of the margin property in the div selector? Choose one -It sets the space outside the border of the div element. -It sets the space between the content of the div element and its border. -It sets the width of the border around the div element. -It sets the height of the div element.

"It sets the space outside the border of the div element." The margin property controls the space around the outside of an element, creating space between the element and its surrounding elements or the boundaries of its containing element. It does not affect the element's border, content, or height directly. Instead, it defines the spacing around the element, which can be used to create margins between elements on a web page. Sure, let's use a box analogy to explain the margin property: Imagine you have a cardboard box, which represents an HTML element like a <div>. Inside this box, you have some content, like books. The box has a border that separates its contents from the outside world. Now, the margin is like the empty space around the box. Content: This is the actual stuff inside the box (e.g., books). Padding: Padding is like a protective layer inside the box, between the content and the box's walls. It adds space between the content and the box. Border: The border is the outermost boundary of the box, separating it from other boxes or elements. Margin: The margin is the empty space outside the box, creating a gap between this box and any neighboring boxes or elements. It's like the clear area around the box where you wouldn't put any other items. So, in CSS, when you set the margin property for a <div>, you're determining how much empty space (the margin) should be around the outside of the box, keeping it separated from other elements on the web page.

Which of the following is an approach to design the desktop website first and modify the design to fit smaller screens. Scaling Design progressive enhancement Responsive Design graceful degradation

"graceful degradation." This approach involves designing a website for a larger screen (like a desktop) and then making adjustments to ensure it functions properly and looks good on smaller screens (like mobile devices).

Regarding a URL, what is a Query String? choose 1 --Optional characters to the right of the question mark (?) in a URL that provide data for the web server. --Characters at the beginning of a URL followed by a colon (:) or a colon and double slashes (://). --Optional characters at the end of a URL that start with a hash symbol (#) and refer to a certain location within a webpage. --The characters to the right of the hostname in a URL. --The complete domain name following the scheme in a URL.

--Optional characters to the right of the question mark (?) in a URL that provide data for the web server.

How do you add a new property? -using rules view of devtools, you can click the closing curly brace in the rule to start entering a new declaration into it -you can choose to View Source of a webpage and add new properties into your Notepad -you may not add a new property -you must contact the web developer and submit a request to add a new property

-using rules view of devtools, you can click the closing curly brace in the rule to start entering a new declaration

Select the containers from the following HTML elements. <footer>...</footer> <header>...</header> <section>...</section> <span>...</span> <br> <img>

1-4 In HTML and CSS, a "container" is a commonly used term to describe an element or component that wraps and contains other elements or content. Containers are used to group and organize content on a web page, and they often play a crucial role in structuring the layout and design of a website. The <span> element is often considered a container, but it's a bit different from other containers like <div> or <section>. While it doesn't have any inherent structural or semantic meaning, it is a generic inline container that allows you to apply styling or manipulate text content within it.

explain the difference of 2D transforms vs 3D

2D transformations can only rotate like a piece of paper. 3D is like a spinning fast food sign.

Of the following, select all valid pseudo-class selector examples. :hover :lang(language) .bold-red alt :empty :enabled

:empty: Valid. This pseudo-class selects elements that have no children (including text nodes) and no content, such as empty <div> or <span> elements. :enabled: Valid. This pseudo-class selects form elements (like <input>, <button>, etc.) that are enabled and can be interacted with. :hover: Valid. This pseudo-class selects elements that the user's mouse pointer is currently hovering over. It is commonly used for styling elements when they are being interacted with. :lang(language): Valid. This pseudo-class selects elements that match a specific language (e.g., :lang(en) for English). It's used to style elements based on their language.

Which of the following are examples of empty, or void, element tags? Select all that apply. <br> <hr> <img...> <meta> <div>...</div> <h1>...</h1>

<br> <hr> <img...> <meta> Empty or void elements in HTML are elements that don't have any content between opening and closing tags because they don't need it. These elements typically stand alone and don't enclose other content. They are self-contained and serve specific purposes. Also they dont have closing tags Common examples of empty or void elements include: <br> (line break): It's used to create a line break or vertical space between elements. <hr> (horizontal rule): It creates a thematic break or horizontal line in a document. <img> (image): This is used to display images, and it includes attributes like src and alt to define the image source and alternative text. <meta>: It provides metadata about the HTML document, such as character encoding and author information. These elements don't require a closing tag because they don't contain any content within themselves. They are self-contained and serve their purposes with their attributes and placement in the document structure.

Use the given text to answer the following question: The weather is hot. Which code snippets can be used to increase the weight of the text's font to indicate that it is important?Choose 2 answers. <p><strong>The weather is hot.</strong> </p> <p><em>The weather is hot.</em></p> <p><i>The weather is hot.</i></p> <p><mark>The weather is hot.</mark></p> <p><b>The weather is hot.</b></p>

<p><b>The weather is hot.</b></p> <p><strong>The weather is hot.</strong> yes em indicates importance but It's used for defining font size in a relative manner. When you use em for font size, it's relative to the font size of the parent element. For example, if the parent element has a font size of 16 pixels, setting a child element's font size to 1em will make it the same size as the parent, i.e., 16 pixels.

True or false? A boolean attribute is false when present and true when absent.

A boolean attribute in HTML is an attribute that doesn't require a value. It's used to represent a true or false condition. When the attribute is present on an element, it's considered to be "true" or "on." When the attribute is absent, it's considered "false" or "off." in short true is on, false isnt

Which indicator is used to signify that files are successfully mapped to files on a disk?

A little green dot over the icon of the open file in the Sources panel.

XML simplifies the coding process regarding which of the following? Select all that apply. Data Availability Data Sharing Data Transport Platform Changes

ALL XML and HTML were designed with different goals: XML was designed to carry data - with focus on what data is. HTML was designed to display data - with focus on how data looks. XML tags are not predefined like HTML tags are Data Sharing: XML provides a structured way to represent and exchange data between different systems and platforms. It simplifies the process of sharing data between applications, regardless of the technology stack they use. Data Transport: XML can be used to format data for transmission over networks. It's often used in web services, APIs, and data interchange formats to transport data between clients and servers. Platform Changes: XML helps abstract data from the underlying platform or technology. This makes it easier to adapt and migrate data between different systems and platforms, reducing the impact of platform changes. Data Availability: it can indirectly contribute to data availability by enabling standardized data representation and sharing.

Which CSS position property value positions an element relative to the nearest positioned ancestor? absolute fixed relative static

Absolute remember the difference of the absolute in the relative <div> <div style="position: absolute; top: 0; left: 0;">Absolutely positioned but is completely free</div> </div> <div style="position: relative; top: -1; right: 5;"> <div>Not positioned</div> <div style="position: absolute; top: 0; left: 0;">Absolutely positioned but in a relative now isnt completely free</div> </div>

Explain why you would use an absolute link over a relative and vice versa.

Absolute links are typically used for external websites or when you need to provide a full URL to a specific resource. Relative links are commonly used within a website's own pages to connect them or link to local resources because they adapt to changes in your website's structure more seamlessly. This makes them a preferred choice for internal navigation within your website. Generally try to use relative over absolute

explain block level element vs an inline

An inline element does not start on a new line. An inline element only takes up as much width as necessary. A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). Two commonly used block elements are: <p> and <div> .

Which pair of characteristics is true of XML? Case sensitive and allows errors Case sensitive and disallows errors Case insensitive and allows errors Case insensitive and disallows errors

Case sensitive and disallows errors same as html5

How can you determine whether an anchor tag is being overwritten?

Check the Rules Tab for what is overwriting it, or the Elements Tab for which element exists where it should be.

Describe when you should use a class or id? What is each better suited for?

Classes: Classes are typically used when you want to style multiple elements in the same way. You can apply the same class to multiple HTML elements. For example, if you have multiple paragraphs that should have the same text color, IDs: IDs, on the other hand, are used when you need to uniquely identify a specific element on a page. IDs should be unique within the document; each element can have only one ID. IDs are often used for elements that you want to apply unique styles or JavaScript functionality to. Classes are for multiple elements that share the same styles. IDs are for uniquely identifying a single element. Remember that while it's technically possible to use IDs for styling multiple elements, it's generally better practice to use classes for such cases to promote reusability and maintainability in your code.

What keyboard shortcuts can be used within the elements panel?

Ctrl+F to search through elements

How can you open the Chrome DevTools commandment menu?

Ctrl+Shift+P while DevTools is open

Which devtools panel shows how the DOM currently looks in the web page? the Elements panel the Console panel the Network panel the Source panel

ELEMENTS PANEL The "Elements" panel in Chrome DevTools is specifically designed for inspecting and manipulating the Document Object Model (DOM) of a web page. It allows developers to view the HTML structure of the page, including the hierarchy of elements and their attributes. You can also use this panel to make real-time changes to the DOM, which can be useful for debugging and testing. The "Console" panel, on the other hand, is primarily used for debugging JavaScript and displaying console messages. The "Network" panel is for monitoring network requests, and the "Source" panel is used for debugging JavaScript source code.

Which DevTools panel shows how the DOM currently looks in the web page?

Elements (Open by default)

True or false? Phone numbers and addresses are typically of equal importance to desktop and mobile website users. False True

FALSE Phone numbers and addresses may have different levels of importance to desktop and mobile website users. For example, mobile users may find phone numbers more critical because they can tap to call directly from their devices. On the other hand, desktop users might prioritize address information for finding physical locations.

T or F animation-timing-function: ease, means the animation will only have a slow start

FALSE Specifies an animation with a slow start, then fast, then end slowly (this is default)

True or false? An HTML tag class attribute specifies the classes to which the tag belongs, with each class name separated by a comma (,).

FALSE An HTML tag's class attribute specifies the classes to which the tag belongs, but the class names are separated by space characters, not commas. For example: <div class="class1 class2 class3">This is a div element with multiple classes.</div>

True or false? The web browser will always create a new window for hyperlinks whose target attribute is _blank.

FALSE unless settings are changed it opens in a new TAB mot window

This is a small icon that identifies a website and typically displays in a browser tab. favicon <img...> anchor GIF

FAVICON The correct term for a small icon that identifies a website and typically displays in a browser tab is "favicon." It's often represented as a small image file, usually in the ICO, PNG, or GIF format, and is specified in the HTML using a <link> element in the head of a web page. This allows browsers to display the favicon in their tabs when the website is opened. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Website</title>  <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body>  </body> </html>

True or false? The text-shadow offset-x and offset-y must be a non-zero value.

False. The text-shadow property in CSS allows you to add a shadow to text, and you can specify offset-x and offset-y values, but they don't have to be non-zero. You can use zero values for offset-x and offset-y if you want the shadow to be directly behind the text. Here's an example: text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

An <option>...</option> element must have a value attribute.

False. While it's a good practice to give an <option> element a value attribute, it's not required. If you don't provide a value attribute, the content of the <option> element will be used as the value by default. However, specifying a value attribute is helpful when you want to assign a specific value to the option that's different from its visible text. <select> <option>Option 1</option> </select> vs <option value="apple">Apple</option>

True or false? Good practice is to use the <br>, or line break, element to add space or control formatting of a webpage.

False: For layout and spacing purposes, it's better to use CSS properties such as margin, padding, and line-height, as well as HTML elements like <div> and <p> to structure your content. These provide more control and maintain cleaner and more maintainable code. The <br> element should generally be reserved for situations where you need to break text onto a new line within a paragraph or similar text-based contexts.

T or F? HTML preserves whitespace and XML does not.

HTML does not preserve white spaces, but XML can preserve them. try to remember xml is more free and HTML is more strict. So html doesnt preserve white spaces

Explain what an html entity is

HTML entities are a way to represent characters and symbols that might not be directly accessible or easily typed on a keyboard. They are especially useful when you need to include special characters, symbols, or non-standard characters in your HTML documents. For example, ¥ represents the yen symbol (¥), and € represents the euro symbol (€). This allows you to ensure that these characters display correctly in web content, regardless of the user's device or system settings.

What indicates if a particular rule is applied to a web page?

If the line is green next to the rule when you open the CSS file

T or F using the <caption> tag in a <table> tag will always put the caption at the top of the table. regardless of where in the <table> it is located

If you simply use the <caption> tag within an HTML <table> element without applying any specific CSS styles, the caption will be placed at the top of the table by default. The order of placement within the HTML code won't change this default behavior; the caption will still appear above the table's content.

explain the difference. p:first-child vs p>first-child

Imagine you have a classroom with students and each student represents an HTML element. The teacher (parent element) is represented by a <p> element. p:first-child is like the teacher saying, "I want to see the first student in my class who is also a student." In this case, the teacher only cares about students who are the first in line and happen to be students (in our analogy, this would be the first child who is also a <p> element). p > :first-child is like the teacher saying, "I want to see the first student in my class, no matter what kind of student they are." In this case, the teacher doesn't care if it's the first student in line and that student can be any type of student (in our analogy, it doesn't have to be a <p> element). So, p:first-child is picky and only wants the first child who is also a <p> element, while p > :first-child just wants the first child, no matter what type of student (element) it is.

What can you use to determine how much of a CSS file is used by a web page?

In DevTools, open "More Tools -> Coverage" and it will give a graph of how much of a CSS file is actually applied currently.

explain the difference or src="paper.gif" vs url(paper.gif)

In summary, src="paper.gif" is used in HTML elements to directly embed media content, while url(paper.gif) is used in CSS stylesheets to reference external resources for styling purposes. They are used in different contexts and play distinct roles in web development. url to be used in the styling of web elements src for directly embedded media

Explain what an expression is.

In the context of media queries or programming in general, an "expression" refers to a combination of values, operators, and functions that are used to evaluate a condition or set a property dynamically. In media queries, expressions are used to define the conditions under which a set of styles or rules should be applied based on the characteristics of the user's device or the media type. In this expression, (max-width: 768px) is evaluating whether the maximum viewport width is 768 pixels or less. If the condition is met, the styles within the media query block will be applied. If not, those styles won't be applied.

Which technique for implementing CSS in an HTML file is used for page-level style declarations? Internal CSS External CSS Style attribute Link tag

Internal CSS. This is done by including CSS rules within a <style> element in the HTML file itself. These rules apply to the specific HTML page where they are defined. External CSS: External CSS is used to link an external CSS file to an HTML document. It allows for consistent styling across multiple web pages but is not specific to page-level style declarations. It's more for global or site-wide styling. Style Attribute: The style attribute is used to apply inline styles directly to individual HTML elements. This allows you to define styles on a per-element basis, but it's not typically used for page-level styles. Link Tag: The <link> tag is used to link an external CSS file to an HTML document. It's also not specific to page-level styles; it's more about linking to external stylesheets.

what does border collapse do in a table?

Makes the border only have 1 line. Default usually have double lines. table, th, td {border: 1px solid black; border-collapse: collapse; }

Is there a media type that specifically targets mobile devices?

Must media queries have at least one expression after the media type? No Yes

NO Media queries give developers the ability to apply specific styles or formatting based on the characteristics of the user's device or media type. /* Styles for all devices */ body { background-color: lightblue; } /* Media query without expressions */ @media only screen { body { background-color: lightcoral; } } In this example, the initial body background color is set to "lightblue," but within the media query, it's changed to "lightcoral" for all screen devices.

Which image file format supports transparency? JPEG TIFF BMP PNG

PNG (Portable Network Graphics): Transparency: PNG supports transparency, making it ideal for images with transparent backgrounds. JPEG (Joint Photographic Experts Group): doesn't support transparency; it's not suitable for images with transparent backgrounds.

Describe what is an svg and how you use it

SVG is used for creating two-dimensional vector graphics, such as shapes, lines, text, and more. Unlike raster images like JPEG or PNG, SVG images are resolution-independent, which means they can be scaled to any size without losing quality. SVGs are often used for creating icons, logos, charts, maps, and other graphical elements on websites. <h1>SVG Example</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

What are Semantic Elements?

Semantic elements = elements with a meaning in its name. A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

What is a mandatory attribute that specifies the URL of an image file to display? src alt anchor href

So, "src" is used for images and other resources embedded within the page, while "href" is used for hyperlinks and navigation. The choice of attribute depends on the specific HTML element and its purpose. The attribute "href" is used in anchor (<a>) elements to specify the destination of a hyperlink, typically for navigating to another web page or resource.

Explain how margins, padding, border, and content is like a box

Sure, let's use a box analogy to explain the margin property: Imagine you have a cardboard box, which represents an HTML element like a <div>. Inside this box, you have some content, like books. The box has a border that separates its contents from the outside world. Now, the margin is like the empty space around the box. Content: This is the actual stuff inside the box (e.g., books). Padding: Padding is like a protective layer inside the box, between the content and the box's walls. It adds space between the content and the box. Border: The border is the outermost boundary of the box, separating it from other boxes or elements. Margin: The margin is the empty space outside the box, creating a gap between this box and any neighboring boxes or elements. It's like the clear area around the box where you wouldn't put any other items. So, in CSS, when you set the margin property for a <div>, you're determining how much empty space (the margin) should be around the outside of the box, keeping it separated from other elements on the web page.

Place these in order padding, margins, content, border

True or false? The use of self-closing element tags in most cases, should be avoided.

TRUE not always since things like the img tag are self closing. However, for elements like <div> or <p>, you should not use self-closing tags because they are block-level elements that require opening and closing tags or they will not work.

What is the rules view? -a devtools view where you should be able to see the CSS properties and values applied to an HTML element -a devtools feature that allows you to make data validation rules to apply to HTML elements -devtools view that displays a ruler along the X and Y axis of a webpage for element measurements -a W3C webpage that lists all of the web development rules currently in effect

The "Rules" view in browser developer tools displays the CSS rules and properties that are applied to an HTML element, allowing developers to inspect and modify the styles applied to the element.

What does the cite tag do and is it a semantic element?

The <cite> tag in HTML is semantic and used to define the title of a creative work, such as a book, movie, song, or a published article. It is typically used to mark up the title of the work, and it can also be used for the name of the author or the source from which the work is taken. For example: <p>In his famous speech, Martin Luther King Jr. said, <q>Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that.</q> (<cite>"Strength to Love"</cite>)</p> In this example, the <q> tag is used to mark the quotation, and the <cite> tag is used to indicate the source of the quotation, which is the book "Strength to Love" written by Martin Luther King Jr. The <cite> tag provides semantic meaning to the source reference.

A website developer needs to use a tag that does not apply a default format or style. Which tag should the developer use? <ul> <h1> <a> <div>

The <div> tag is a generic block-level container that does not have any inherent formatting or styling by default. Developers often use it as a layout and structuring element, and it does not introduce any default styling, allowing you to apply custom styles via CSS as needed. <ul> (Unordered List): The <ul> element is used to create unordered lists, such as bulleted lists. It inherently applies default list styling, including bullet points, which means it doesn't meet the requirement of not applying default formatting. <h1> (Heading 1): The <h1> element is used to create a top-level heading on a page. Headings have default font sizes, styles, and margins associated with them. Using an <h1> tag would apply default formatting to the text. <a> (Anchor): The <a> element is used to create hyperlinks, and it applies default styling, such as underlining, to linked text. It's not a tag that avoids applying default styles.

What are the <fieldset> and <legend> elements?

The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.

explain form and input, what are the five input types?

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. <input type="text">Displays a single-line text input field <input type="radio">Displays a radio button (for selecting one of many choices) <input type="checkbox">Displays a checkbox (for selecting zero or more of many choices) <input type="submit">Displays a submit button (for submitting the form) <input type="button">Displays a clickable button

what does the <pre> tag do?

The <pre> tag in HTML stands for "preformatted text." It is used to display text in a fixed-width or monospaced font, where spaces and line breaks are preserved exactly as they appear in the HTML code. This is useful for displaying text that needs to maintain its formatting, such as code snippets, poetry, or ASCII art. so if you had <pre>This is a sentence </pre> it will look exactly like that in the real website. without it would look like a normal "this is a sentence" without the quotes obviously

Define the <span> tag

The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

The title tag should ALWAYS be placed in the head or header, why?

The <title> tag in HTML is used to define the title of the webpage, which is typically displayed in the browser's title bar or tab. It should be placed within the <head> section of your HTML document. The text inside the <title> tag won't be visible on the actual webpage but is important for search engine optimization and providing a descriptive title for the page. Use a header tag like h1 for a "title" at the top of a website

The child selector, specified by using what symbol between two selectors, matches any elements where the second element is a direct child of the first element? > : < ~

The > symbol is used as the child selector in CSS because it specifically targets elements that are direct children of another element. This means it only selects elements that are one level deep within the hierarchy, directly nested within the parent element. Child Selector (>): Imagine you have a family tree with generations: grandparents, parents, and children. The child selector (>) is like saying, "I want to select all the kids who are direct children of a specific parent." In this case, you're only interested in the children who are one generation below their parents. You don't care about the cousins or other relatives who might be in different generations. Analogous Example: Selecting all the children (sons and daughters) who are direct offspring of a specific parent in a family tree. General Sibling Combinator (~): Now, let's consider the broader family tree again with grandparents, parents, and children. The general sibling combinator (~) is like saying, "I want to select all relatives who share the same parents, regardless of their specific generation." You're not limited to selecting only direct siblings; you can pick any relatives who are part of the same family branch. Analogous Example: Selecting all relatives (cousins, siblings, etc.) who have the same set of grandparents, regardless of their generation within the family tree. In CSS, the child selector (>) targets immediate children, while the general sibling combinator (~) selects siblings at the same hierarchical level, regardless of whether they are direct children or not. The choice depends on your specific styling needs, similar to how you might select family members based on their relationships within a family tree.

what does the <canvas> do, is it an element, and is it html or css?

The HTML <canvas> element is used to draw graphics on a web page.

Which HTML element is a generic element for creating inline containers to facilitate managing content on a webpage. This element has no semantic meaning. <span>...</span> <div>...</div> <h1>...</h1> <meta>

The HTML element that is a generic element for creating inline containers with no semantic meaning is the <span>...</span> element. so its like having something in a box. but the something is covered in a plastic that you can draw on or style with out messing up the real thing

Which pane displays where CSS styles are being applied to an element?

The Rules Tab

Which Firefox Developer Tools tab is used to view and edit cookies on a site? Console Storage Network Performance

The Storage tab is the correct answer because it is specifically designed for managing and inspecting web storage, including cookies. In this tab, you can view and edit cookies associated with the website you are inspecting. It provides a convenient interface for inspecting and modifying the cookies used by the site. remember that cookies are a stored info. Console is used for logging and debugging JavaScript and does not directly handle cookies. Network is used for monitoring network activity, such as requests and responses, but it doesn't focus on managing cookies. Performance is used for analyzing web page performance and does not deal with cookies either.

Describe what an xml parser is and how its different from an Document object module.

The XML DOM (Document Object Model) defines the properties and methods for accessing and editing XML. However, before an XML document can be accessed, it must be loaded into an XML DOM object. All modern browsers have a built-in XML parser that can convert text into an XML DOM object. An XML parser is like a guide that helps the machine (your program) understand the structure and content of the XML document. It helps your program read and interpret the data but doesn't allow you to make changes to the original XML document itself.

What is the XML equivalent to the HTML Doctype declaration? The XML prolog The XML attribute The XML entry The XML root

The XML prolog: This line is called the XML prolog: <?xml version="1.0" encoding="UTF-8"?> The XML prolog is optional. If it exists, it must come first in the document. The XML prolog typically appears at the beginning of an XML document and contains information about the XML version being used and the character encoding, if applicable. It is not equivalent to the HTML Doctype declaration in terms of specifying the document type or DTD (Document Type Definition) as in HTML.

Explain animation-direction property

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The animation-direction property can have the following values: normal - The animation is played as normal (forwards). This is default reverse - The animation is played in reverse direction (backwards) alternate - The animation is played forwards first, then backwards alternate-reverse - The animation is played backwards first, then forwards

Explain animation-timing-function

The animation-timing-function property specifies the speed curve of the animation. The animation-timing-function property can have the following values: ease - Specifies an animation with a slow start, then fast, then end slowly (this is default) linear - Specifies an animation with the same speed from start to end ease-in - Specifies an animation with a slow start ease-out - Specifies an animation with a slow end ease-in-out - Specifies an animation with a slow start and end cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

Which attribute inside the <label>...</label> element is used to associate the label with a widget? for id name

The attribute inside the <label>...</label> element that is used to associate the label with a widget (typically an <input> element) is the "for" attribute. The "for" attribute specifies which form element the label is bound to by matching the element's "id" attribute. This association helps improve accessibility and user experience on web forms. Here's how it works: 1.) You create an input element with a unique ID: <input type="checkbox" id="box1"> 2.) You create a <label> element and specify the for attribute with the same ID as the associated input: <label for="box1">Checkbox 1</label>

Select all applicable properties to be used with the box-shadow CSS property. blur-radius color inset offset-x offset-y spread-radius

The box-shadow CSS property can be used with the following properties: offset-x: Specifies the horizontal offset of the shadow. offset-y: Specifies the vertical offset of the shadow. blur-radius: Specifies the blur radius of the shadow. spread-radius: Specifies the size of the shadow. color: Specifies the color of the shadow. inset: Specifies that the shadow should be an inset shadow.

Which of the following is the definition of a CSS selector? choose from these 3 1.)The HTML elements to which the specific style rule applies 2.)A CSS property followed by a colon (:) and the property value 3.)One or more declarations separated by semicolons (;)

The definition of a CSS selector is: The HTML elements to which the specific style rule applies. A CSS selector is used to target and select specific HTML elements to apply styling rules to them. It determines which elements on a web page will be affected by the CSS declarations (properties and values) associated with the selector.

What is the purpose of the alt attribute in the img element? choose one -It specifies alternative text to be displayed if the image cannot be loaded. -It specifies the source of the image. -It specifies the size of the image. -It specifies the title of the image.

The purpose of the alt attribute in the <img> element is to specify alternative text to be displayed if the image cannot be loaded. This text is important for accessibility because it provides a description of the image for users who may have visual impairments or for situations where the image cannot be displayed, such as slow network connections or disabled image loading. This alternative text helps these users understand the content and context of the image. IF THE IMAGE CAN LOAD THE ALT ISNT ABLE TO BE SEEN BY THE VIEWER!!

What is a root folder for a website?

The root folder for a website is the top level folder seen within the "Sources" panel displaying what files have been accessed to generate the page.

What are the 5 levels of Specificity hierarchy in order from most important first to least important.

There is one exception to this rule: if you use the !important rule, it will even override inline styles! Inline styles - Example: <h1 style="color: pink;"> IDs - Example: #navbar Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href] Elements and pseudo-elements - Example: h1, ::before

How can you open the Chrome devtools commandment menu? 1.) by clicking the menu button on the top right of the devtools window 2.) by double-clicking the Back button within the Chrome browser window 3.) by right-clicking the Home button within the Chrome browser window 4.) by right-clicking the menu button on the top right of the Chrome browser window

To open the Chrome DevTools Command Menu, you can use option 1: by clicking the menu button on the top right of the DevTools window. This will open a menu where you can search for and execute various DevTools commands.

True or false? The use of self-closing element tags should be avoided.

True

True or false? The CSS property appearance is used to control a widget appearance based on the operating system theme. Setting appearance to none hides the widget.

True The appearance CSS property is used to control the rendering of form elements and widgets in a way that matches the user's operating system theme. By setting appearance to none, you are essentially telling the browser to hide the default styling of the widget and allow you to style it completely according to your own CSS rules. If it isnt set to none the default browser themes maybe override the css styles youve made <html> <head> <style> .custom-button { appearance: none; background-color: blue; color: white; border: 2px solid black; padding: 10px 20px; cursor: pointer; } </style>

T or F ease-in-out - Specifies an animation with a slow start and end

True ease-in-out - Specifies an animation with a slow start and end

True or false? A breakpoint is the screen width that activates a media query.

True. A breakpoint is indeed the screen width (or other media features) at which a media query is activated. Media queries are used in responsive web design to apply different styles or layouts based on the characteristics of the user's device, such as screen width or height. In a media query, when you specify a breakpoint at 600px, it means that any CSS styles defined within that media query will be applied to screens with a width of 600 pixels or less. Screens wider than 600px won't be affected by the styles within that specific media query;

True or false? Developer guidelines suggest that you should always provide labels and/or placeholders for widgets.

True. Developer guidelines and best practices recommend providing labels and placeholders for form input elements, such as text fields and checkboxes. Labels help users understand the purpose of each input field, and placeholders provide additional context or examples for what should be entered. These accessibility features improve the user experience and make forms more user-friendly. Providing labels is especially important for screen readers and assists in proper form validation.

True or False? HTML comments can be used to disable code to see how a page will appear without a particular markup element.

True. HTML comments can be used to temporarily disable code or markup elements to see how a page will appear without them. This can be helpful for testing or troubleshooting web pages. Comments are not displayed in the browser and do not affect the rendering of the page. They are enclosed within  and anything between these delimiters is treated as a comment and ignored by the browser. example: <p>This is a visible paragraph.</p>

True or false? JavaScript does not run as quickly on a mobile web browser.

True. JavaScript performance can vary between different devices and browsers. Mobile devices, especially older or less powerful ones, may not execute JavaScript as quickly as desktop computers.

True or false? XML documents must contain one root element that is the parent of all other elements.

True. XML documents must contain one root element that is the parent of all other elements. This root element encapsulates the entire structure of the XML document. Each XML document should have a single, top-level element that serves as the container for all other elements within the document. This is a fundamental requirement of XML's hierarchical structure. Yes, you can think of the root element in an XML document like the <body> element in an HTML5 document. Just as the <body> element contains all the visible content of an HTML page, the root element in an XML document contains all the structured data within that document. It's the top-level element that encapsulates everything else.

explain what animation-fill-mode does

animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)

Which CSS property controls the speed of an animation between keyframes? animation-timing-function animation-delay animation-duration animation-function

animation-timing-function The CSS property that controls the speed of an animation between keyframes is animation-timing-function. It defines the pacing of the animation, specifying how intermediate property values are calculated over the duration of the animation. Common values for animation-timing-function include "ease," "linear," "ease-in," "ease-out," and "ease-in-out," among others, which determine the acceleration and deceleration of the animation. So, while animation-duration specifies how long the animation lasts, animation-timing-function defines how it progresses over that duration, allowing you to create different types of animations with varying speeds and easing effects.

An inline style uses curly braces ({}). False True

false An inline style does not use curly braces {}. Inline styles are applied directly to individual HTML elements using the style attribute, and they do not require curly braces. Here's an example of an inline style: <p style="color: blue; font-size: 16px;">This is blue text with font size of 16px.</p>

True or false? If animation-duration is assigned the value 0s, the animation occurs very quickly. False True

false If the animation-duration property is assigned the value 0s, it means that the animation has a duration of 0 seconds, effectively making it instantaneous. So, in this case, the animation doesn't occur at all or happens so quickly that it's not perceptible.

True or false? A flex item is a parent element of a flex container that is positioned and sized according to various CSS flexbox properties. False True

false In the context of CSS flexbox, this statement is incorrect. A flex item is an element within a flex container that is positioned and sized according to various CSS flexbox properties. Flex containers are the parent elements that control the layout of their child flex items. Flex items themselves are the children of the flex container and are positioned and sized based on the flex container's rules. So, to clarify: Flex Container: The parent element with the display: flex or display: inline-flex property applied. It defines the flex formatting context and controls the layout of its child elements (flex items). Flex Item: The child element of a flex container, which can be positioned and sized within the container using flexbox properties. Therefore, the statement should be "A flex item is a child element of a flex container that is positioned and sized according to various CSS flexbox properties," which is true.

Which CSS shorthand property can be used to specify flex-grow, flex-shrink, and flex-basis together. flex flex-basis flex-grow flex-wrap

flex. It allows you to set these three properties in a single declaration. For example: flex: 1 1 200px; In this example, 1 represents flex-grow, 1 represents flex-shrink, and 200px represents flex-basis. So, using this shorthand, you're telling the boxes to grow and shrink at the same rate, sharing the available space equally, and they prefer to be at least 200px wide. If you imagine these boxes as siblings sharing a pizza equally, flex-grow and flex-shrink determine how much pizza each box eats, and flex-basis is like saying how much pizza they'd like to start with.

Which CSS layout mode provides an efficient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes? flexible box or flexbox fixed layout flex container flex item

flexible box or flexbox provides an efficient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes. It's like having a magical container (the main box) that can adjust its size and shape to fit on different shelves (screens or viewports). And all the smaller boxes inside it (the elements) also adapt proportionally to make the best use of the available space. This is why flexbox is often used for creating responsive and flexible layouts in web design.

Which CSS layout mode divides a web page into a rectangular grid in which to position page elements? grid container grid layout grid item grid-template-columns

grid layout. It allows developers to create complex layouts by defining rows and columns to place elements within a grid structure. grid container is the element containing the grid, grid item is an element placed within the grid, grid-template-columns is a property used to specify the column sizes within the grid.

Select the three (3) CSS properties that control grid item placement in a specific row or column or span multiple rows and/or columns. grid-area grid layout grid-column grid-template-columns grid-row

grid-area: This property allows you to set the grid item's size and position within the grid area. You can specify both the row and column placement, as well as how many rows and columns the item should span. It's like telling a decorator where to place a picture on a grid of tiles, specifying the coordinates and the size of the picture. grid-column: This property specifically controls the column placement of a grid item. You can set the starting and ending positions within the grid columns. It's similar to placing a bookshelf in a room and specifying which columns it should cover. grid-row: Similar to grid-column, this property controls the row placement of a grid item. It allows you to set the starting and ending positions within the grid rows. It's like specifying the rows a bed should cover within a room. so template is the size of the rows or columns, column and row is the actual location Think of the grid layout as defining the overall structure of the room (defining the grid itself) with rows and columns. Inside this room, you have smaller boxes (grid areas) that you can position within the room, and you can control their size, placement, and span with "grid-area," "grid-column," and "grid-row" properties. So, "grid layout" focuses on the overall structure of the room (rows and columns), while "grid-area," "grid-column," and "grid-row" are used to control the placement and dimensions of specific items (smaller boxes) within that room. That's why "grid layout" isn't the correct choice for specifying grid item placement. It defines the grid itself, not how items within the grid are placed.

Select the five (5) primary attributes for a <input> element. value manifest place method type id name holder

id name place holder type value The primary attributes for an <input> element in HTML typically include: id: The id attribute is used to uniquely identify the input element within the HTML document. name: The name attribute is often used to identify the input field when submitting forms, especially when multiple fields are part of the same form. placeholder: The placeholder attribute is used to provide a hint or example text for the input field, helping users understand what to enter. type: The type attribute is essential for specifying the type of data or input field behavior (e.g., text, password, email, radio, checkbox, etc.). value: The value attribute sets the initial or default value of the input field, which users can see or interact with.

transform: translate(100px, 0); transform: translate(-50px, 0); transform: translate(0, 50px); transform: translate(0, -30px);

moves the element 100 pixels to the right. moves the element 50 pixels to the left. moves the element 50 pixels down. moves the the element 30 pixels up. (its inverted)

Describe the 4 values in animation-fill-mode none forwards backwards both

none: This is the default value. No styles are applied before or after the animation. forwards: The styles of the last keyframe (the "to" keyframe) are applied after the animation finishes. This means that the element retains the styles from the final keyframe of the animation. backwards: The styles of the first keyframe (the "from" keyframe) are applied to the element at the beginning, even before the animation starts. both: It combines the effects of both forwards and backwards, applying the styles of both the first and last keyframes.

Examine the following snippet of code. Identify the value. <p class="special" >Check out our weekly Special!</p> HTML5 <p>...</p> class special

special Yes, in HTML attributes like class, id, and many others, the value assigned to the attribute is placed after the equals sign (=) and within quotation marks (either single or double quotes). The value in the provided HTML snippet is "special." It is the value assigned to the class attribute of the <p> element, and it is used to define a CSS class name for the element. In this case, the class name "special" is assigned to the paragraph element, allowing CSS styles to be applied to it using this class selector.

Examine the following style rule. Identify a declaration. color: The entire block of code Verdana; text-align: center;

text-align: center; remember selector ---> declaration block ---> declaration so each thing inside a declaration block is a single declaration. So color: blue is a declaration. but just blue; doesnt count as a declaration

T or F an <a> tag is the same as a <link> tag

the <a> tag is used for creating hyperlinks and navigation within the page or to external resources, while the <link> tag is used for linking external resources like stylesheets and specifying relationships between documents. They serve different purposes and are placed in different sections of an HTML document.

What is the Third-level domain in the following multi-level domain name? cs.stanford.edu cs. com. edu stanford

the third-level domain is "cs." The hierarchy of domain levels goes from right to left, with "edu" being a top-level domain (TLD), "stanford" as the second-level domain (SLD), and "cs" as the third-level domain.

How do you access browser devtools? -there are different ways to open devtools in different browsers and platforms -by kneeling on your left knee and pressing the f12 button on your keyboard with your right ring finger -by purchasing a devtools option from your browser manufacturer -by restarting your browser after clearing all browsing data, including cookies

there are different ways to open devtools in different browsers and platforms The method to access browser developer tools can vary depending on the browser and operating system you are using. Common ways to open devtools include pressing F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) on your keyboard, right-clicking on a web page and selecting "Inspect" or "Inspect Element," or accessing it through the browser's menu. It's not about purchasing developer tools because most modern web browsers offer developer tools as a built-in feature, and they are typically freely available for developers to use. Developers don't need to purchase these tools separately; they are part of the browser's functionality to assist in web development and debugging.

what is a difference between HTML and the DOM? -when the DOM is manipulated using devtools, the HTML source code does not change -the DOM controls the CSS that might be applied to the HTML by a devloper -the DOM does not have any relation to the HTML in the browser there is no difference

when the DOM is manipulated using devtools, the HTML source code does not change Think of HTML as a recipe for a dish, and the DOM as the dish itself. HTML is like a recipe that tells you what ingredients you need and how to prepare them. It's a static document that doesn't change, just like a recipe card you have in your kitchen. The DOM, on the other hand, is like the actual dish you're cooking based on that recipe. You can add extra seasoning, adjust the portion size, or even change some ingredients without altering the original recipe card. Similarly, when you interact with a web page using DevTools, you're making changes to the DOM, but the underlying HTML (the recipe) remains the same. So, manipulating the DOM with DevTools is like tweaking the dish without changing the recipe card itself.

animation-iteration-count describe it can it be infinite?

A CSS property specifying the number of iterations for a CSS animation. yes it can if it has the infinite property afterwards animation-iteration-count: infinite

How is an attribute selector created in CSS? - <link href="#top">Top</link> -Characters at the beginning of a URL followed by a colon (:) or a colon and double slashes (://). -Specified with an attribute name and optional value comparison enclosed in square brackets ([ and ]). -When style declarations from a parent element cascade down and are applied to any child elements.

An attribute selector in CSS is created by specifying an attribute name and optional value comparison enclosed in square brackets [ and ]. a[href^="https"] { color: blue; } In this example, the selector a[href^="https"] selects all anchor (<a>) elements with an href attribute that starts with "https" and changes their text color to blue.

What type of HTML element fills the minimum space possible in the parent container and can only contain text or other elements of this type? inline element block-level element box model Site Maps

An inline element in HTML typically fills the minimum space necessary in the parent container and can only contain text or other inline elements. Block-level elements, on the other hand, create block-level boxes and typically start on new lines, taking up the full width of their parent container. Think of your HTML content like building a structure with LEGO blocks. Each LEGO block represents an HTML element. Inline Elements: These are like small decorative stickers you can put on individual LEGO blocks. These stickers (inline elements) can make specific parts of your LEGO structure look different without changing the overall structure. For example, you can put stickers (inline elements) with different colors or patterns on individual LEGO blocks without affecting how they stack together. Block-Level Elements: These are like the big, solid LEGO bricks that form the main structure of your creation. When you stack these larger bricks (block-level elements) together, they create clear divisions in your structure. Each brick (block-level element) starts on a new layer, just like new rows of LEGO blocks, and they give your structure its shape and layout.

What languages can the Chrome devtools help debug? CSS HTML JavaScript PHP

CSS: To inspect and modify the styles applied to elements on a web page. HTML: To inspect and modify the structure and content of the HTML on a web page. JavaScript: To debug JavaScript code, set breakpoints, inspect variables, and step through code execution.

summarize what bootstrap is

Bootstrap is a popular open-source front-end framework that provides a collection of tools, styles, and pre-built components to help developers build responsive and visually appealing web applications. It was originally created by Twitter and is now maintained by the open-source community. By using Bootstrap, developers can save time and effort in designing and implementing common UI elements, ensuring consistency and responsiveness across different devices. It is particularly popular for prototyping and quickly building out the user interface of web applications.

What does the elements panel represent on the website?

It represents the DOM and shows you what elements currently exist in the browser for that particular page.

What is the purpose of the font-size property in the p selector in this example? p{ color: red; font-size: 20px; } It sets the font size of all paragraphs to 20 pixels. It sets the font size of all text to 20 pixels. It sets the font size of all headings to 20 pixels. It sets the font size of all links to 20 pixels.

It sets the font size of all paragraphs to 20 pixels so technically even though it is changing the text in those paragraphs to the style that is set, its effecting only paragraphs since that is the rule we set To apply styles to all text elements, you would typically use a more general selector, like the universal selector *

Select the two (2) types of gradient colors the CSS background may use. linear radial absolute border

Linear: background: linear-gradient(to right, red, blue); Radial: background: radial-gradient(circle, red, blue);

Web Dev

Related study sets

BA101 Midterm #2

MS 2: Hematology

Church History Study Guide Unit 4-3

ECOLOGY FINAL

ADMN 575: Quiz 10

2.1 Examining Relationships Introduction: Role Type Clasification

Quiz: How a Bill becomes Law

Water and Salt Physiology

Operating Systems

chapter 28

Chemistry Final

EPS 601 Chapter 1 (Introduction and overview, study guide)

Chapter 5 Continued

LARA -SELECT ALL PRACTICE QUESTIONS

Cognitive Psychology Ch. 4 and 5

MKTG 350 - Exam 3

Accounting 4002

ATI Safety - Practice ?

Guadalajara.2

Intermediate Accounting 7-3