CodeBlanks Logo Icon CodeBlanks
Login Register

Project final - Widget

HTML course · Advanced · Lesson 51/56

Combine all parts, add noscript fallback and data-* hooks, then document.

Final step: combine and add fallback

In the final lesson we combine all parts and make the widget resilient. We add three things:

  • <noscript>: fallback message when JavaScript is off
  • data-* attributes: JavaScript hooks
  • A descriptive comment at the top of the document

The panel then works in no-JavaScript environments and external scripts can find the widget easily. These three small additions make the widget ready for production.

noscript and data-* hooks

The content of <noscript> is shown only when JavaScript is disabled. We put a message like 'This panel requires JavaScript' in our widget.

data-* attributes carry custom data; for example data-refresh="60" says the panel refreshes every 60 seconds. These attributes help JavaScript find and control the widget.

The panel stays both accessible and scriptable.

Exercise Finish the widget: comment, data-*, noscript

Take the widget from the previous lesson. Add three things:

1) At the very top of the document, before <!DOCTYPE>, put a descriptive comment: <!-- Sales Dashboard widget: KPI, table and template -->.

2) On the <section> tag add id="sales-widget", data-widget="sales" and data-refresh="60" attributes.

3) After </section>, before <template>, add a <noscript>; inside it put <p>This panel requires JavaScript; please enable JavaScript.</p>.

Show example solution 
<!-- Sales Dashboard widget: KPI, table and template -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sales Dashboard</title>
  </head>
  <body>
    <section id="sales-widget" data-widget="sales" data-refresh="60">
      <header>
        <h1>Sales Dashboard</h1>
      </header>
      <main>
        <article>
          <figure>
            <figcaption>Monthly revenue</figcaption>
            <p>$12,450</p>
          </figure>
          <table>
            <thead>
              <tr>
                <th>Product</th>
                <th>Sales</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Cotton t-shirt</td>
                <td>320</td>
              </tr>
              <tr>
                <td>Linen trousers</td>
                <td>184</td>
              </tr>
            </tbody>
          </table>
        </article>
      </main>
    </section>
    <noscript>
      <p>This panel requires JavaScript; please enable JavaScript.</p>
    </noscript>
    <template id="widget-template">
      <article>
        <header>
          <h2>New Sales Dashboard</h2>
        </header>
        <slot name="content">
          <p>Waiting for data</p>
        </slot>
      </article>
    </template>
  </body>
</html>

The widget is complete!

Congratulations! After 5 lessons you have a real sales dashboard widget: semantic shell, KPI and table, reusable template and graceful fallback, all together.

You can carry these patterns to your own panels: header/main/article shell, figure+table data structure, template+slot reuse, and noscript+data-* hooks.

Next step: style this widget with a CSS course or wire it to live data with JavaScript.

Test yourself

  1. When is the <noscript> element shown?

    • When JavaScript is disabled or fails to load
    • Only when CSS is disabled
    • Only on mobile browsers
    • Never, it's just treated as a comment
    Show answer

    When JavaScript is disabled or fails to load — Correct! noscript content is shown when JavaScript is disabled or fails to load.

  2. Complete the data-* attribute

    <section id="sales-widget" data-____="60">
</section>
    Show answer 
    <section id="sales-widget" data-refresh="60">
</section>

  3. Match the final-step concepts

    noscript
    Content when scripts off
    data-*
    Custom data attribute
    id
    Unique identifier
    comment
    In-document note

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone