< !DOCTYPE html >

< html >

< body >

< h1 > The Fitness World Around Us - Spring Conference < /h1 >

< form action= " process.php " method= " post " >

< legend > Conference Registration Form < /legend >

< p > < label for= " name " > Name: < /label >

< input type= " text " id= " name " size= " 30 " maxlength= " 30 " value= " " / > < /p >

< input id= " food " placeholder= " Cuisine " list= " food-choice " size= " 40 " / > < br >

< datalist id= " food-choice " >

< option value= " Vegetarian " > Vegetarian < /option >

< option value= " Traditional " > Traditional < /option >

< option value= " Surprise Me " selected > Surprise Me < /option >

< /datalist >

< input type= " submit " >

< /form >

< /body >

< /html >

The correct solution must satisfy all three stated form requirements. The title " Conference Registration Form " is supplied by the < legend > element in the first valid code segment. That same segment also includes the required attendee name field by using a < label > associated with an < input type= " text " > . The for= " name " and id= " name " relationship makes the label programmatically connected to the input, which is the correct HTML form-accessibility pattern. For the food options, the correct choice is the segment that uses an < input > element with a list attribute connected to a < datalist > element. This is required because the attendee must be able to select an option by using the mouse or type a value manually. A < select > element provides a fixed dropdown list, and radio buttons provide fixed clickable choices, but neither is the best match for a type-ahead list requirement. The < datalist > element supplies predefined options such as Vegetarian, Traditional, and Surprise Me while still allowing keyboard entry through the associated input field. References/topics: HTML5 forms, labels, text inputs, datalist, form usability, selectable and typed input options.

The paragraph containing the text Tigers will display first.

False

The section p CSS refers to the parent flexbox container.

False

When the paragraphs have a width less than 200px, the last paragraph will wrap to the next line.

True

The parent flexbox container is the section element because it has display: flex;. The paragraphs inside the section become flex items. The display order is controlled by each paragraph’s inline order value, and flex items are laid out from the lowest order value to the highest. Therefore, Zoo Trip with order: 1 displays first, followed by Bears, Lions, and finally Tigers; the statement that Tigers displays first is false. The selector section p does not refer to the parent flexbox container. It targets paragraph elements inside a section, meaning it styles the flex items, not the flex container. The container itself is targeted by the section rule. The final statement is true in intent because flex-wrap: wrap; allows flex items to move to a new line when they cannot fit in the available row. Since each paragraph has min-width: 200px, items are prevented from shrinking below that minimum and wrapping occurs when available space is insufficient. References/topics: CSS flexbox, flex container, flex items, order, flex-wrap, min-width.

The valid filter declarations are filter: opacity(25%) and filter: drop-shadow(16px 16px 16px red). The CSS filter property applies graphical effects to an element, commonly including image rendering effects such as blur, contrast, color shifts, transparency, and shadows. opacity(25%) is a valid filter function because filter opacity accepts a percentage or number to control the rendered transparency of the element. drop-shadow(16px 16px 16px red) is also valid because drop-shadow() is a CSS filter function, and MDN shows that it accepts two or three length values plus an optional color. box-shadow(...) is invalid in this context because box-shadow is a standalone CSS property, not a filter function; MDN explicitly distinguishes drop-shadow() from the box-shadow property. blur(25deg) is invalid because blur uses a length value such as pixels, not an angular value such as degrees. References/topics: CSS filter property, image effects, opacity filter, drop-shadow filter, valid filter-function syntax.

==========

The correct CSS is option B because the SVG filter is declared inside < defs > with the identifier id= " f2 " . To apply an SVG filter from CSS, the filter property must reference that filter by URL syntax using the filter’s ID selector: filter: url( " #f2 " );. The text selector targets the SVG < text > element, so the rule applies the defined filter effect to the visible text content, Blur Me!. The filter itself uses < feOffset > , < feGaussianBlur > , and < feBlend > to create the blurred visual effect. Option A is incorrect because filter: #blur; is not valid filter-reference syntax and does not match the actual filter ID. Option C is incorrect because fill controls paint color, not filter application, and blur is not a valid fill value. Option D uses url(blur), which does not reference the defined f2 filter and omits the required ID reference. References/topics: SVG filters, < filter > , filter IDs, CSS filter: url(#id), SVG < text > styling.

Determine requirements → Develop code → Test the app

↓

Monitor performance ← Deploy the app

The correct application lifecycle sequence begins with Determine requirements because the team must first define what the app must accomplish, who will use it, and which functional and technical expectations must be satisfied. Since the question states that the design is already provided, the next implementation step is Develop code, where the HTML, CSS, JavaScript, assets, APIs, and app logic are created according to the approved design and requirements. After development, the app must be validated through Test the app. Testing confirms that the app works correctly, meets requirements, handles user input properly, and does not contain functional defects that would block release. Once testing is complete, the app can be released through Deploy the app, which publishes it to the target environment or makes it available to users. The final operational stage is Monitor performance, where the released app is observed, maintained, updated, and improved based on performance, reliability, defects, and user behavior. References/topics: application lifecycle management, requirements, development, testing, deployment, maintenance.

First drop-down: maxlength=8

Second drop-down: pattern=[A-Za-z0-9]{6,8}

Third drop-down: pattern=[0-9]{3}-[0-9] {2}-[0-9]{3}

The password field needs two constraints. maxlength=8 limits the user to a maximum of eight characters, satisfying the upper length requirement. The pattern=[A-Za-z0-9]{6,8} attribute enforces the complete password rule: only uppercase letters, lowercase letters, and digits are allowed, and the total length must be between six and eight characters. A pattern without {6,8} would not enforce the minimum length, and {1,8} would incorrectly allow passwords shorter than six characters. The Member ID field must follow the visible placeholder format 123-45-678, which is three digits, a hyphen, two digits, another hyphen, and three digits. Therefore, the correct member ID pattern is pattern=[0-9] {3}-[0-9]{2}-[0-9] {3}. The hyphens must be included literally in the pattern because the required format contains them. max=8 is not appropriate for password text length, and size=8 only controls display width, not validation.

The correct setting is overflow: auto;. The requirement is precise: the text must remain inside the element’s border, must not be lost, and scrollbars should not appear unless they are needed. overflow: auto satisfies all three requirements because it clips overflowing content to the element’s box and creates scrollbars only when the content actually exceeds the available space. This preserves access to all text while avoiding unnecessary horizontal or vertical scrollbars when the content fits. overflow: hidden is incorrect because it clips the overflowing text and provides no scrolling mechanism, meaning some content may become inaccessible. overflow: visible is incorrect because the extra text can flow outside the element boundary, violating the requirement to keep content inside the border. overflow: scroll is close but not optimal because it forces scrollbars even when they are not required, which directly conflicts with the instruction to avoid unneeded scrollbars. References/topics: CSS overflow, scroll containers, text containment, content clipping, layout flow.

==========

The correct markup is option D. The type= " tel " input type is appropriate for telephone-number entry, but it does not automatically validate a specific telephone-number format because phone formats vary internationally. MDN notes that tel inputs allow telephone entry but are not automatically validated to a particular format. Therefore, a pattern attribute is required to enforce the exact structure. The regular expression [0-9]{3}-[0-9] {3}-[0-9]{4} requires three digits, a hyphen, three digits, another hyphen, and four digits, matching the requested format such as 111-444-7777. MDN defines the pattern attribute as a regular expression the input value must match for constraint validation. The required attribute is also necessary because the field must not be empty; MDN states that required indicates the user must specify a value before the form can be submitted. Option A only limits length. Option B lacks hyphen validation and required. Option C hard-codes only specific digits. References/topics: HTML5 validation, tel, pattern, required, regular expressions.

==========

The correct testing tasks are to verify application functionality, find defects, and ensure the app meets design specifications. Testing occurs after development produces a build and before acceptance or deployment decisions are made. Its purpose is to compare the implemented application against expected behavior, requirements, and design specifications. Option A is correct because functional testing confirms that user workflows, controls, validation rules, scripts, and page interactions work as intended. Option C is correct because defect discovery is a core testing responsibility; testers identify failures, inconsistencies, regressions, and unexpected behavior so the development team can correct them. Option D is correct because the app must be evaluated against the documented design, including layout, navigation, responsiveness, accessibility expectations, and feature behavior. Asking customers to submit bugs or feature requests is a feedback or product-management activity, not the primary task of an internal test cycle immediately following a development release. Checking syntax errors is primarily handled during development, linting, editing, or build processing; a released test build should already parse and execute sufficiently for functional testing. References/topics: application lifecycle management, test phase, defect detection, functional testing, design specification validation.

The correct answer is D because the layout shown is a named-area CSS Grid layout. The mockup contains five semantic regions: the top header area for the logo and page title, a left-side menu, a central main content area, a right-side additional content area, and a bottom copyright/contact area. In CSS Grid, this type of visual structure is defined with grid-template-areas, where each quoted string represents one grid row and each repeated name represents how far that area spans across columns. In option D, heading spans the full top row, menu occupies the left column across the lower rows, content fills the main center region, right fills the additional content region, and contact spans the bottom row to the right of the menu. Option A only defines row and column sizes and does not name the five content areas. Options B and C are invalid for this purpose because named layout strings do not belong in grid-template-rows or grid-template-columns. References/topics: CSS Grid, grid containers, display: grid, named grid areas, grid-template-areas, page layout construction.