Web Development Technical Assessment – Perfoptim

Web Development Technical Assessment

HTML5, CSS3 & JavaScript | Perfoptim Screening Test

Candidate Information

Please fill your details before starting the test. Results will be automatically emailed.

Full Name

Email Address

Phone Number

Qualification

Test Guidelines:

50 questions on HTML5, CSS3 & JavaScript
30-minute time limit with auto-submit
2 marks per question (Total: 100 marks)
Results will be emailed to you and Perfoptim
Timer cannot be paused once started
All questions must be attempted

Fee Structure Based on Performance:

Below 60%: Full Training Fee Required

60% – 80%: No Fee, No Stipend

Above 80%: Company Will Pay Stipend

Web Development Technical Assessment

Time Remaining

30:00

1. Which HTML5 semantic element should be used for independent, self-contained content?

article section div aside

2. What is the purpose of the data-* attribute in HTML5?

To store custom data private to the page or application To validate form data To style elements To create links

3. Which attribute makes an input field required before form submission?

required validate mandatory necessary

4. What is the correct way to make a responsive image in HTML5?

img with max-width:100% and height:auto img with responsive attribute img with fluid attribute responsive-img element

5. Which HTML5 API is used to store data with no expiration date?

localStorage sessionStorage cookies webStorage

6. What is the difference between section and div elements?

section is semantic for thematic grouping, div is non-semantic They are exactly the same div is semantic and section is not section can only be used once per page

7. Which input type is best for email validation?

input type=”email” input type=”text” with pattern input type=”mail” input type=”text” with validate

8. What does the viewport meta tag do?

Controls page dimensions and scaling for responsive design Sets the page title Defines SEO keywords Loads external CSS

9. What is the correct HTML5 doctype?

DOCTYPE html DOCTYPE html5 DOCTYPE HTML PUBLIC html version=”5″

10. Which element is used to embed video content?

video media movie embed

11. What is the purpose of the async attribute in script tags?

Loads script asynchronously without blocking page rendering Makes JavaScript run faster Validates the script Compresses the script

12. Which attribute validates that input must be a valid URL?

type=”url” validate=”url” pattern=”url” format=”url”

13. What is the purpose of the canvas element?

To draw graphics on the fly via JavaScript To display images To create forms To embed videos

14. Which attribute enables form field auto-completion?

autocomplete=”on” autofill=”true” remember=”yes” save=”true”

15. What does SEO stand for and which HTML elements are most important?

Search Engine Optimization – title, meta, h1-h6, semantic tags Site Engine Operation – div, span Search Element Organization – table, form Secure Engine Output – script, style

16. What does the defer attribute do in script tags?

Script executes after HTML document is parsed Script executes immediately Script never executes Script executes before HTML parsing

17. What is the correct way to add external CSS to HTML?

link rel=”stylesheet” href=”styles.css” style src=”styles.css” css href=”styles.css” link src=”styles.css”

18. What is the CSS Box Model order from inside to outside?

Content → Padding → Border → Margin Margin → Border → Padding → Content Content → Border → Padding → Margin Padding → Content → Border → Margin

19. Which CSS property is used to create a flexbox layout?

display: flex layout: flex flex: true flexbox: on

20. What does the z-index property control in CSS?

The stacking order of positioned elements The font size The zoom level The element’s index in DOM

21. Which CSS selector has the highest specificity?

Inline styles (style attribute) ID selector (#id) Class selector (.class) Element selector (div, p)

22. What is the difference between position: absolute and position: relative?

Absolute is relative to nearest positioned ancestor, relative to its normal position They are the same Absolute cannot be moved, relative can Relative is faster than absolute

23. Which CSS property creates smooth transitions between property values?

transition animation transform smooth

24. What is the purpose of CSS Grid?

Two-dimensional layout system for rows and columns One-dimensional layout only Image gallery creation only Table replacement only

25. Which CSS property is used to create responsive layouts based on screen size?

@media queries @screen @responsive @device

26. What does box-sizing: border-box do?

Includes padding and border in element’s total width and height Removes borders from elements Makes boxes square Adds extra padding

27. Which pseudo-class selects every odd element?

:nth-child(odd) :odd-child :every-odd :alternate

28. What is the difference between display: none and visibility: hidden?

display:none removes element from layout, visibility:hidden hides but keeps space They work exactly the same visibility:hidden is permanent, display:none is temporary display:none is slower than visibility:hidden

29. Which CSS property controls the space between flex items?

gap or justify-content flex-space item-spacing flex-gap

30. What is CSS specificity and why is it important?

Determines which CSS rule applies when multiple rules target the same element Measures CSS file size Controls animation speed Defines browser compatibility

31. Which CSS unit is relative to the viewport width?

vw (viewport width) px (pixels) pt (points) cm (centimeters)

32. What is the purpose of CSS variables (custom properties)?

To store and reuse values throughout the stylesheet using –variable-name To create animations To import external files To validate CSS

33. Which property centers an element horizontally using flexbox?

justify-content: center align-items: center text-align: center center: horizontal

34. What is the difference between let, const, and var?

let/const are block-scoped, const can’t be reassigned, var is function-scoped They are all exactly the same var is the newest and best const is only for constants in math

35. What is an arrow function in ES6?

A shorter syntax for function expressions with lexical ‘this’ binding A function that returns arrows A deprecated feature A function that only works with numbers

36. What will console.log(typeof null) output?

“object” “null” “undefined” “number”

37. What is the purpose of the spread operator (…) in JavaScript?

To expand iterables into individual elements To create dots in the console To slow down code execution To create comments

38. What is destructuring in JavaScript?

A way to extract values from arrays or properties from objects into variables A way to delete objects A way to create loops A way to validate data

39. What does the async/await syntax do in JavaScript?

Handles asynchronous operations in a synchronous-looking manner Makes code run faster Creates animations Validates async code

40. What is the difference between == and === in JavaScript?

== compares values with type coercion, === compares values and types (strict equality) They are exactly the same === is outdated == is stricter than ===

41. What is a Promise in JavaScript?

An object representing the eventual completion or failure of an async operation A guarantee that code will always work A type of variable A loop structure

42. What will [1, 2, 3].map(x => x * 2) return?

[2, 4, 6] [1, 2, 3] 12 Error

43. What is the purpose of the ‘this’ keyword in JavaScript?

Refers to the object that is executing the current function Creates a new variable Refers to the previous line of code Always refers to the window object

44. What does the filter() method do on arrays?

Creates a new array with elements that pass the test function Removes all elements from array Sorts the array Changes all values to a specific number

45. What is event delegation in JavaScript?

Attaching event listener to parent element to handle events on children Deleting events from elements Creating multiple event listeners Preventing all events

46. What is the difference between null and undefined?

undefined means variable declared but not assigned, null is intentional absence of value They are exactly the same null is a newer feature undefined is an error

47. What does the reduce() method do?

Executes a reducer function on each element, resulting in a single output value Removes elements from array Makes array smaller Sorts array in descending order

48. What is a closure in JavaScript?

A function that has access to variables in its outer (enclosing) function’s scope A way to close browser windows A method to end loops A type of variable

49. What is the purpose of querySelector and querySelectorAll?

querySelector returns first match, querySelectorAll returns all matches using CSS selectors They create new elements They delete elements They are deprecated methods

50. What is the Event Loop in JavaScript?

Mechanism that handles asynchronous operations by managing the call stack and callback queue A loop that creates events A way to iterate through arrays A type of for loop

Test Completed!

Your Performance Category:

Results Submitted Successfully!

Your test results have been sent to:

Your Email:
Perfoptim Team: They will review and contact you within 24 hours

Email Delivery: Results may take 1-2 minutes to arrive. Please check spam folder.

Call Us

Get A Free Quote

Case Studies

Reinstating a Google My Business (GMB) Listing to Recover Local Visibility

Converting GMB Views into Leads for Service-Based Business

Read More....

Case Studies

Reinstating a Google My Business (GMB) Listing to Recover Local Visibility

Converting GMB Views into Leads for Service-Based Business

Read More....

Case Studies

Reinstating a Google My Business (GMB) Listing to Recover Local Visibility

Converting GMB Views into Leads for Service-Based Business

Read More....

Case Studies

Reinstating a Google My Business (GMB) Listing to Recover Local Visibility

Converting GMB Views into Leads for Service-Based Business

Read More....

Case Studies

Reinstating a Google My Business (GMB) Listing to Recover Local Visibility

Converting GMB Views into Leads for Service-Based Business

Read More....

Web Development Technical Assessment

Candidate Information

Test Guidelines:

Fee Structure Based on Performance:

Web Development Technical Assessment

Test Completed!

Your Performance Category:

Case Studies

Case Studies

Case Studies

Case Studies

Case Studies

Web Development Technical Assessment

Candidate Information

Test Guidelines:

Fee Structure Based on Performance:

Web Development Technical Assessment

Test Completed!

Your Performance Category:

Book Your Consultation

Fill out the form below, and we will be in touch shortly.