Maya's Portfolio, The Page Behind HTML, CSS and JavaScript

This is the page used in the lecture to separate what a website says, how it looks, and what it does when you touch it.

• https://maya-portfolio-orcin.vercel.app

You build something like this in a few days.

Do these three things on it

One. Look at what is on the page. The headline, the paragraph about her, the pictures of her projects, the small buttons that say All and Mobile App. Every word and every box you can point at is written down in one file, and that file is HTML.

Two. Stop looking at what is on the page and look at how it looks. The colours, the amount of space around everything, the headline being large while the small print stays small. None of that is in the first file. It lives in a second one, called CSS. People also call it a style sheet, and they mean the same file.

Three. Click the button that says Mobile App. Seven projects become two. No word on the page changed, and no colour changed, and something still happened. That something is written in a third file, called JavaScript, and it holds everything the page does when you touch it.

Why they are kept apart

Maya can change every colour on this site tomorrow morning without touching a single word of what it says. And she can rewrite every word on it without one thing moving out of place.

If those two lived in the same file, changing either one would mean picking your way carefully through the other.

Three jobs, three files, and every website you have ever opened is built that way. All three sit together in one place on the computer, which you already know the word for. It is a folder. Developers tend to say directory instead.

---

This resource is part of

Claude Code: From Beginner to Pro Agentic AI Engineer

by Arun Nagarathanam

Take your skills to the next level with

AI GEO 2026: Get Recommended by ChatGPT, Google, Perplexity

by Arun Nagarathanam