We're so confident of our products that we provide no hassle product exchange.
IT Specialist INF-306 Exam Overview:
| Certification Vendor: | Certiport (Pearson VUE) |
|---|---|
| Exam Name: | IT Specialist HTML5 Application Development (INF-306) |
| Exam Number: | INF-306 |
| Available Languages: | Portuguese, French, English, Simplified Chinese, Spanish, Korean, Japanese, German |
| Exam Format: | Multiple Choice, Performance-Based Tasks, Simulation-Based Questions |
| Exam Duration: | 50 minutes |
| Passing Score: | 700/1000 scaled score |
| Related Certifications: | IT Specialist – Computational Thinking IT Specialist – JavaScript IT Specialist – Networking IT Specialist Certification (General Series) |
| Certificate Validity Period: | No expiration (lifetime certification) |
| Exam Price: | Approx. USD 95 (varies by country/region) |
| Real Exam Qty: | Approximately 35–50 |
| Recommended Training: | Certiport Official IT Specialist Training Microsoft Learn Web Development Fundamentals (supporting prep) |
| Exam Registration: | Certiport Official Registration Pearson VUE Certiport Exams |
| Sample Questions: | IT Specialist INF-306 Sample Questions |
| Exam Way: | Proctored exam via Certiport testing centers or online proctoring (Pearson VUE delivery system) |
| Pre Condition: | No formal prerequisites required (recommended basic HTML, CSS, and JavaScript knowledge). |
| Official Syllabus URL: | https://certiport.pearsonvue.com/IT-Specialist/Certification/HTML5-Application-Development |
IT Specialist INF-306 Exam Syllabus Topics:
| Section | Objectives |
|---|---|
| Topic 1: JavaScript Programming | - Core JavaScript concepts
|
| Topic 2: Web Application Development Concepts | - Client-side storage
|
| Topic 3: HTML Fundamentals | - Forms and input elements
|
| Topic 4: CSS Styling | - Layout and responsive design
|
IT Specialist HTML5 Application Development Sample Questions:
You define the following layout:
< !DOCTYPE html >
< html >
< head >
< style >
section {
display: flex;
align-items: center;
flex-wrap: wrap;
min-height: 200px;
width: 700px;
background: linen;
}
section p {
flex: 1;
min-width: 200px;
padding: 20px;
}
< /style >
< /head >
< body >
< h2 > Exhibits to visit at the zoo < /h2 >
< section >
< p style= " order: 3 " > Lions < /p >
< p style= " order: 4 " > Tigers < /p >
< p style= " order: 2 " > Bears < /p >
< p style= " order: 1 " > Zoo Trip < /p >
< /section >
< /body >
< /html >
For each statement about the markup shown on the left, select True or False.
Correct Answer:
Explanation:
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 following output has more text than will fit in the element.
You need to apply CSS to contain the text inside the element ' s border without creating unneeded scrollbars or losing text. Which attribute setting should you use?
- A. overflow:hidden;
- B. overflow:auto;
- C. overflow:visible;
- D. overflow:scroll;
Correct Answer: B 🗳️
Explanation: Only visible for SurePassExams members. You can sign-up / login (it's free).
A form has four buttons with a class of item. You need to apply an event listener to all buttons to invoke the moveElement function when a button is pressed. Your code must ensure bubble capture.
Complete the markup by selecting the correct option from each drop-down list.
Note: You will receive partial credit for each correct selection.
Correct Answer:
Explanation:
First drop-down: " click " ,
Second drop-down: moveElement,
Third drop-down: false,
The correct event listener syntax is addEventListener(type, listener, useCapture). The first argument must be " click " because the function must run when a button is pressed. The second argument must be moveElement, not moveElement(), because the event listener expects a function reference. Using parentheses would call the function immediately while the page is loading instead of waiting for the user to press a button. The third argument controls the event phase. false means the listener runs during the bubbling phase, which is the normal behavior for button click handling. true would register the listener for the capturing phase instead.
Since the code uses document.querySelectorAll( " .item " ), it selects all elements with the class item. The for loop then attaches the same click listener to each selected button individually. This ensures that all four buttons invoke moveElement when clicked.
Which two application features should you implement by using session storage? Choose 2.
- A. Passing form data to a confirmation page
- B. Saving game play status for future use
- C. Passing data to a function within a program
- D. Saving temporary authentication tokens
- E. Saving customized UI/UX settings
Correct Answer: A,D 🗳️
Explanation: Only visible for SurePassExams members. You can sign-up / login (it's free).
You need to create the following form:
Complete the code by selecting the correct option from each drop-down list.
Correct Answer:
Explanation:
First blank: < legend > Fundraising Campaign < /legend >
Second blank: < progress id= " donate " value= " 30 " max= " 100 " > < /progress > Third blank: list= " donateAmount "
By Burton
