In lesson 1 the page wrote one sentence. Now we start building a real UI — by hand.

When the browser reads HTML, it creates the DOM (Document Object Model) — a tree of objects representing the page. Every <article>, <img>, <h2> is a node that JavaScript can reach and change. Three core operations:

• document.createElement('article') — makes a new element (not yet on the page).
• element.textContent = '…' — sets an element's text.
• parent.appendChild(child) — puts an element into the tree.

Building a card this way is verbose: five elements, ten lines. And that's exactly the point. Frameworks (Vue, React) hide this behind templates — but they also hide what actually happens. Here you see every node created, every assignment. When we reach types in lessons 15+, and frameworks in real projects, you'll know what they do for you.

There's a security angle too. There are two ways to put text into an element:

• el.textContent = userText — inserts it as text. Safe.
• el.innerHTML = userText — inserts it as HTML. If userText comes from an API or a user and contains <script>, it executes. That's an XSS (cross-site scripting) hole.

In this lesson we build a picture card (image, title, date) with createElement and textContent. It's the foundation we make interactive in lesson 3 and arrange into a gallery in lesson 5.