Interview Kickstart
Reserve a seat
Reference page

Every section type, rendered once

This page exists so the section vocabulary has a worked example that a person can look at and a build can verify. It is not a marketing page and is not linked from anywhere.

  • 10 section types
  • No copy in JSX
  • Fully editable as data
ReferenceDesign systemSections v1
Reserve your free seatSee the curriculum
10
Section types
0
Hardcoded strings in JSX
6
Style knobs per section
Where our learners work
googlemetanetflixapplestripeuber
What you get

A feature grid with icons and detail lines

This one section replaces five separately hand-written grids on the old pages. Columns and accent are props, so the same component covers all of them.

Icon, title and detail

The standard three-part feature card.

Any column count

One to four, and it collapses on narrow screens by itself.

Accent by meaning

Blue by default, orange for urgency, green for outcomes.

Detail is optional

Omit it and the card becomes a compact icon and title row.

No media queries needed

No invented CSS variables

About

Prose, as an array of paragraphs

Each paragraph is its own string, so one can be edited without splitting text.

A single blob with newlines would force the admin panel to guess where one paragraph ends and the next begins, and a person adding a paragraph in the middle would have to edit around the delimiters. An array removes that whole class of problem.

Prose is also capped at a readable measure rather than running the full container width, which is a decision the section owns so no page has to remember it.

  • Every string is a prop, never a JSX literal
  • Every string on the page is an editable prop, not markup
  • Tokens only, so the palette cannot be escaped
Curriculum

Numbered modules with topics

Covers both the week-by-week and the module-by-module shape; `meta` carries whichever label applies.

01

Foundations

Weeks 1-2

The base the rest of the course assumes.

  • Section data as the source of truth
  • The style contract
  • Why tokens only
02

Composition

Weeks 3-6

Building a page from the vocabulary rather than from markup.

  • Choosing a section type
  • Ordering the page
  • When to add a new type
03

Review

Weeks 7-8
  • The build gate
  • Asserting a page renders
Meet your instructors

People cards, with initials when no photo is supplied

Asset paths are the one thing a generator must never invent, so a person with no image still renders as a finished card.

Nikhil Jain

Nikhil Jain

Machine Learning Engineer

7+ years experience

meta
Arjun Mehta

Arjun Mehta

Senior Applied Scientist

11+ years experience

google
Ravi Kumar

Ravi Kumar

Principal ML Engineer

13+ years experience

netflix
PR

Priya Raman

ML Engineering Manager

9+ years experience

apple
Career impact

Specific numbers only

House voice requires "25,000+ trained", never "thousands".

25,000+
Engineers trained
$385K
Highest offer
17,000+
Offers received

Raw markup, when no section fits

Tailwind classes from the locked palette, semantic tags, no scripts and no arbitrary values. Reorderable and deletable like any other section, because the section list is still structured data.

  • The palette is closed: bg-blue-500 does not exist
  • bg-[ #ff0000 ] and p-[ 13px ] are refused by the publish gate
  • ik-band-dark pairs the navy background with light text
In their words

Testimonials with attribution

The section vocabulary meant I could edit the copy on my own page without asking an engineer, and the page still looked exactly like the rest of the site.
AAAmmar AliMachine Learning Engineer
Regenerating one section instead of the whole page turned a two-minute wait into something that feels immediate.
IKIgor KuksovPlaced at a Tier-1 company
Every string is in one place now, so what a crawler reads and what a visitor reads cannot drift apart.
SKSana KapoorSenior Data Engineer
FAQ

Questions, answered without JavaScript

Native details and summary, so this stays a server component and every answer is in the HTML whether or not a panel is open.

Can the model invent a new section type?

No. The registry is a closed map and an unknown type is skipped at render time and rejected by the validation gate. That is what guarantees a generated page is on-brand.

Can a person restyle a section?

Yes, within the style contract: background, accent, padding, columns, alignment and button variant. Each is an enum that resolves to a design token, so a page can be restyled without going off-palette.

What happens to hand-authored pages?

Nothing. `sections` is optional on PageContent, so existing pages with bespoke JSX render exactly as before.

Registration

The lead form section, in trigger mode

The campaign identity comes from the page (content.form), not from this section. What the section carries is placement and chrome. In trigger mode it is a button; in inline mode the form mounts in the frame instead.

Next live session starts in

Checking the next session...

Trigger mode here rather than inline: this page has no campaign configured, so an inline form would sit waiting for a vendor bundle that has nothing to show.

Next step

A closing band, with the CTA passed in as a slot

  • No hooks in a server section
  • Degrades to readable if the slot is missing
Reserve your free seat

Takes ~30 seconds. No payment required to apply.