Challenge - 5 Problems
HTML Mastery Badge
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ rendering
intermediate2:00remaining
What will this HTML page display?
Look at this HTML code. What text will you see on the page when opened in a browser?
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Page</title> </head> <body> <h1>Welcome to my website</h1> <p>This is my first page.</p> </body> </html>
Attempts:
2 left
💡 Hint
Remember that text inside
and
tags inside the
shows on the page.✗ Incorrect
The shows in the browser tab, not on the page itself.
and
tags inside the
contain the visible text. The📝 Syntax
intermediate2:00remaining
Which line fixes the missing closing tag error?
This HTML code is missing a closing tag. Which option correctly fixes it?
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <h1>Heading <p>Paragraph text.</p> </body> </html>
Attempts:
2 left
💡 Hint
Every opening tag like
needs a matching closing tag with the same name.
✗ Incorrect
The
tag must be closed with
. Option B correctly closes it. Other options use wrong or missing closing tags causing errors.❓ selector
advanced2:00remaining
Which CSS selector targets only the main heading inside the body?
Given this HTML, which CSS selector will style only the
inside ?
HTML
<!DOCTYPE html> <html lang="en"> <head> <style> /* Your CSS selector here */ </style> </head> <body> <h1>Main Heading</h1> <section> <h1>Section Heading</h1> </section> </body> </html>
Attempts:
2 left
💡 Hint
The > selector means direct child only.
✗ Incorrect
Option C selects only elements that are direct children of . The main heading is a direct child, but the section heading is nested inside
elements that are direct children of . The main heading is a direct child, but the section heading is nested inside .
❓ layout
advanced2:00remaining
How to center a div horizontally and vertically using Flexbox?
You want to center a
inside the body both horizontally and vertically. Which CSS code achieves this?
HTML
<!DOCTYPE html> <html lang="en"> <head> <style> body { height: 100vh; /* Your CSS here */ } div { width: 200px; height: 100px; background-color: lightblue; } </style> </head> <body> <div>Centered Box</div> </body> </html>
Attempts:
2 left
💡 Hint
Flexbox can align items both horizontally and vertically easily.
✗ Incorrect
Option A uses flexbox on the body to center the div horizontally and vertically. Other options either only center horizontally or cause layout issues.
❓ accessibility
expert2:00remaining
Which attribute improves accessibility for a navigation menu?
You have a navigation menu in your HTML. Which attribute helps screen readers understand it is a navigation region?
HTML
<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav>
Attempts:
2 left
💡 Hint
Roles describe the purpose of elements to assistive technologies.
✗ Incorrect
Adding role="navigation" explicitly tells screen readers this is a navigation section. aria-hidden hides content from screen readers, tabindex affects keyboard focus, and alt is for images.