Sidebar with main content in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a sidebar container using Tailwind CSS.

Tailwind

<div class="[1] bg-gray-200 h-screen p-4">
  Sidebar content
</div>

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

Aw-64

Bh-64

Cp-8

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using height classes instead of width for the sidebar container.

Using padding classes that don't affect width.

The class w-64 sets the sidebar width to a fixed size, which is common for sidebars.

2fill in blank

medium

Complete the code to create a flex container that places sidebar and main content side by side.

Tailwind

<div class="[1] h-screen">
  <!-- Sidebar and main content here -->
</div>

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

Aflex

Bgrid grid-cols-2

Cblock

Dinline-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using block which stacks elements vertically.

Using grid without defining columns.

The flex class creates a flex container that arranges children side by side by default.

3fill in blank

hard

Fix the error in the sidebar class to make it fixed on the left side of the screen.

Tailwind

<div class="[1] bg-gray-200 h-screen p-4">
  Sidebar content
</div>

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

Arelative left-0 bottom-0 w-64

Bfixed left-0 top-0 w-64

Csticky top-0 right-0 w-64

Dabsolute right-0 top-0 w-64

Attempts:

3 left

💡 Hint

Common Mistakes

Using absolute with right positioning instead of left.

Using relative which does not fix the sidebar.

The classes fixed left-0 top-0 w-64 fix the sidebar to the left side of the screen and set its width.

4fill in blank

hard

Fill both blanks to create a main content area that fills the remaining space next to the fixed sidebar.

Tailwind

<main class="ml-[1] p-6 [2]">
  Main content goes here
</main>

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

A64

Bflex-1

Cw-full

Dh-full

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add left margin to main content.

Using width classes that don't allow flexible resizing.

The class ml-64 adds left margin equal to the sidebar width, and flex-1 makes the main content fill remaining space.

5fill in blank

hard

Fill all three blanks to create a responsive sidebar and main content layout with Tailwind CSS.

Tailwind

<div class="[1] min-h-screen">
  <aside class="[2] [3] bg-gray-300 p-4">
    Sidebar content
  </aside>
  <section class="flex-1 p-6">
    Main content
  </section>
</div>

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

Aflex

Bw-56

Cmd:w-64

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using block on container which stacks elements.

Not using responsive width classes for sidebar.

The container uses flex to arrange children side by side. The sidebar has a base width w-56 and a medium screen width md:w-64 for responsiveness.

Practice

1. What is the main purpose of a sidebar in a web layout using Tailwind CSS?

easy

A. To replace the main content entirely

B. To add decorative images only

C. To organize navigation or extra information beside the main content

D. To hide content on all screen sizes

Solution

1. Step 1: Understand sidebar role

   A sidebar is typically used to hold navigation links or extra info next to main content.

2. Step 2: Compare options

   Only To organize navigation or extra information beside the main content correctly describes this purpose; others are incorrect uses of sidebars.

3. Final Answer:

   To organize navigation or extra information beside the main content -> Option C

4. Quick Check:

   Sidebar purpose = organize navigation/info [OK]

Hint: Sidebars hold extra info beside main content [OK]

Common Mistakes:

• Thinking sidebar replaces main content
• Using sidebar only for decoration
• Assuming sidebar hides content always

2. Which Tailwind CSS class combination correctly creates a horizontal layout with a sidebar and main content side by side?

easy

A. inline-block

B. block flex-col

C. grid grid-cols-1

D. flex flex-row

Solution

1. Step 1: Identify layout direction classes

   Tailwind's flex with flex-row arranges children horizontally side by side.

2. Step 2: Evaluate other options

   block flex-col stacks vertically, grid-cols-1 creates one column, and inline-block does not create a flex layout.

3. Final Answer:

   <code>flex flex-row</code> -> Option D

4. Quick Check:

   Horizontal layout = flex flex-row [OK]

Hint: Use flex with flex-row for horizontal side-by-side layout [OK]

Common Mistakes:

• Using flex-col for horizontal layout
• Using grid-cols-1 for two columns
• Using inline-block for layout

3. Given this Tailwind HTML snippet, what will be the width of the sidebar on a large screen?

<div class="flex">
  <aside class="w-1/4 bg-gray-200">Sidebar</aside>
  <main class="w-3/4 p-4">Main Content</main>
</div>

medium

A. 25% of the container width

B. 50% of the container width

C. 75% of the container width

D. 100% of the container width

Solution

1. Step 1: Understand width classes

   w-1/4 means the element takes one quarter (25%) of the container width.

2. Step 2: Confirm layout with flex

   Since the parent uses flex, the sidebar and main content sit side by side with widths 25% and 75% respectively.

3. Final Answer:

   25% of the container width -> Option A

4. Quick Check:

   w-1/4 = 25% width [OK]

Hint: w-1/4 means 25% width in Tailwind [OK]

Common Mistakes:

• Confusing w-1/4 with 1/2 or 75%
• Ignoring flex layout effect
• Assuming fixed pixel width

4. Identify the error in this Tailwind layout code for a sidebar and main content:

<div class="flex flex-col">
  <aside class="w-1/4 bg-blue-100">Sidebar</aside>
  <main class="w-3/4 p-4">Main Content</main>
</div>

medium

A. Missing background color on main content

B. Using flex-col stacks sidebar and main vertically, not side by side

C. w-1/4 and w-3/4 widths are invalid classes

D. flex class should be replaced with grid

Solution

1. Step 1: Analyze flex direction

   flex-col stacks children vertically, so sidebar and main appear one above the other.

2. Step 2: Check width classes and layout goal

   Widths w-1/4 and w-3/4 are valid but ignored in vertical stacking; to place side by side, flex-row is needed.

3. Final Answer:

   Using flex-col stacks sidebar and main vertically, not side by side -> Option B

4. Quick Check:

   flex-col stacks vertically, not side by side [OK]

Hint: Use flex-row for horizontal sidebar layout, not flex-col [OK]

Common Mistakes:

• Confusing flex-col with flex-row
• Thinking widths apply in vertical flex
• Ignoring layout direction effect

5. You want a sidebar that is hidden on small screens but visible on medium and larger screens, with main content filling the rest. Which Tailwind classes achieve this layout?

<div class="flex">
  <aside class="??? bg-gray-300">Sidebar</aside>
  <main class="??? p-4">Main Content</main>
</div>

hard

A. hidden md:block w-1/4 for aside and w-full md:w-3/4 for main

B. block w-1/4 for aside and w-3/4 for main

C. hidden w-1/4 for aside and w-full for main

D. md:hidden w-1/4 for aside and w-full md:w-3/4 for main

Solution

1. Step 1: Hide sidebar on small, show on medium+

   Use hidden md:block on aside to hide it on small screens and show from medium screens up.

2. Step 2: Set widths for responsive layout

   Sidebar gets w-1/4 on medium+ screens; main uses w-full on small and md:w-3/4 on medium+ to fill remaining space.

3. Final Answer:

   hidden md:block w-1/4 for aside and w-full md:w-3/4 for main -> Option A

4. Quick Check:

   Responsive show/hide + widths = hidden md:block w-1/4 for aside and w-full md:w-3/4 for main [OK]

Hint: Use hidden md:block and responsive widths for sidebar [OK]

Common Mistakes:

• Not hiding sidebar on small screens
• Using md:hidden instead of hidden md:block
• Not adjusting main content width responsively