CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Card template

HTML course · Advanced · Lesson 40/56

Write a reusable card template with template and slot.

Card template summary

This group taught you four building blocks: <template> for the skeleton, <slot> for content, custom element naming for the component, and shadowrootmode for declarative shadow DOM. Together they form a reusable card.

The right card template works like this: template prepares the skeleton, slot receives outside content, the custom element name calls the card, shadow DOM shields the inner structure. These four are the base of modern reusable components.

Exercise Write a reusable card template

Add a <template> to body. Inside it put an <article>. Inside the article put an <h2> (text: Title) and a <slot> (fallback: No content).

Show example solution 
<body>
  <template>
    <article>
      <h2>Title</h2>
      <slot>No content</slot>
    </article>
  </template>
</body>

Test yourself

  1. Which is the correct card skeleton?

    • <div><h2>Title</h2></div>
    • <template><h2><slot></slot></h2><slot></slot></template>
    • <template><h2>Title</h2><p>Content</p></template>
    • <slot><template><h2>Title</h2></template></slot>
    Show answer

    <template><h2><slot></slot></h2><slot></slot></template> — Correct. A template with an h2 and a slot is the right card skeleton.

  2. Write the card title

    <template>
  <article>
    <h2>____</h2>
    <slot></slot>
  </article>
</template>
    Show answer 
    <template>
  <article>
    <h2>Title</h2>
    <slot></slot>
  </article>
</template>

  3. Match the card template concepts

    template
    skeleton template
    slot
    content insertion point
    custom element
    component name
    shadowrootmode
    shadow DOM mode

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