Download Workbooks Front end developer certificate Practice Exam and more Exams Technology in PDF only on Docsity!
Practice Exam
Question 1. Which HTML5 element is most appropriate for containing site‑wide navigation links? A) B) C) D) Answer: B Explanation: The element is semantically intended for navigation blocks such as menus and site links. Question 2. In a valid HTML5 document, which tag must appear immediately after the declaration? A) B) C) <html> D) <meta charset="UTF‑8"> Answer: C Explanation: The root element <html> must follow the doctype; <head> and others are nested inside it. Question 3. Which meta tag ensures proper scaling on mobile devices? A) <meta name="viewport" content="width=device-width, initial-scale=1"> B) <meta charset="UTF‑8"> C) <meta name="description"> D) <meta http‑equiv="X-UA-Compatible"> Answer: A Explanation: The viewport meta tag controls layout width and initial zoom on mobile browsers. Question 4. Which attribute of the <img> element allows the browser to choose between multiple image sources based on screen resolution? A) srcset B) sizes C) loading D) alt Answer: A Explanation: srcset provides a list of image candidates with descriptors for the browser to select the best fit.
Practice Exam
Question 5. To embed a video that can play in browsers without plugins, which element should be used? A) B) C) D) Answer: C Explanation: The element is the HTML5 standard for native video playback. Question 6. Which of the following input types automatically validates that the entered value is a well‑formed email address? A) type="text" B) type="url" C) type="email" D) type="search" Answer: C Explanation: The email type triggers built‑in validation for email address format. Question 7. When a form’s method attribute is set to "GET", how is the submitted data transmitted? A) In the request body B) In the URL query string C) Via cookies D) As multipart/form‑data Answer: B Explanation: GET appends form data to the URL after a? as a query string. Question 8. Which table element groups header rows that should repeat when a table is paginated? A) B) C) D) Answer: C Explanation: contains header rows, often repeated on each printed page. Question 9. Which CSS selector matches any element with a data‑status attribute equal to "active"?
Practice Exam
A) static B) relative C) absolute D) sticky Answer: B Explanation: relative positioning offsets the element visually while preserving its original space. Question 14. In Flexbox, which property aligns items along the cross axis? A) justify-content B) align-items C) flex-direction D) order Answer: B Explanation: align-items controls alignment perpendicular to the main axis. Question 15. Which CSS Grid property defines the number and size of columns in a grid container? A) grid-template-rows B) grid-template-columns C) grid-auto-flow D) grid-gap Answer: B Explanation: grid-template-columns sets column tracks, their count and dimensions. Question 16. Which transition property defines how long a CSS transition takes to complete? A) transition-property B) transition-duration C) transition-delay D) transition-timing-function Answer: B Explanation: transition-duration specifies the time interval for the transition. Question 17. To rotate an element 45 degrees clockwise using CSS transforms, which function is used? A) translate(45deg) B) scale(45deg) C) rotate(45deg) D) skew(45deg) Answer: C Explanation: rotate() applies a rotation angle; 45deg rotates clockwise.
Practice Exam
Question 18. In Sass, which feature allows you to define reusable pieces of CSS that can accept arguments? A) Variables B) Nesting C) Mixins D) Extend Answer: C Explanation: Mixins are functions that output CSS and can accept parameters. Question 19. Which JavaScript keyword creates a block‑scoped variable that cannot be reassigned? A) var B) let C) const D) static Answer: C Explanation: const declares a constant binding; it must be initialized and cannot be reassigned. Question 20. What is the output of the expression typeof NaN in JavaScript? A) "number" B) "NaN" C) "undefined" D) "object" Answer: A Explanation: NaN is a special numeric value; typeof returns "number". Question 21. Which loop will execute its body at least once regardless of the condition? A) for B) while C) do…while D) for…in Answer: C Explanation: do…while checks the condition after executing the loop body. Question 22. In JavaScript, which method creates a new array containing the results of applying a function to each element of an existing array?
Practice Exam
Answer: B Explanation: splice(start) removes elements from the start index onward, altering the array. Question 27. Which DOM method returns the first element that matches a CSS selector? A) getElementById B) querySelectorAll C) querySelector D) getElementsByClassName Answer: C Explanation: querySelector accepts any CSS selector and returns the first matching element. Question 28. What is the default event flow phase when an event listener is attached using addEventListener('click', fn)? A) Capturing B) Target C) Bubbling D) Delegating Answer: C Explanation: By default, addEventListener listens during the bubbling phase unless {capture:true} is specified. Question 29. Which method removes an event listener that was added with addEventListener('click', handler)? A) removeEvent('click', handler) B) off('click', handler) C) removeEventListener('click', handler) D) detachEvent('click', handler) Answer: C Explanation: removeEventListener mirrors addEventListener to detach a specific handler. Question 30. In event delegation, which property of the event object indicates the element that actually received the event? A) event.target B) event.currentTarget C) event.srcElement D) event.delegateTarget Answer: A
Practice Exam
Explanation: event.target refers to the deepest element that triggered the event. Question 31. Which statement correctly describes a Promise that has been resolved? A) It is in the pending state B) It is fulfilled C) It is rejected D) It is cancelled Answer: B Explanation: A resolved promise moves to the fulfilled state. Question 32. What will the following async function return? async function foo(){ return 5; } A) 5 B) Promise that resolves to 5 C) undefined D) Promise that rejects with 5 Answer: B Explanation: An async function always returns a Promise; here it resolves with 5. Question 33. Which HTTP method is commonly used to retrieve data without causing side effects? A) POST B) PUT C) DELETE D) GET Answer: D Explanation: GET requests are safe and idempotent, used for data retrieval. Question 34. When using the Fetch API, which method converts a successful response body to a JavaScript object? A) response.text() B) response.json() C) response.blob() D) response.arrayBuffer() Answer: B Explanation: response.json() parses the JSON payload into a JavaScript object.
Practice Exam
A) em B) rem C) vh D) % Answer: B Explanation: rem (“root em”) is based on the root element’s font size. Question 40. Which attribute on the element enables lazy loading in modern browsers? A) loading="lazy" B) defer="true" C) async="true" D) preload="lazy" Answer: A Explanation: The loading attribute with value lazy defers image loading until needed. Question 41. Which performance metric measures the time when the largest text or image element becomes visible? A) First Contentful Paint (FCP) B) Time to Interactive (TTI) C) Largest Contentful Paint (LCP) D) First Meaningful Paint (FMP) Answer: C Explanation: LCP tracks when the biggest visible element is rendered. Question 42. Which technique reduces the number of HTTP requests by combining multiple CSS files into one? A) Minification B) Concatenation C) Compression D) Bundling Answer: B Explanation: Concatenation merges files, decreasing request count; bundling often includes both concatenation and other processing. Question 43. Which attribute can be added to a tag to hint the browser to prefetch a resource? A) rel="preload" B) rel="prefetch" C) rel="dns-prefetch" D) rel="preconnect"
Practice Exam
Answer: B Explanation: rel="prefetch" tells the browser to fetch the resource for future navigation. Question 44. Which CSS property can be used to hide an element visually but keep it accessible to screen readers? A) display:none B) visibility:hidden C) opacity:0 D) clip:rect(0,0,0,0) (or clip-path) Answer: D Explanation: Clipping the element removes it from visual flow while preserving accessibility. Question 45. Which ARIA attribute explicitly defines the role of a button that triggers a modal dialog? A) aria-label="Open dialog" B) role="dialog" C) aria-haspopup="dialog" D) aria-controls="modal" Answer: C Explanation: aria-haspopup="dialog" indicates the element opens a dialog. Question 46. Which keyboard key should be used to move focus to the next interactive element in a standard tab order? A) Enter B) Space C) Tab D) Esc Answer: C Explanation: Pressing Tab advances focus to the next focusable element. Question 47. Which Git command creates a new branch named feature/login and switches to it? A) git branch feature/login B) git checkout - b feature/login C) git switch feature/login D) git create feature/login Answer: B
Practice Exam
Question 52. Which Lighthouse audit category evaluates how quickly users can interact with page content? A) Performance B) Accessibility C) Best Practices D) SEO Answer: A Explanation: Lighthouse’s Performance category includes metrics like TTI and FCP. Question 53. In React, which hook replaces componentDidMount for functional components? A) useEffect(() => {}, []) B) useState C) useContext D) useReducer Answer: A Explanation: useEffect with an empty dependency array runs once after the component mounts. Question 54. Which concept describes the virtual representation of the UI that React uses to minimize direct DOM manipulations? A) Shadow DOM B) Virtual DOM C) DOM Diffing D) Component Tree Answer: B Explanation: The Virtual DOM is a lightweight copy that React reconciles with the real DOM. Question 55. In a React component, props are best described as: A) Mutable state owned by the component B) Read‑only data passed from a parent C) Global variables D) Event listeners Answer: B Explanation: Props are immutable inputs supplied by a parent component. Question 56. Which lifecycle method (or hook) is called right before a component is removed from the DOM?
Practice Exam
A) componentWillUnmount B) componentDidUpdate C) useEffect cleanup D) Both A and C Answer: D Explanation: Class components use componentWillUnmount; functional components return a cleanup function from useEffect. Question 57. In Vue.js, which directive is used to render a list based on an array? A) v-if B) v-for C) v-bind D) v-model Answer: B Explanation: v-for iterates over data to generate repeated elements. Question 58. Which Angular decorator marks a class as a service that can be injected? A) @Component B) @Directive C) @Injectable D) @Pipe Answer: C Explanation: @Injectable enables the class to participate in Angular’s dependency injection. Question 59. In a single‑page application, which HTML5 API enables navigation without full page reloads? A) History API (pushState) B) Web Workers C) Service Workers D) IndexedDB Answer: A Explanation: The History API lets scripts modify the URL and handle navigation client‑side. Question 60. Which state management pattern uses a single immutable store and pure reducer functions? A) Flux B) MVC C) Redux D) MVVM Answer: C
Practice Exam
Question 65. Which Flexbox property makes flex items wrap onto multiple lines? A) flex-wrap: wrap B) flex-direction: column C) align-content D) justify-content Answer: A Explanation: flex-wrap controls whether items stay on one line or wrap. Question 66. Which CSS Grid property creates named areas for easier placement? A) grid-template‑areas B) grid-auto‑flow C) grid-gap D) grid-template‑columns Answer: A Explanation: grid-template‑areas lets you assign textual names to grid regions. Question 67. Which JavaScript operator checks both value and type equality? A) == B) === C) != D) !== Answer: B Explanation: === performs strict equality comparison (no type coercion). Question 68. What does the expression [1,2,3].reduce((sum, n) => sum + n, 0) evaluate to? A) 6 B) 5 C) 3 D) 0 Answer: A Explanation: The reducer adds each element, starting from 0, resulting in 1+2+3 = 6. Question 69. Which method creates a shallow copy of an array? A) slice() B) splice() C) concat() D) copyWithin() Answer: A Explanation: slice() without arguments returns a shallow copy of the entire array.
Practice Exam
Question 70. Which DOM method removes a child node from its parent? A) removeChild(node) B) deleteNode(node) C) detach(node) D) clear(node) Answer: A Explanation: parentNode.removeChild(child) removes the specified child element. Question 71. Which event fires when a user changes the value of a element and then blurs the control? A) input B) change C) blur D) select Answer: B Explanation: change fires after the value is committed (often on blur for select). Question 72. Which method returns a promise that resolves after a specified number of milliseconds? A) setTimeout B) setInterval C) Promise.resolve D) new Promise(resolve => setTimeout(resolve, ms)) Answer: D Explanation: Wrapping setTimeout in a Promise creates a delay that resolves after ms. Question 73. Which HTTP header indicates the media type of the request body? A) Accept B) Content-Type C) Authorization D) Cache-Control Answer: B Explanation: Content-Type describes the MIME type of the request payload.
Practice Exam
Answer: A Explanation: transition defines the property, duration, and timing for the change. Question 79. Which JavaScript feature allows you to import a default export from another module? A) import * as name from 'module' B) import {default as name} from 'module' C) import name from 'module' D) require('module') Answer: C Explanation: import name from 'module' imports the default export. Question 80. Which of the following is NOT a valid way to create a Set in JavaScript? A) new Set([1,2,3]) B) Set.of(1,2,3) C) new Set() D) new Set('abc') Answer: B Explanation: Set.of does not exist; Sets are created with the constructor. Question 81. Which method on the CanvasRenderingContext2D draws a rectangle outline? A) fillRect B) strokeRect C) clearRect D) drawRect Answer: B Explanation: strokeRect draws only the rectangle’s border. Question 82. Which ARIA attribute indicates that an element is currently expanded? A) aria-expanded="true" B) aria-hidden="true" C) aria-pressed="true" D) aria-live="polite" Answer: A Explanation: aria-expanded communicates the expanded/collapsed state.
Practice Exam
Question 83. Which Git command lists remote repositories configured for the local repo? A) git remote - v B) git remote list C) git fetch – list D) git branch - r Answer: A Explanation: git remote - v shows the names and URLs of remotes. Question 84. In a responsive layout, which CSS technique ensures that a column shrinks but never becomes smaller than 200px? A) min-width: 200px; flex-basis: 0; B) max-width: 200px; C) width: 200px; D) flex: 1 1 200px; Answer: D Explanation: flex: 1 1 200px sets a flex-grow, flex-shrink, and a flex-basis of 200px, acting as a minimum size. Question 85. Which JavaScript method can be used to debounce a function call? A) setInterval B) setTimeout C) requestAnimationFrame D) clearTimeout Answer: B Explanation: Debouncing typically uses setTimeout to delay execution until a pause occurs. **Question 86. Which attribute on the
