Advanced Projects
Prerequisites: Level 3 — Advanced
Build these using templates, web components, performance techniques, and the security practices from Level 3.
1. A Web Component Library
Build three reusable custom elements — for example, <tab-list>,
<star-rating>, and <copy-button> — with shadow DOM, slots, keyboard
support, correct ARIA, and a demo page. Provide a declarative shadow DOM
version of one of them that renders without JavaScript.
2. A Fast, Secure Landing Page
A landing page that scores well on Lighthouse: correctly sized responsive images, lazy-loaded media below the fold, a preloaded hero image and font, deferred scripts, and a strict Content Security Policy with no inline scripts. Document each decision in HTML comments or a README.
3. A Comment System Front End
A page that shows user comments safely: comments are rendered with
textContent or a sanitizer, links get rel="nofollow ugc noopener", the
form includes a CSRF token field and correct validation, and the page
passes an automated accessibility check with no errors.