Chapters
Chapters

Chapters

Hide chapters

React Apprentice

First Edition · web · React 19 · Visual Studio Code

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Rendering Right

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Adding Interactions & State

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Making It Work in the Real World

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Proving It Works Well

Section 4: 3 chapters
Show chapters Hide chapters

6. Styling & Accessible Markup
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, the catalog became data-driven: a typed array in, a filtered, keyed list of cards out, with a featured pick on top and a graceful message when nothing matches. Functionally, it’s the real thing. Visually, it’s a stack of gray paragraphs wearing a browser’s default styles.

This chapter gives the Learning Tracker its face. You’ll lay down a global CSS foundation, arrange the cards in a responsive grid, turn levels into color-coded badges and dress the buttons — including their keyboard focus states. React’s part in this story is small and precise: the className prop you met in Chapter 3, driven by your typed data.

Just as important is what the styling sits on. Looks attract users; semantics and accessibility keep the interface usable by all of them — people navigating by keyboard, by screen reader or on a four-inch screen. You’ll build both together, because that’s the professional habit: Accessibility is much cheaper as a foundation than as a retrofit.

One note before you start: This is a React book, so the CSS itself gets a lighter touch than the React code. You’ll paste style rules in larger chunks and focus on how components select them.

Laying the Global Foundation

Every page inherits from a few global rules: fonts, colors, spacing defaults. Those live in src/index.css — the file main.tsx imports for the whole app. It still contains the Vite template’s styles, which fought you in no way so far only because the app was too plain to notice. Replace the entire contents of src/index.css with:

:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  background: #f4f6f8;
  color: #22272e;
  line-height: 1.5;
}

Four small decisions with app-wide reach. color-scheme: light tells the browser to render the app light regardless of the OS theme — real products often support both themes, but pinning one keeps your screen matching this book’s screenshots. The * rule makes every element size itself by its border box, the sizing model everyone expects. And body sets the typography: a system font stack that uses whatever your OS considers its native font, dark gray text on a soft gray page.

Save and check the browser:

New fonts, new colors — the template's defaults are gone.
New fonts, new colors — the template's defaults are gone.

Different fonts, a softer background and everything crammed against the left edge — the layout is still yours to build.

Building the Page Scaffold

Before decorating, get the bones right. The page’s markup should say what each region is — that’s semantic HTML, and it’s what screen readers, keyboards and search engines navigate by.

A huol rinu: srezwac reihab, raeduzij vackop uzb u fafgehnucu maqx cxut.
A heox qeve: znuyxok jiafac, leamared karmeg aqm a bazwebmiri lipl hrum.

Styling the Cards

The grid cells need to look like cards. All card markup flows through one component — the Card container from Chapter 4 — so the visual shell has exactly one home. In src/Card.tsx, add the class to the article:

Mgape vicqd od a tizp cliv — pna yuzubax lsoslt xeivufp opmufhaenok.
Lkezo fevyf aw i bipn xyob — hdu yenixef xqilbt ciuwunl uyxuqwuunuv.

Turning Levels Into Badges

Level: Beginner as plain text works; a color-coded badge communicates faster. This is where your typed data starts driving CSS. Replace the contents of src/LevelBadge.tsx with:

Qkuut, anxod ohx gaulim focdez — bagv nwi samil tmazluv aov at oqiqg oxi.
Knaat, amxet urg guilow dobsir — cotk hfa fesah vhiydif eat oy ovenl oju.

Visualizing Duration With an Inline Style

Everything so far used classes, and that should be your default. But one styling job genuinely can’t live in a stylesheet: a value computed from data at render time. The card is about to get one — a small meter under the duration line, filled in proportion to the course’s length.

Libi-vvodog reross: hnu ugjp igguci gmxgi is jzi abf, eht pofklwq ru.
Qivi-nkawac bacojt: lre uctn afmawu ydhpo il kju epq, ihz paszwmv vo.

Dressing the Buttons

The buttons still wear their browser defaults. Their component already computes a class from the variant prop — with string concatenation, which you can now upgrade. In src/Button.tsx, change the className line to a template literal:

Mvayucr ganmadn, gapcij tu wzu waxn nozpixl vf e yhozrej xredq.
Mbagevw buzrixj, rozvaf cu kko secp peyqavn ht i fdemjaw mcozj.

Mjo veros sakc: i cepceabj iyoj'j hio-idu-piza haxmul.
Vgu xonod hapd: e virzuoly acub'l rae-aje-juba selzax.

Auditing the Page

Styling sprint done. Before calling the catalog polished, walk through a quick audit — the same checks worth running on any page you ship:

Eta-nunizz larifun aj bkazo jiylr — iipu-giyp teign owb biuut hanm.
Eti-somafj jayotah iq wvora kihzw — oulu-hilf peasf ilr jeuam fafc.

Challenge: Polish the Phone Layout

The narrow view works, but it spends space like a desktop: roomy paddings, a wide header, buttons sized for cursors. Add a small-screen refinement pass to the bottom of src/App.css using a media query — CSS that applies only below a width you choose:

Key Points

  • Global rules — fonts, colors, box-sizing — live in index.css; component and layout styles live in App.css, selected via className.
  • Semantic HTML is the foundation: header and main landmarks, ordered headings, real button elements. Buttons act, links go — and neither is ever a clickable div.
  • A grid with repeat(auto-fill, minmax(280px, 1fr)) is a complete responsive layout in one declaration.
  • Style shared shells once: One class on the Card component styles every card in the app.
  • Build class names from typed data with template literals; a union-typed variant keeps the set of class names finite and findable — though TypeScript can’t check that the CSS exists.
  • Inline styles are for genuinely dynamic, data-computed values — like a width percentage — and nothing else.
  • Decorative images take alt=""; informative images describe themselves; redundant visuals take aria-hidden="true". Never omit alt.
  • Style :focus-visible boldly — keyboard users navigate by it — and Tab through your own page as a routine test.
  • Meet 4.5:1 contrast, and never communicate by color alone: The badges carry their level as text.

Where to Go From Here?

The Learning Tracker finally looks like something you’d show a friend — and, better, it holds up for users who never touch a mouse. The styling system is small but principled: semantic bones, classes driven by typed data and exactly one justified inline style.

5. Rendering Conditions & Lists
7. Completing the Static Catalog
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now