Sticky header and footer in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the header sticky at the top of the page.

Tailwind

<header class="bg-blue-600 text-white p-4 [1]">
  <h1 class="text-xl font-bold">My Website</h1>
</header>

Drag options to blanks, or click blank then click option'

Arelative

Bfixed bottom-0

Cabsolute top-0

Dsticky top-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed positioning at the bottom instead of sticky at the top.

Using relative positioning which does not stick.

Using sticky top-0 makes the header stick to the top when scrolling.

2fill in blank

medium

Complete the code to make the footer sticky at the bottom of the page.

Tailwind

<footer class="bg-gray-800 text-white p-4 [1]">
  <p>© 2024 My Website</p>
</footer>

Drag options to blanks, or click blank then click option'

Asticky top-0

Bfixed top-0

Csticky bottom-0

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using sticky top-0 which sticks to the top instead of bottom.

Using fixed top-0 which sticks to the top.

The sticky bottom-0 classes keep the footer visible at the bottom when scrolling.

3fill in blank

hard

Fix the error in the main content area to avoid it being hidden behind the sticky header.

Tailwind

<main class="p-4 [1]">
  <p>Welcome to the main content!</p>
</main>

Drag options to blanks, or click blank then click option'

Amb-16

Bmt-16

Cpt-0

Dpb-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin-bottom instead of margin-top.

Using padding-top 0 which does not add space.

Adding mt-16 (margin-top) pushes the main content below the sticky header to avoid overlap.

4fill in blank

hard

Fill both blanks to make the header and footer sticky and ensure the main content does not overlap them.

Tailwind

<header class="bg-blue-600 text-white p-4 [1]">
  <h1 class="text-xl font-bold">My Website</h1>
</header>

<main class="p-4 [2]">
  <p>Main content goes here.</p>
</main>

<footer class="bg-gray-800 text-white p-4 sticky bottom-0">
  <p>© 2024 My Website</p>
</footer>

Drag options to blanks, or click blank then click option'

Asticky top-0

Bmt-16

Cmb-16

Dfixed top-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed positioning for header which may cause overlap.

Adding margin-bottom instead of margin-top to main content.

The header uses sticky top-0 to stick at the top, and the main content uses mt-16 to avoid overlapping the header.

5fill in blank

hard

Fill all three blanks to create a sticky header and footer with proper spacing in the main content.

Tailwind

<header class="bg-blue-600 text-white p-4 [1]">
  <h1 class="text-xl font-bold">My Website</h1>
</header>

<main class="p-4 [2] [3]">
  <p>Here is the main content area.</p>
</main>

<footer class="bg-gray-800 text-white p-4 sticky bottom-0">
  <p>© 2024 My Website</p>
</footer>

Drag options to blanks, or click blank then click option'

Asticky top-0

Bmt-16

Cmb-16

Dfixed bottom-0

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting margin-bottom on main content causing overlap with footer.

Using fixed positioning for header or footer incorrectly.

The header is sticky at the top with sticky top-0. The main content has margin-top and margin-bottom (mt-16 mb-16) to avoid overlapping the header and footer.