Download PrepIQ Front End Web Developer Ultimate Exam and more Exams Technology in PDF only on Docsity!
Developer Ultimate Exam
Question 1. Which HTML5 element best represents the primary content of a web page, improving SEO and accessibility? A) B) C) D) Answer: C Explanation: `` denotes the dominant content of a page, allowing search engines and assistive technologies to locate the core information directly. Question 2. In CSS, which property changes the default box-sizing model to include padding and border within an element’s total width and height? A) box-sizing: content-box; B) display: box; C) box-sizing: border-box; D) overflow: hidden; Answer: C Explanation: box-sizing: border-box; makes the element’s width and height encompass its content, padding, and border, simplifying layout calculations. Question 3. Which JavaScript method creates a new array containing only the elements that satisfy a provided testing function? A) map() B) filter() C) reduce() D) forEach() Answer: B Explanation: filter() iterates over an array and returns a new array with elements for which the callback returns a truthy value.
Developer Ultimate Exam
**Question 4. In Flexbox, what does the flex-wrap: wrap-reverse; declaration do? ** A) Prevents items from wrapping. B) Wraps items onto multiple lines in reverse order. C) Aligns items to the end of the main axis. D) Changes the flex direction to column. Answer: B Explanation: wrap-reverse causes flex items to wrap onto new lines but in the opposite direction of the normal wrap flow. Question 5. Which attribute on an `` element ensures the field must be filled before form submission? A) pattern B) required C) autocomplete D) placeholder Answer: B Explanation: The required attribute marks the input as mandatory; the browser blocks submission until a valid value is entered. Question 6. What is the purpose of the aria-live="polite" attribute? A) It hides content from screen readers. B) It forces immediate announcement of changes. C) It notifies assistive tech of dynamic updates after a short delay. D) It defines a landmark region. Answer: C Explanation: aria-live="polite" tells screen readers to announce changes at the next natural pause, avoiding disruption. Question 7. Which CSS function can clamp a value between a minimum, preferred, and maximum size, useful for fluid typography?
Developer Ultimate Exam
B) useEffect C) useRef D) useReducer Answer: B Explanation: useEffect with an empty dependency array runs once after the component mounts, mimicking componentDidMount. Question 11. Which HTML5 element is appropriate for embedding a self-contained piece of media that can be played independently? A) B) C) D) Answer: C Explanation: `` provides native playback controls and allows browsers to handle streaming and codecs directly. Question 12. What does the CSS gap property affect when used on a Grid container? A) Margin of grid items B) Space between rows and columns C) Padding inside grid cells D) Border thickness of grid items Answer: B Explanation: gap defines the spacing between grid tracks (rows and columns), simplifying gutter creation. Question 13. Which JavaScript syntax creates a read-only reference to an external module’s default export? A) import * as utils from './utils.js'; B) import { default as utils } from './utils.js';
Developer Ultimate Exam
C) import utils from './utils.js'; D) require('./utils.js'); Answer: C Explanation: import utils from './utils.js'; imports the default export and binds it to the identifier utils. Question 14. In a form, the pattern attribute uses which syntax to define acceptable input? A) SQL B) JSON C) Regular expression D) XML schema Answer: C Explanation: pattern expects a regular expression that the field’s value must match for validation to succeed. Question 15. Which CSS Grid property allows you to name specific areas of the layout for easier placement? A) grid-template-columns B) grid-template-areas C) grid-auto-flow D) grid-column-gap Answer: B Explanation: grid-template-areas lets you assign string identifiers to sections of the grid, enabling placement via grid-area. Question 16. What is the primary benefit of using async/await over raw Promises? A) Faster execution B) Synchronous blocking of the UI C) Cleaner, more readable asynchronous code
Developer Ultimate Exam
Answer: D Explanation: reactive creates a reactive object, ref creates a reactive primitive wrapper, and computed derives reactive values; all are core to the Composition API. Question 20. Which of the following is a valid JSON-LD script for defining an Article schema? A) B) C) D) Answer: A Explanation: The correct MIME type is application/ld+json, and the object must include @type and other required properties. Option A follows the spec. Question 21. Which CSS property can be used to create a fluid, responsive font size that scales between 1rem and 2rem based on viewport width? A) font-size: clamp(1rem, 5vw, 2rem); B) font-size: min(1rem, 5vw); C) font-size: max(1rem, 5vw); D) font-size: calc(1rem + 5vw); Answer: A Explanation: clamp() sets a minimum, preferred, and maximum size, ensuring the font stays within the defined range while responding to viewport changes. Question 22. In Git, which command creates a new branch named feature/login and switches to it in one step? A) git branch feature/login B) git checkout feature/login C) git switch -c feature/login
Developer Ultimate Exam
D) git merge feature/login Answer: C Explanation: git switch -c creates a new branch and checks it out immediately. Question 23. Which HTML attribute enables a `` element to show controls like play/pause without JavaScript? A) autoplay B) muted C) controls D) preload Answer: C Explanation: Adding the controls attribute renders the browser’s native video UI. Question 24. What does the fetch() API return when called? A) The raw response body B) A Promise that resolves to a Response object C) An XMLHttpRequest object D) A string containing JSON data Answer: B Explanation: fetch() always returns a Promise; when resolved, it provides a Response object that can be further processed. Question 25. Which CSS selector targets elements that are the first child of their parent? A) :first-of-type B) :first-child C) ::first-line D) :nth-child(1) Answer: B
Developer Ultimate Exam
Explanation: Using clip (or modern clip-path) with absolute positioning hides the element from sight while retaining it in the accessibility tree. Question 29. What is the default value of the flex-direction property in a Flex container? A) column B) row-reverse C) row D) column-reverse Answer: C Explanation: The default flex direction lays out items horizontally from left to right. Question 30. Which of the following is NOT a valid value for the type attribute of an `` element? A) email B) range C) color D) numeric Answer: D Explanation: There is no numeric input type; the correct type for numbers is number. Question 31. In CSS Grid, what does the auto-fill keyword do when used in grid- template-columns: repeat(auto-fill, minmax(200px, 1fr));? A) Creates a fixed number of columns. B) Adds as many columns as will fit, even if empty. C) Stops adding columns once the container is full. D) Generates rows instead of columns. Answer: B Explanation: auto-fill repeats the column definition to fill the container width, creating as many tracks as possible, including empty ones.
Developer Ultimate Exam
Question 32. Which JavaScript method throws a TypeError if the provided argument is not an iterable? A) Array.from() B) Object.keys() C) JSON.stringify() D) Math.max() Answer: A Explanation: Array.from() expects an iterable; passing a non-iterable triggers a TypeError. Question 33. Which meta tag is essential for responsive design on mobile devices? A) B) C) D) Answer: C Explanation: The viewport meta tag instructs browsers on how to scale the page, enabling responsive layouts. Question 34. In a Redux Toolkit slice, which property defines the initial state of the slice? A) reducers B) initialState C) extraReducers D) name Answer: B Explanation: initialState provides the default state when the store is first created.
Developer Ultimate Exam
A) LCP
B) FID
C) CLS
D) TTI
Answer: C Explanation: Cumulative Layout Shift (CLS) quantifies unexpected layout movements, reflecting visual stability. Question 39. Which JavaScript feature allows you to import a specific named export from a module? A) import defaultExport from './module.js'; B) import * as utils from './module.js'; C) import { parseDate } from './module.js'; D) require('./module.js').parseDate; Answer: C Explanation: Curly braces indicate a named import, pulling only the exported binding parseDate. Question 40. Which attribute on a element instructs the browser to submit data using the HTTP PUT method?** A) `method="put"` B) `method="POST"` with hidden `_method` field C) `method="GET"` D) HTML forms only support GET and POST; PUT requires JavaScript. Answer: D Explanation: Native HTML forms support only GET and POST; other verbs must be simulated via JavaScript or server-side handling. **Question 41. What does the CSS `object-fit: cover;` rule do for an inside a fixed-size container? A) Stretches the image to fill the container without preserving aspect ratio.
Developer Ultimate Exam
B) Scales the image to fit inside the container while preserving aspect ratio. C) Crops the image to fill the container, preserving aspect ratio. D) Centers the image without scaling. Answer: C Explanation: cover scales the image up to cover the container entirely, cropping any overflow while maintaining its aspect ratio. Question 42. In a Vue component, which option correctly declares a prop named title that must be a string? A) props: { title: String } B) props: ['title'] C) props: { title: { type: Number } } D) props: { title: { required: true } } Answer: A Explanation: Declaring title: String enforces that the prop must be a string; additional validation can be added but the type is mandatory. Question 43. Which CSS property can be used to create a two-dimensional layout without floats or Flexbox? A) display: block; B) display: inline-block; C) display: grid; D) display: table; Answer: C Explanation: CSS Grid provides a powerful two-dimensional layout system, allowing placement in rows and columns. Question 44. Which of the following is a correct way to declare a Promise that resolves after 2 seconds? A) new Promise((res) => setTimeout(res, 2000)); B) Promise.delay(2000);
Developer Ultimate Exam
D) `` Answer: A Explanation: The loading="lazy" attribute tells browsers to defer loading until the image is near the viewport. Question 48. In a React application, which pattern helps avoid prop drilling by providing values to deeply nested components? A) Higher-order components (HOC) B) Render props C) Context API D) Component composition Answer: C Explanation: The Context API creates a provider that any descendant can consume without passing props through intermediate layers. Question 49. Which CSS property is used to create a smooth animation that repeats infinitely? A) transition B) animation C) transform D) filter Answer: B Explanation: animation defines keyframes, duration, timing, and iteration count, enabling infinite loops with animation-iteration-count: infinite;. Question 50. What does the rel="preload" link relation do? A) Loads a stylesheet after the page renders. B) Hints the browser to fetch a resource early with high priority. C) Defers loading of a script until after DOMContentLoaded. D) Marks a resource as a favicon.
Developer Ultimate Exam
Answer: B Explanation: preload tells the browser to fetch the specified resource as soon as possible, improving perceived performance. Question 51. Which JavaScript method creates a shallow copy of an object’s own enumerable properties? A) Object.clone() B) Object.assign({}, source) C) Object.create(source) D) source.slice() Answer: B Explanation: Object.assign copies own enumerable properties from the source into the target object, producing a shallow clone. Question 52. Which CSS selector matches any element with a data-id attribute that starts with "user"? A) [data-id^="user"] B) [data-id*="user"] C) [data-id$="user"] D) [data-id|="user"] Answer: A Explanation: The ^= attribute selector matches values that begin with the specified string. Question 53. Which of the following is the correct way to declare a functional component in React using arrow syntax? A) function MyComponent() { return ; } B) const MyComponent = () => (); C) class MyComponent extends React.Component { render() { return ; } } D) let MyComponent = function() { return ; } Answer: B
Developer Ultimate Exam
Explanation: defer loads the script in parallel but executes it after the HTML document is fully parsed. Question 57. In JavaScript, what does the ?. operator (optional chaining) prevent? A) Syntax errors in arrow functions. B) Accessing properties on null or undefined. C) Creation of global variables. D) Duplicate event listeners. Answer: B Explanation: Optional chaining safely returns undefined when attempting to read a property from a nullish value. Question 58. Which CSS property can be used to create a drop-shadow effect on an element without using images? A) box-shadow B) filter: drop-shadow() C) text-shadow D) Both A and B Answer: D Explanation: Both box-shadow (for block elements) and filter: drop-shadow() (applies like an image filter) produce shadow effects. Question 59. Which of the following is a correct way to define a TypeScript interface for an object with a name (string) and age (number) property? A) type Person = { name: string; age: number; } B) interface Person { name: string; age: number; } C) class Person { name: string; age: number; } D) Both A and B Answer: D
Developer Ultimate Exam
Explanation: Both a type alias and an interface can describe the same shape; both examples are valid. Question 60. What is the primary purpose of the prefetch link relation? A) Load a resource immediately. B) Hint the browser to fetch a resource for future navigation. C) Defer script execution. D) Inline a stylesheet. Answer: B Explanation: prefetch tells the browser to retrieve a resource in idle time, anticipating that the user may need it later. Question 61. Which CSS property controls the size of the scrollable overflow area, enabling smooth scrolling on mobile devices? A) overflow-x B) overflow-y C) scroll-behavior D) scroll-snap-type Answer: C Explanation: scroll-behavior: smooth; adds inertia-like smooth scrolling for user-initiated scroll actions. Question 62. In Webpack, which loader is typically used to transform modern JavaScript into a version compatible with older browsers? A) css-loader B) file-loader C) babel-loader D) url-loader Answer: C Explanation: babel-loader integrates Babel into the build pipeline, transpiling ES6+ code to ES5.
