Episode 1 — Fundamentals / 1.11 — CSS Frameworks TailwindCSS and Bootstrap
1.11 — Exercise Questions: CSS Frameworks — TailwindCSS & Bootstrap
Practice questions for all eight subtopics in Section 1.11. Mix of class-writing exercises, grid layout challenges, comparison questions, and hands-on build tasks. Try each without reopening the lesson files first.
How to use this material (instructions)
- Read lessons in order —
README.md, then1.11.a→1.11.hin sequence. - Answer closed-book first — write an answer (code, bullets, or short paragraphs), then compare to the matching lesson.
- Hands-on exercises — build the components in a real HTML file with Tailwind or Bootstrap.
- Redo misses — retry the next day; mark weak subtopics.
- Interview prep — pair with
1.11-Interview-Questions.md.
1.11.a — Introduction to CSS Frameworks (Q1–Q7)
Q1. Define what a CSS framework is in your own words. Name three things a CSS framework typically provides.
Q2. List four problems that CSS frameworks solve for development teams.
Q3. Name the two dominant categories of CSS frameworks and give one example of each.
Q4. What does "utility-first" mean? How does it differ from "component-based"? (One sentence each.)
Q5. Name three trade-offs (costs) of adopting a CSS framework.
Q6. Why should you learn CSS fundamentals before adopting a framework?
Q7. A startup needs to ship an MVP in 2 weeks. A design agency needs to match a pixel-perfect Figma file. Which type of framework would you recommend for each, and why?
1.11.b — Utility-First vs Component-Based (Q8–Q14)
Q8. Compare the HTML for a styled button in Tailwind vs Bootstrap. Which has more classes? Which is more explicit about what CSS properties are applied?
Q9. What does "naming fatigue" mean in the context of CSS? How does utility-first CSS avoid it?
Q10. Why does utility-first CSS often result in a smaller production bundle than component-based CSS?
Q11. What is the "Bootstrap look"? Why does it happen with component-based frameworks?
Q12. Give two scenarios where component-based frameworks are a better choice than utility-first.
Q13. What does "fighting the framework" mean? Give an example with a component-based framework.
Q14. Write the same card component in both Tailwind and Bootstrap class names (markup only, no content needed — just the structural divs with classes).
1.11.c — TailwindCSS Setup & Basics (Q15–Q24)
Q15. What command installs TailwindCSS and creates the config file?
Q16. What is the content array in tailwind.config.js and why is it critical?
Q17. Write the three Tailwind directives that go in your CSS entry file.
Q18. What Tailwind class would you use for each of these CSS properties?
| CSS Property | Tailwind Class |
|---|---|
display: flex | ? |
padding: 1rem | ? |
background-color: #3b82f6 | ? |
border-radius: 0.5rem | ? |
font-weight: 700 | ? |
width: 100% | ? |
Q19. List Tailwind's five default responsive breakpoint prefixes and their minimum widths.
Q20. What does md:flex-row mean? What layout does the element have on mobile vs tablet?
Q21. Write Tailwind classes for a button that is blue, turns darker blue on hover, has a focus ring, and is semi-transparent when disabled.
Q22. What is the @apply directive? When should you use it, and when should you avoid it?
Q23. In tailwind.config.js, what is the difference between putting custom values in theme.extend vs directly in theme?
Q24. What does Tailwind's spacing scale of p-4 equal in rem and px (assuming 16px root)?
1.11.d — Building with TailwindCSS (Q25–Q34)
Q25. Write Tailwind classes for a <div> that is a flexbox container with centered items, space-between justification, and 1rem gap.
Q26. Write Tailwind classes for a 3-column grid on desktop, 2-column on tablet, single-column on mobile, with 1.5rem gap.
Q27. What do these spacing utilities mean? px-6, my-auto, -mt-4, space-x-2.
Q28. How do you make an element visible only on desktop (lg: and above) and hidden on mobile?
Q29. How do you make a different element visible only on mobile and hidden on desktop?
Q30. Write Tailwind classes for text that is 2xl size, bold weight, gray-900 color, and tight line-height.
Q31. What are the two values for darkMode in tailwind.config.js? How does each activate dark mode?
Q32. Write dark mode classes for a div that has a white background in light mode and gray-900 background in dark mode, with text that switches from gray-900 to gray-100.
Q33. Hands-on: Build a responsive card with Tailwind. Requirements: image on top, title, description, badge, and a "Read more" link. Must look good on mobile and desktop.
Q34. Hands-on: Build a responsive navbar with Tailwind. Requirements: logo on the left, nav links on the right (hidden on mobile with a hamburger icon visible instead).
1.11.e — Introduction to Bootstrap (Q35–Q41)
Q35. What are the three installation methods for Bootstrap? Which requires no build step?
Q36. Why does bootstrap.bundle.min.js include Popper.js? Which components need it?
Q37. Write the HTML for a basic Bootstrap grid with two equal-width columns inside a container.
Q38. Name Bootstrap's six breakpoints and their minimum widths.
Q39. What is the difference between .container, .container-fluid, and .container-md?
Q40. Where do you override SASS variables in Bootstrap — before or after the @import? Why?
Q41. Name five SASS variables you'd override to customize Bootstrap's look and feel.
1.11.f — Bootstrap Grid & Components (Q42–Q51)
Q42. Why is Bootstrap's grid based on 12 columns? What fractions does 12 enable?
Q43. What does col-12 col-md-6 col-lg-4 produce at each breakpoint? (Describe the layout.)
Q44. How do you center a single column horizontally using Bootstrap's offset system?
Q45. Write Bootstrap markup for a row with three cards: full width on mobile, three equal columns on lg and above.
Q46. What is the difference between g-4, gx-4, and gy-4 on a Bootstrap row?
Q47. Write the Bootstrap markup for a dismissible success alert with a close button.
Q48. Write the markup structure for a Bootstrap modal (trigger button + modal with header, body, footer).
Q49. What classes would you use for a Bootstrap form with a text input, email input, checkbox, and submit button — each with proper labels?
Q50. How does Bootstrap's navbar collapse work? What class controls when it collapses vs expands?
Q51. What does ms-auto do on a navbar's <ul> element?
1.11.g — Customizing Bootstrap (Q52–Q57)
Q52. What does !default mean in Bootstrap's SASS? Why does it let you override variables?
Q53. How would you add a custom color called "brand" (#8b5cf6) to Bootstrap's theme colors so that .btn-brand, .bg-brand, etc. work automatically?
Q54. Write a cherry-picked Bootstrap SASS import that includes only: functions, variables, mixins, reboot, grid, buttons, and utilities.
Q55. Why should custom components use Bootstrap's SASS variables ($spacer, $primary, $border-radius) instead of hard-coded values?
Q56. What is Bootstrap's utilities API? Give an example of creating a custom cursor utility class.
Q57. Name four techniques to reduce Bootstrap's production bundle size.
1.11.h — TailwindCSS vs Bootstrap (Q58–Q63)
Q58. Fill in this comparison table:
| Dimension | Tailwind | Bootstrap |
|---|---|---|
| Philosophy | ? | ? |
| Production CSS size | ? | ? |
| Pre-built components | ? | ? |
| JavaScript included | ? | ? |
| Customization method | ? | ? |
Q59. Give three scenarios where Tailwind is the better choice and explain why.
Q60. Give three scenarios where Bootstrap is the better choice and explain why.
Q61. Why is using both Tailwind and Bootstrap in the same project generally a bad idea? Name two specific problems.
Q62. Name three alternatives to Tailwind and Bootstrap (from any category). Describe each in one sentence.
Q63. A team is building an admin dashboard with many tables, forms, and modals. They want to ship within a month. Which framework would you recommend and why?
Practical Build Exercises (Q64–Q70)
Q64. Hands-on (Tailwind): Build a responsive pricing page with three pricing cards. Requirements: one card should be highlighted as "popular," cards stack on mobile, display side-by-side on desktop.
Q65. Hands-on (Bootstrap): Build a responsive landing page using Bootstrap's grid. Include: a full-width hero section, a 3-column features row, a 2-column "about" section, and a footer.
Q66. Hands-on (Tailwind): Build a login form with email and password fields, a "Remember me" checkbox, and a submit button. Add dark mode support.
Q67. Hands-on (Bootstrap): Customize Bootstrap by overriding $primary, $border-radius, and $font-family-base in SASS. Create buttons and cards that use your custom theme.
Q68. Hands-on (Tailwind): Create a responsive image gallery grid: 1 column on mobile, 2 on tablet, 4 on desktop. Each image should have a hover overlay effect.
Q69. Hands-on (Bootstrap): Build a registration form using Bootstrap's form components. Include: text inputs, a select dropdown, radio buttons (grouped with fieldset/legend), a checkbox, and validation feedback styles.
Q70. Comparison: Build the same component (a testimonial card with avatar, quote, and name) in both Tailwind and Bootstrap. Compare the HTML verbosity, visual result, and CSS bundle size.
Answer Hints
(Short reminders — expand in your own words when studying.)
| Q | Hint |
|---|---|
| Q1 | Collection of pre-written CSS: styles, layout system, design tokens |
| Q2 | Repetition, inconsistency, responsive complexity, cross-browser quirks |
| Q3 | Utility-first (Tailwind), component-based (Bootstrap) |
| Q5 | Learning curve, bundle size, design uniformity, customization limits, dependency |
| Q10 | Purging removes unused classes; component CSS ships everything |
| Q15 | npm install -D tailwindcss && npx tailwindcss init |
| Q16 | Tells Tailwind which files to scan; unscanned classes are purged |
| Q17 | @tailwind base; @tailwind components; @tailwind utilities; |
| Q18 | flex, p-4, bg-blue-500, rounded-lg, font-bold, w-full |
| Q19 | sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px |
| Q20 | Column on mobile; row at 768px+; md: = "at medium and above" |
| Q22 | Extracts utility patterns into custom class; avoid when component abstraction works |
| Q23 | extend adds to defaults; theme (no extend) replaces defaults |
| Q24 | 1rem = 16px |
| Q28 | hidden lg:block |
| Q29 | block lg:hidden |
| Q31 | "media" = OS preference; "class" = manual toggle via parent class |
| Q36 | Popper.js positions dropdowns, tooltips, popovers |
| Q39 | container = fixed max-width; container-fluid = full width; container-md = fluid until md |
| Q40 | Before — Bootstrap uses !default so pre-defined variables take precedence |
| Q42 | 12 is divisible by 2, 3, 4, 6 → easy halves, thirds, quarters |
| Q43 | Mobile: full width; md: half width (two per row); lg: one-third (three per row) |
| Q46 | g-4 both axes; gx-4 horizontal; gy-4 vertical |
| Q50 | navbar-expand-lg — collapses below lg, expands at lg+ |
| Q51 | Pushes the element to the right (margin-inline-start: auto) |
| Q52 | "Use this value unless already defined" — your earlier definition wins |
| Q57 | Cherry-pick imports, PurgeCSS, skip JS bundle, minify+gzip |
| Q61 | Conflicting resets, doubled bundle, overlapping class names |
← Back to 1.11 — CSS Frameworks: TailwindCSS & Bootstrap (README)