This note is from 8 months ago. You're viewing content from a previous lesson.
At the start of every class, please:
Please create a new file, named tw_template1.html and paste in this code:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Simple Tailwind Layout with Comments</title>
<!-- Tailwind via CDN (no build step) --> <script src="https://cdn.tailwindcss.com"></script></head><body class="min-h-screen bg-slate-100 text-slate-800"> <!-- BODY CLASSES: - min-h-screen: body takes at least full viewport height - bg-slate-100: light gray background - text-slate-800: dark gray default text color -->
<!-- NAVBAR - bg-white: white background - border-b border-slate-200: light gray bottom border --> <header class="bg-white border-b border-slate-200"> <nav class="mx-auto max-w-6xl h-12 px-4 flex items-center justify-between"> <!-- NAV CLASSES: - mx-auto max-w-6xl: center content, limit width to ~96rem - h-12: height 3rem - px-4: horizontal padding - flex items-center justify-between: flexbox, center vertically, space between --> <a href="#" class="font-semibold">My App</a> <!-- hidden sm:flex: hidden on mobile, flex on small (≥640px) gap-4: spacing between items text-sm: smaller text size --> <div class="hidden sm:flex gap-4 text-sm"> <a href="#" class="hover:text-slate-900">Docs</a> <a href="#" class="hover:text-slate-900">About</a> </div> </nav> </header>
<!-- LAYOUT GRID - mx-auto max-w-6xl: center and max width - px-4 py-6: padding - grid gap-6: grid layout with gap - md:grid-cols-[220px_1fr]: 2 columns at ≥768px (220px sidebar + rest main) --> <div class="mx-auto max-w-6xl px-4 py-6 grid gap-6 md:grid-cols-[220px_1fr]"> <!-- SIDEBAR --> <aside class="bg-white border border-slate-200 rounded-lg p-3"> <!-- Sidebar classes: - bg-white: white background - border border-slate-200: thin border - rounded-lg: rounded corners - p-3: padding --> <p class="text-xs font-semibold uppercase text-slate-500 mb-2">Menu</p> <!-- text-xs: very small text font-semibold: slightly bolder uppercase: all caps text-slate-500: medium gray text mb-2: margin bottom --> <nav class="space-y-1 text-sm"> <!-- space-y-1: vertical spacing between links text-sm: small text --> <a href="#" class="block rounded px-2 py-1 hover:bg-slate-100">Dashboard</a> <a href="#" class="block rounded px-2 py-1 hover:bg-slate-100">Projects</a> <a href="#" class="block rounded px-2 py-1 hover:bg-slate-100">Reports</a> <a href="#" class="block rounded px-2 py-1 hover:bg-slate-100">Settings</a> <!-- block: link behaves like block element rounded: rounded corners px-2 py-1: padding (x=0.5rem, y=0.25rem) hover:bg-slate-100: light gray background on hover --> </nav> </aside>
<!-- MAIN CONTENT --> <main class="bg-white border border-slate-200 rounded-lg p-4 min-h-[50vh]"> <!-- Main content classes: - bg-white: white background - border border-slate-200: thin gray border - rounded-lg: rounded corners - p-4: padding (1rem) - min-h-[50vh]: at least half screen height --> <h1 class="text-xl font-semibold">Main Content</h1> <!-- text-xl: larger text size font-semibold: slightly bolder --> <p class="mt-1 text-sm text-slate-600">Replace this with your page content.</p> <!-- mt-1: margin-top small text-sm: smaller text text-slate-600: medium gray text -->
<!-- Example cards --> <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> <!-- mt-4: top margin grid: grid layout gap-4: spacing sm:grid-cols-2: 2 columns on small screens (≥640px) lg:grid-cols-3: 3 columns on large screens (≥1024px) --> <section class="rounded border border-slate-200 p-3"> <!-- rounded: rounded corners border border-slate-200: light border p-3: padding --> <h2 class="font-medium">Card 1</h2> <p class="text-sm text-slate-600 mt-1">Short description.</p> </section>
<section class="rounded border border-slate-200 p-3"> <h2 class="font-medium">Card 2</h2> <p class="text-sm text-slate-600 mt-1">Short description.</p> </section>
<section class="rounded border border-slate-200 p-3"> <h2 class="font-medium">Card 3</h2> <p class="text-sm text-slate-600 mt-1">Short description.</p> </section> </div> </main> </div>
<!-- FOOTER --> <footer class="mt-8 border-t border-slate-200 bg-white"> <!-- mt-8: margin-top (space before footer) border-t border-slate-200: top border bg-white: white background --> <div class="mx-auto max-w-6xl px-4 py-4 text-sm text-slate-600"> <!-- mx-auto max-w-6xl: centered container, max width px-4 py-4: padding text-sm: smaller text text-slate-600: medium gray text --> © <span id="y"></span> Example Co. </div> </footer>
<!-- Tiny helper: insert current year in footer --> <script>document.getElementById('y').textContent = new Date().getFullYear();</script></body></html>
Change the Colors
Modify the bg-slate-100 on the <body> to a different background color (e.g., bg-blue-50 or bg-green-100).
Change the navbar background (bg-white) to something else, and notice how the border color (border-slate-200) interacts.
Edit the Navbar
Add a new link (e.g., "Contact") next to “Docs” and “About.”
Make one link bold (font-bold) and another italic (italic).
Customize the Sidebar
Add one more menu item under “Settings.”
Change the hover effect from hover:bg-slate-100 to hover:bg-blue-100.
Adjust the Layout
Change the sidebar width from md:grid-cols-[220px_1fr] to md:grid-cols-[300px_1fr] and observe how much space it takes.
Try removing the grid classes entirely and see how the layout changes.
Modify the Cards
Add a fourth card and adjust the grid so it fits (sm:grid-cols-2 lg:grid-cols-4).
Change the corner style from rounded to rounded-full and see the difference.
Footer Customization
Replace “Example Co.” with your own name.
Add a new line under the copyright with a link (<a class="text-blue-600 hover:underline">) to a favorite website.
Typography Experiment
Change the main heading <h1> size from text-xl to text-3xl.
Change the text color of the main paragraph to text-red-600 or text-green-700