2nd attempt study set

Slide 1: Question: What is the proper syntax to declare a CSS variable set to black? Options: A. --section-color: black; B. --section-color black; C. section-color: black; Slide 2:

A. --section-color: black; Explanation: CSS variables are declared using a double hyphen (--) followed by the variable name and a colon-separated value. Example: :root { --section-color: black; }

Question: How many columns is the grid system divided into? Options: A. 12 or less B. 10 or less C. 15 or less D. 20 or less

A. 12 or less Explanation: The Bootstrap grid system divides a page into 12 equal-width columns, allowing flexible layouts by combining columns that span across the grid. Example: ```html <div class="row"> <div class="col-6">Column 1</div> <div class="col-6">Column 2</div> </div>

Slide 1: Question: Which media query matches a 320px wide viewport whose width is larger than the viewport's height? Options: A. @media screen and (min-width:320px) and (orientation:landscape){...} B. @media screen and (device-width: 320px){...} C. @media screen and (orientation: landscape){...} Slide 2:

A. @media screen and (min-width:320px) and (orientation:landscape){...} Explanation: This media query checks that the minimum width of the viewport is 320px and that the orientation is landscape, making it suitable for the given criteria.

Slide 1: Question: Which of the following is the definition of a CSS declaration? Options: A. A CSS property followed by a colon (:) and the property value B. One or more declarations separated by semicolons (;) C. The HTML elements to which the specific style rule applies Slide 2:

A. A CSS property followed by a colon (:) and the property value Explanation: A CSS declaration consists of a property and its value, separated by a colon (:). Example: color: blue;

Slide 1: Question: What is a pseudo-class selector in CSS? Options: A. A keyword added to a selector to specify a special state of the selected elements B. A CSS property that changes the layout of a webpage C. A declaration that applies styling based on screen width D. A method to group multiple selectors Slide 2:

A. A keyword added to a selector to specify a special state of the selected elements Explanation: A pseudo-class in CSS specifies a special state of an element, such as when a user interacts with it or its position within a document. Example: a:hover { color: blue; }

Question: What does the media condition (min-width: 400px) 30vw specify? Options: A. A media condition (viewport width must be at least 400px wide) and a relative image size (30% of the viewport width) B. A media condition (viewport height must be at least 400px wide) and a relative image size (30% of the viewport height) C. A viewport condition (viewport width must be at least 400px wide) and a relative image size (30% of the viewport width) D. A viewport condition (viewport height must be at least 400px wide) and a relative image size (30% of the viewport height)

A. A media condition (viewport width must be at least 400px wide) and a relative image size (30% of the viewport width) Explanation: This media condition specifies that when the viewport width is at least 400px, the image should take up 30% of the viewport's width. Example: sizes="(min-width: 400px) 30vw"

Question: What is a polyfill in web development? Options: A. Code that supports some functionality that is missing from a browser B. Code that fills in gaps in a webpage's layout C. Code that enhances the performance of a browser D. Code that adds new features to a browser

A. Code that supports some functionality that is missing from a browser Explanation: A polyfill is a piece of JavaScript code that replicates the behavior of new features in older browsers that do not support them. Example: Using a polyfill for `Promise` in older browsers: ```javascript if (!window.Promise) { window.Promise = PolyfillPromise; }

Question: What are some ways to obtain the Bootstrap code? Options: A. Download the files from the Bootstrap website, use a content delivery network (CDN), or use Node.js, yarn, Gems, Composer, or other applications B. Download the files from the Bootstrap website, use a content delivery network (CDN), or use Python, Java, C++, or other applications C. Download the files from the Bootstrap website, use a content delivery network (CDN), or use PHP, Ruby, Swift, or other applications D. Download the files from the Bootstrap website, use a content delivery network (CDN), or use C#, Go, Rust, or other applications

A. Download the files from the Bootstrap website, use a content delivery network (CDN), or use Node.js, yarn, Gems, Composer, or other applications Explanation: Bootstrap can be downloaded directly from its website or integrated using a package manager like Node.js, yarn, or others. Example: bash Copy Edit npm install bootstrap

Slide 1: Question: True or false? The :focus selector normally selects more than one element at a time. Options: A. False B. True Slide 2:

A. False Explanation: The `:focus` selector targets a single element at a time, specifically the one currently in focus. Example: input:focus { outline: 2px solid blue; }

Slide 1: Question: True or false? The sass command-line tool creates a .scss file from a .css file. Options: A. False B. True Slide 2:

A. False Explanation: The `sass` command-line tool is used to compile SCSS or Sass files into CSS, not the other way around.

Slide 1: Question: True or false? The max-width property should never be used in a fluid layout. Options: A. False B. True Slide 2:

A. False Explanation: The max-width property is often used in fluid layouts to restrict an element's width while allowing it to scale responsively within limits. Example: .container { max-width: 1200px; margin: auto; }

Question: What does a browser do if it uses sizes to calculate a 500px wide image is needed? Options: A. It uses srcset to determine which image is at least 500px wide and downloads the appropriate image B. It uses srcset to determine which image is exactly 500px wide and downloads the appropriate image C. It uses sizes to determine which image is at least 500px wide and downloads the appropriate image D. It uses sizes to determine which image is exactly 500px wide and downloads the appropriate image

A. It uses srcset to determine which image is at least 500px wide and downloads the appropriate image Explanation: The browser calculates the required image width based on the sizes attribute and then uses the srcset attribute to select an image file that meets or exceeds the required width. Example: <img src="small.jpg" srcset="large.jpg 1200w, medium.jpg 800w" sizes="50vw" alt="example">

Question: Who created Bootstrap? Options: A. Mark Otto and Jacob Thornton at Twitter B. Bill Gates and Paul Allen at Microsoft C. Larry Page and Sergey Brin at Google D. Steve Jobs and Steve Wozniak at Apple

A. Mark Otto and Jacob Thornton at Twitter Explanation: Bootstrap was developed at Twitter by Mark Otto and Jacob Thornton to streamline the development of responsive and consistent interfaces.

Slide 1: Question: Must media queries have at least one expression after the media type? Options: A. No B. Yes Slide 2:

A. No Explanation: Media queries can include only the media type (e.g., `@media screen`) without requiring additional expressions.

Slide 1: Question: Is there a media type that specifically targets mobile devices? Options: A. No B. Yes Slide 2:

A. No Explanation: Media types such as `screen` or `all` are used for responsive designs, but there is no specific media type solely for mobile devices.

Question: What does Bootstrap include? Options: A. Numerous CSS classes that aid in styling text, tables, images, etc. B. Numerous HTML tags that aid in structuring webpages C. Numerous JavaScript functions that aid in animating webpages D. Numerous PHP scripts that aid in server-side processing

A. Numerous CSS classes that aid in styling text, tables, images, etc. Explanation: Bootstrap provides a library of pre-defined CSS classes to style elements like tables, forms, buttons, and images, simplifying the web design process. Example: html Copy Edit <table class="table table-striped"> <thead> <tr> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td>Data</td> </tr> </tbody> </table>

Slide 1: Question: Which of the following is the definition of a CSS declaration block? Options: A. One or more declarations separated by semicolons (;) B. A CSS property followed by a colon (:) and the property value C. The HTML elements to which the specific style rule applies Slide 2:

A. One or more declarations separated by semicolons (;) Explanation: A CSS declaration block contains one or more declarations enclosed in curly braces `{}`. Example: { color: black; font-size: 16px; }

Question: What does the 'col-md' class do when the browser's width is ≥ 768px in Bootstrap? Options: A. Runs horizontally B. Runs vertically C. Becomes hidden D. Becomes deleted

A. Runs horizontally Explanation: The col-md class ensures that columns remain in the same row when the browser's width is 768px or larger. Example: html Copy Edit <div class="row"> <div class="col-md-6">Column 1</div> <div class="col-md-6">Column 2</div> </div>

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

A. The HTML elements to which the specific style rule applies Explanation: A CSS selector identifies the HTML elements that will be styled by the rule. Example: p { color: red; } Selector: `p`

Question: What does the srcset attribute of an image indicate when used with the sizes attribute? Options: A. The actual image width for each image in the set B. The actual image height for each image in the set C. The relative image height for each image in the set D. The relative image width for each image in the set

A. The actual image width for each image in the set Explanation: The `srcset` attribute provides a list of image files with their corresponding pixel densities or widths, allowing the browser to choose the best image based on the display. Example: <img src="small.jpg" srcset="large.jpg 1200w, medium.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" alt="example">

Question: What happens when the browser width is less than the breakpoint in Bootstrap? Options: A. The column is placed in a separate row B. The column is placed in the same row C. The column is hidden D. The column is deleted

A. The column is placed in a separate row Explanation: When the browser width is less than the specified breakpoint, Bootstrap stacks columns vertically, ensuring responsive layouts. Example: html Copy Edit <div class="row"> <div class="col-sm-6">Column 1</div> <div class="col-sm-6">Column 2</div> </div>

Question: What does Bootstrap simplify? Options: A. The task of creating fluid layouts B. The task of creating static layouts C. The task of creating rigid layouts D. The task of creating complex layouts

A. The task of creating fluid layouts Explanation: Bootstrap is a CSS framework that makes it easier to create fluid, responsive layouts with pre-defined CSS classes and grid systems. Example: html Copy Edit <div class="container"> <div class="row"> <div class="col-md-6">Content</div> <div class="col-md-6">Content</div> </div> </div>

Question: What is the purpose of the <picture> element in web development? Options: A. To match images with device characteristics B. To add captions to images C. To create image galleries D. To apply filters to images

A. To match images with device characteristics Explanation: The `<picture>` element provides a way to define multiple source images for different device characteristics, like screen resolution or viewport size, enabling responsive images. Example: <picture> <source srcset="image-large.jpg" media="(min-width: 800px)"> <source srcset="image-small.jpg" media="(max-width: 799px)"> <img src="image-default.jpg" alt="example"> </picture>

Slide 1: Question: True or false? Many browsers add a border around an input when the input has the focus. Options: A. True B. False Slide 2:

A. True Explanation: Many browsers apply a default focus style, often a border or outline, around input fields when they receive focus.

Slide 1: Question: True or false? SCSS is syntactically different than the original Sass syntax. Options: A. True B. False Slide 2:

A. True Explanation: SCSS syntax differs from the original Sass syntax as it uses brackets and semicolons, making it closer to traditional CSS.

Slide 1: Question: True or false? An advantage to using a SCSS variable to store a color value used multiple times in a stylesheet is that if the color needs to be changed in the future, only the variable needs to be changed. Options: A. True B. False Slide 2:

A. True Explanation: Using SCSS variables improves maintainability because a single change to the variable value updates all references across the stylesheet. Example: ```scss $primary-color: #3498db; button { background-color: $primary-color; }

Slide 1: Question: Which CSS position property value positions an element relative to the nearest positioned ancestor? Options: A. absolute B. fixed C. relative D. static Slide 2:

A. absolute Explanation: The absolute value of the position property places an element relative to its closest positioned (non-static) ancestor. Example: .child { position: absolute; top: 10px; left: 10px; }

Question: What CSS styles does the 'img-fluid' class add to the image in Bootstrap? Options: A. display: block; max-width: 100%; height: auto B. display: none; max-width: 100%; height: auto C. display: block; min-width: 100%; height: auto D. display: block; max-width: 100%; width: auto

A. display: block; max-width: 100%; height: auto Explanation: The `img-fluid` class in Bootstrap makes images responsive by ensuring they scale proportionally within their containing element. Example: ```html <img src="example.jpg" class="img-fluid" alt="Responsive image">

Slide 1: Question: What CSS property defines the direction of flex items within the container using values? Options: A. flex-direction B. flex container C. flex item D. flexible box or flexbox Slide 2:

A. flex-direction Explanation: The flex-direction property specifies the direction of the main axis along which flex items are placed in the container. Example: .container { display: flex; flex-direction: row; }

Slide 1: Question: 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? Options: A. flexible box or flexbox B. fixed layout C. flex container D. flex item Slide 2:

A. flexible box or flexbox Explanation: The flexbox layout mode is designed for creating responsive layouts by aligning and distributing items in a container with predictable behavior. Example: .container { display: flex; }

Slide 1: Question: This CSS property defines the grid container number of columns and optionally the width of each column. Options: A. grid-template-columns B. grid container C. grid item D. grid layout Slide 2:

A. grid-template-columns Explanation: The grid-template-columns property specifies the number and size of columns in a grid container. Example: .container { display: grid; grid-template-columns: 1fr 2fr; }

Slide 1: Question: What is a selector called that includes a comma-delimited list of selectors at the beginning of one CSS rule? Options: A. multiple selector B. :enabled C. placeholder D. pseudo-class Slide 2:

A. multiple selector Explanation: A multiple selector allows applying the same styles to multiple elements by separating the selectors with commas. Example: h1, p, .highlight { color: blue; }

Slide 1: Question: Which function moves an element 20 pixels to the left and 5 pixels down? Options: A. translate(-20px,5px) B. translate(-20,5) C. translate(100%,5em) D. translate(20px,-5px) Slide 2:

A. translate(-20px,5px) Explanation: The `translate(-20px,5px)` function moves an element 20 pixels to the left and 5 pixels down relative to its current position. Example: transform: translate(-20px, 5px);

Slide 1: Question: Which HTML element is a generic element for creating inline containers to facilitate managing content on a webpage. This element has no semantic meaning. Options: A. <span>...</span> B. <div>...</div> C. <h1>...</h1> D. <meta>

Answer: A. <span>...</span> Explanation: The `<span>` element is used for applying styles or behavior to specific parts of text or inline content. Example: <span style="color: red;">Red Text</span>

Slide 1: Question: Given the following HTML, the <ol>...</ol> element is the parent container of the <img> element. Options: A. False B. True

Answer: A. False Explanation: The `<ol>` element can only be a parent to list items (`<li>`) and not an `<img>` element unless the `<img>` is nested inside a `<li>`.

Slide 1: Question: True or false? Good practice is to use the <br>, or line break, element to add space or control formatting of a webpage. Options: A. False B. True

Answer: A. False Explanation: Using the <br> tag for spacing or formatting is not recommended as it goes against semantic HTML practices. CSS should be used for layout and formatting.

Slide 1: Question: What benefits do semantic HTML5 tags provide? Options: A. Improved accessibility, SEO, cleaner code, and future-proofing B. Enhanced browser compatibility and page speed C. Support for legacy browsers and plugins D. Automatic multimedia formatting

Answer: A. Improved accessibility, SEO, cleaner code, and future-proofing Explanation: Semantic tags allow assistive technologies and search engines to better understand the content structure, while simplifying the codebase.

Slide 1: Question: Why is it recommended to avoid using `<div>` when semantic elements are available? Options: A. Semantic elements improve readability, accessibility, and SEO B. `<div>` tags break the HTML document structure C. `<div>` tags consume more browser resources D. Semantic elements are required for valid HTML

Answer: A. Semantic elements improve readability, accessibility, and SEO Explanation: Semantic elements like `<header>`, `<nav>`, or `<section>` provide better context and meaning, making it easier for assistive technologies and search engines to understand the content structure. Example: <section> <h1>Welcome</h1> <p>This is a meaningful container.</p> </section>

Slide 1: Question: What are HTML5 semantic tags? Options: A. Tags that provide meaningful names indicating their role or the type of content they contain B. Tags used for styling the webpage C. Tags exclusively for embedding multimedia D. Tags that define the appearance of elements

Answer: A. Tags that provide meaningful names indicating their role or the type of content they contain Explanation: HTML5 semantic tags enhance readability, accessibility, and SEO by clearly defining the structure and meaning of content. Example: <header> <h1>Welcome to My Website</h1> <nav> <a href="#home">Home</a> <a href="#about">About</a> </nav> </header>

Slide 1: Question: What is the purpose of the `<figure>` and `<figcaption>` elements in HTML5? Options: A. To group and caption multimedia content B. To define an inline container C. To manage lists of related links D. To display navigational sections

Answer: A. To group and caption multimedia content Explanation: `<figure>` groups media, such as images or diagrams, while `<figcaption>` provides a caption or description for the grouped content. Example: <figure> <img src="image.jpg" alt="A scenic view"> <figcaption>Figure 1: A scenic view</figcaption> </figure>

Slide 1: Question: Given the following HTML, the <ol>...</ol> element has a parent container. Options: A. True B. False

Answer: A. True Explanation: In HTML, the `<ol>` element is usually nested within a parent container such as `<div>` or `<body>`.

Slide 1: Question: True or false? The anchor element (<a>...</a>) defines a hyperlink in a webpage. Options: A. True B. False

Answer: A. True Explanation: The `<a>` element is used to create hyperlinks that link to other webpages, files, or resources.

Slide 1: Question: When is it appropriate to use a `<div>` element in HTML? Options: A. When grouping elements for styling or applying JavaScript hooks B. When defining the main navigation links of a page C. When creating a footer for a section D. When marking up articles or blog posts

Answer: A. When grouping elements for styling or applying JavaScript hooks Explanation: The `<div>` element is suitable for layout purposes, applying styles, or serving as a container for dynamic content via JavaScript. Example: <div class="container"> <h1>Title</h1> <p>Paragraph inside a div.</p> </div>

Slide 1: Question: This required <form> attribute specifies the name and location of the CGI script used to process the form. Options: A. action B. get C. method D. post

Answer: A. action Explanation: The `action` attribute specifies the server endpoint or URL where the form data should be submitted. Example: <form method="post" action="/process-data"></form>

Slide 1: Question: Which required <img> attribute provides a text description to use as an alternative to displaying the image? Options: A. alt B. size C. src D. width

Answer: A. alt Explanation: The `alt` attribute provides alternative text for an image, improving accessibility and user experience if the image cannot be displayed.

Slide 1: Question: What HTML attribute should be used if a <form>...</form> field contains binary data, such as an image, that the normal format of the query string is not sufficient to encode? Options: A. enctype B. method C. multipart/form-data D. post

Answer: A. enctype Explanation: The `enctype` attribute specifies how the form data should be encoded when submitting it to the server. For binary data, such as file uploads, the value should be set to `multipart/form-data`. Example: <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="image"> <button type="submit">Upload</button> </form>

Slide 1: Question: What <form> method attribute value instructs the browser to append the form data to the URL for use in a query string? Options: A. get B. action C. method D. post

Answer: A. get Explanation: The `get` method appends form data to the URL as query parameters, making it visible in the URL bar. Example: <form method="get" action="/search"></form>

Slide 1: Question: 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? Options: A. inline element B. block-level element C. box model D. Site Maps

Answer: A. inline element Explanation: Inline elements only occupy the width required by their content and do not start on a new line. Example: <span>This is an inline element.</span>

Slide 1: Question: What required <form> attribute specifies the manner in which the browser will send form data to a web server? Options: A. method B. action C. get D. post

Answer: A. method Explanation: The `method` attribute specifies how form data should be sent to the server, either via "get" or "post". Example: <form method="post" action="/submit-form"></form>

Slide 1: Question: What <form> method attribute value allows sending more characters and is slightly more secure when submitting a Web-based form? Options: A. post B. action C. get D. method

Answer: A. post Explanation: The `post` method sends form data in the request body, not the URL, making it suitable for sensitive data or large submissions. Example: <form method="post" action="/upload"></form>

Slide 1: Question: What is a mandatory attribute that specifies the URL of an image file to display? Options: A. src B. alt C. anchor D. href

Answer: A. src Explanation: The `src` attribute specifies the path to the image file that should be displayed by the `<img>` tag.

Slide 1: Question: What is a block element with no semantic meaning in HTML? Options: A. An element that conveys specific meaning about its content B. A structural element with no inherent meaning, like <div> C. An inline element that spans a single line D. An element used exclusively for layout styling

Answer: B. A structural element with no inherent meaning, like <div> Explanation: In HTML, a block element like `<div>` is used for grouping elements and applying styles or JavaScript functionality but does not provide semantic meaning. Example: <div> <p>This is some text inside a div.</p> </div>

Slide 1: Question: What are empty (void) element tags in HTML? Options: A. Elements with both opening and closing tags that contain no content B. Elements without closing tags and cannot contain any content C. Elements used for styling purposes only D. Elements used exclusively for metadata

Answer: B. Elements without closing tags and cannot contain any content Explanation: Empty elements, also known as void elements, are self-contained HTML elements that do not have closing tags and cannot hold any content. They serve specific purposes like adding line breaks, embedding images, or defining metadata. Example: <br> Hello<br>World

Slide 1: Question: What does the `<link>` element do in HTML? Options: A. Adds a hyperlink to another page B. Links to an external resource like a stylesheet C. Embeds an image D. Defines metadata

Answer: B. Links to an external resource like a stylesheet Explanation: The `<link>` element is a void element used to link external resources, such as stylesheets, to an HTML document. Example: <link rel="stylesheet" href="styles.css">

Slide 1: Question: What does the `<main>` element represent in HTML5? Options: A. The footer of a webpage B. The primary content of a document C. A navigational section D. A container for multimedia content

Answer: B. The primary content of a document Explanation: The `<main>` element represents the central content of a webpage, which is unique to that page and directly related to the document's topic. Example: <main> <h2>About Us</h2> <p>We specialize in web design and development.</p> </main>

Slide 1: Question: What is the purpose of the `<meta>` element in HTML? Options: A. To define a clickable area in an image map B. To define metadata about the document C. To add a line break in the content D. To insert a horizontal line

Answer: B. To define metadata about the document Explanation: The `<meta>` tag is an empty element used in the `<head>` section of an HTML document to define metadata, such as the character set, author, or viewport settings. Example: <meta charset="UTF-8">

Slide 1: Question: True or false? The web browser will always create a new window for hyperlinks whose target attribute is _blank. Options: A. False B. True

Answer: B. True Explanation: When the `target="_blank"` attribute is used, the browser opens the hyperlink in a new tab or window.

Slide 1: Question: Which HTML5 semantic tag represents self-contained content that could stand alone, such as blog posts? Options: A. `<aside>` B. `<article>` C. `<section>` D. `<header>`

Answer: B. `<article>` Explanation: The `<article>` tag is used for self-contained, independent content like news articles or blog posts that can be reused or shared individually. Example: <article> <h2>Our Latest Blog</h2> <p>Discover the latest trends in web development.</p> </article>

Slide 1: Question: Which empty element is used to create a horizontal line in HTML? Options: A. `<line>` B. `<hr>` C. `<br>` D. `<div>`

Answer: B. `<hr>` Explanation: The `<hr>` tag is an empty element that inserts a horizontal line to separate content. Example: <hr>

Slide 1: Question: Which of the following is an example of an empty (void) element in HTML? Options: A. `<div>...</div>` B. `<p>...</p>` C. `<img>` D. `<span>...</span>`

Answer: C. `<img>` Explanation: The `<img>` tag is a void element used to embed images into a webpage. It does not require a closing tag. Example: <img src="image.jpg" alt="A beautiful scenery">

Slide 1: Question: What is SCSS (Sassy CSS)? Options: A. A programming language for backend development B. A CSS preprocessor that extends CSS with variables, nesting, mixins, and more C. A database query language D. A method to compile JavaScript Slide 2:

B. A CSS preprocessor that extends CSS with variables, nesting, mixins, and more Explanation: SCSS is a syntax of Sass that enhances CSS by adding advanced features like variables, nesting, and mixins, making stylesheets easier to write, organize, and maintain.

Slide 1: Question: What is a pseudo-element selector in CSS? Options: A. A selector to style elements based on their state B. A selector to style specific parts of an element C. A selector to style elements dynamically based on their attributes D. A selector to style an entire HTML document Slide 2:

B. A selector to style specific parts of an element Explanation: A pseudo-element selector allows you to style specific parts of an element, such as the first letter, line, or text selection, without altering the HTML structure. Example: p::first-letter { font-size: 2em; color: blue; }

Slide 1: Question: What is an attribute selector in CSS? Options: A. A selector used to style elements based on their tags B. A selector used to style elements based on their attributes C. A selector used to style elements based on their classes D. A selector used to style elements based on their IDs Slide 2:

B. A selector used to style elements based on their attributes Explanation: An attribute selector targets elements based on the presence, value, or partial value of their attributes, providing a flexible way to style HTML elements dynamically. Example: input[type="text"] { border: 1px solid gray; }