HTML inside your pages

About 40 minutesYou need: my-studio-site open in Cursor, npm run dev running, Chrome showing localhost:3000 beside Cursor, and your builder's notebook
This video is in the full courseGet the course to watch every video and read every lesson in full. GHS 399, paid once.Get the course · GHS 399
Video · 15:23
Goal

Read the HTML-like code (JSX) in your own pages: know what each tag and attribute does, find the code behind any part of your page, and make your first change to it by hand.

Why this matters

Open components/Hero.tsx in your project. If your first feeling is "I don't understand any of this", that's normal. In forty minutes, most of it will make sense.

Here's why it's worth the effort. Every time Cursor changes your site, it changes code like this. If you can read it, you can check that the AI changed the right thing, in the right place, and nothing else. You can also make a tiny change yourself in ten seconds instead of writing a prompt and waiting. And when you describe a problem to the AI, you can point at the exact line, which gets you a better answer.

In Lesson 0.1 you met HTML in Chrome's DevTools: the skeleton of a page. Your Next.js site uses the same HTML tags, written inside your code files in a format called JSX. This lesson teaches you to read it.

In the full lesson

  1. The idea in plain English
  2. Do it
  3. Check it worked
  4. Quick check
  5. What you can do now
Stage 2 · Make it workYou’ve seen the why. The how is in the course.

The step-by-step, the prompt to copy, the video and the check-it-worked list, for every lesson in all 15 modules. GHS 399 ($40), paid once by mobile money or card, yours to keep.

Get the course · GHS 399See what’s inside
Key wordsTagA word in angle brackets, like <p>, that marks a piece of the pageElementAn opening tag, its content and its closing tag, togetherClosing tagThe tag with a slash, like </p>, that ends an elementSelf-closing tagA tag with nothing inside that closes itself, like <br /> or <Hero />NestingElements inside other elements, like boxes inside boxesAttributeA setting inside an opening tag, like href="/contact"Semantic tagsTags whose names say what they mean: header, nav, main, section, footerJSXHTML written inside JavaScript. The format of your .tsx filesclassNameJSX's name for HTML's class: where the styles goFragment<> and </>: an invisible wrapper that adds nothing to the pageComponentA reusable block of page, written as a tag with a capital letter, like <Hero />Go to DefinitionCmd/Ctrl-click a name in Cursor to jump to the file where it's made
Already have the course? Open the full lesson