Challenge - Expert capstone
- HTML course
- Expert
- Lesson 39/39
- 8 min
Write an app skeleton that combines all expert topics.
Expert capstone: overview
This challenge asks you to build an expert portfolio page that brings the whole expert level together. The page should combine an accessible dialog, ARIA tabs, a multilingual head, a security package, and responsive images. Build the skeleton correctly: <!DOCTYPE html>, <html lang="en" dir="ltr">, charset and viewport in head.
For security add CSP and referrer metas; for multilingual add canonical and hreflang links. Use landmarks (header, nav, main, footer) in content, <picture> and <source> for images. Include an accessible dialog too.
Practice Head of the expert portfolio
Write the head of the expert portfolio. Start with <!DOCTYPE html>; use <html lang="en" dir="ltr"> as the root. In head add a CSP meta (http-equiv="Content-Security-Policy"), a referrer meta (name="referrer"), and a <link rel="canonical"> element.
Starter code
<!-- document type -->
<!-- root element -->
<!-- metadata: csp, referrer, canonical -->Sample solution
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="referrer" content="no-referrer">
<link rel="canonical" href="https://site.example/en/">
<title>Expert Portfolio</title>
</head>
<body>
</body>
</html>Practice Body of the expert portfolio
Write the body of the expert portfolio. Add the <header>, <nav>, and <main> landmarks in order, each with content. Inside <main> place a <picture> element containing a <source> tag. Finally add a <dialog> element with aria-modal="true".
Starter code
<!-- header region -->
<!-- navigation -->
<!-- main content -->
<!-- dialog -->Sample solution
<body>
<header>
<h1>Expert Portfolio</h1>
</header>
<nav>
<a href="/en/">Home</a>
</nav>
<main>
<picture>
<source srcset="cover-wide.webp" media="(min-width: 800px)">
<img src="cover-narrow.webp" alt="Portfolio cover image" width="800" height="600">
</picture>
<button>Open settings</button>
</main>
<dialog aria-modal="true" aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
<button>Close</button>
</dialog>
</body>Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which must be present in head by requirement?
- <meta name="author">
- <link rel="preconnect">
- <meta charset="utf-8"> Correct answer
- <meta name="theme-color">
Explanation: The charset meta declares the character encoding and is required.
2 Set the root element
<!DOCTYPE html>
<____>
<head>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
</head>
<body>
</body>
</html>Explanation: The root element for an English LTR page is set correctly.
3 Match the landmark elements
| Term | Meaning |
|---|---|
header |
Page header region |
nav |
Navigation links |
main |
Main content |
aside |
Side content |
footer |
Footer information |
4 What is the canonical link used for?
- Defines the language code
- Declares the page's SSL certificate
- Secures external links
- Marks the main version among duplicates Correct answer
Explanation: canonical marks the main page among duplicate versions.
5 Which of the following is true?
- aria-modal="true" declares the dialog is modal Correct answer
- CSP can only be set as an HTTP header
- canonical hides duplicate versions
- noopener only works in Chrome
Explanation: aria-modal="true" conveys the modal state to screen readers.