When will you use this?

You use layouts and styling in every page you build from your first screen to production.

• Course catalogs, lesson sidebars, and instructor dashboards all use layouts and shared navigation.
• When a student opens a lesson page, nested layouts keep the header and progress bar consistent.

Real-world: Flipkart-style catalog

The E-commerce team building Flipkart-style catalog uses CSS Modules to style course cards without class name clashes across pages. shoppers never see the TypeScript files — they just get a fast, reliable search, filters, and fast product listing pages.

Production-style code

/* components/CourseCard.module.css */
.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
}
.title {
  font-size: 1.125rem;
  font-weight: 600;
}

// components/CourseCard.tsx
import styles from './CourseCard.module.css';

export function CourseCard({ title }: { title: string }) {
  return (
    <article className={styles.card}>
      <h2 className={styles.title}>{title}</h2>
    </article>
  );
}

What happens in production: In Flipkart-style catalog, getting CSS Modules right means shoppers trust the search, filters, and fast product listing pages every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

/* components/CourseCard.module.css */
.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
}
.title {
  font-size: 1.125rem;
  font-weight: 600;
}

// components/CourseCard.tsx
import styles from './CourseCard.module.css';

export function CourseCard({ title }: { title: string }) {
  return (
    <article className={styles.card}>
      <h2 className={styles.title}>{title}</h2>
    </article>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Import styles object and use styles.card.
• Build tool hashes class names.
• Combine with global globals.css for resets and fonts.

Do this on your computer

1. Create CourseCard.module.css
2. Import styles in CourseCard.tsx
3. Add a second module for LessonRow — confirm no style bleed
4. Use composes or multiple classes if needed
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.

Remember

*.module.css = scoped classes. Import as styles object. Pair with globals.css for site-wide base.

Common questions