12 min · Advanced
Reading Code When You Are New
Learn how a tiny web page is built, how to ask for a line-by-line reading, and why a secret never belongs in the chat.
Learning objectives
- Define code, a program, and a bug, then say what HTML, CSS, and JavaScript each control.
- Read an eight-line page and explain every tag in your own words.
- Ask for a line-by-line explanation plus a glossary, and refuse to paste secret keys.
01
Why this matters
Code looks hostile when every mark is unexplained, so people either freeze or paste a whole project into chat. You only need enough reading skill to check a small page and to notice when a reply wanders. This lesson uses eight lines on purpose. If you can teach those lines back, later projects will feel like editing, not sorcery.
02
Concept
Code is instructions a computer follows literally. It will not guess the spirit of a line. A program — a saved set of those instructions — does only what the file says. A bug — a difference between what you wanted and what happened — is a mismatch you can locate, not a verdict on you. You can read a small page without becoming a professional developer. You still have to explain it back in your own words.
HTML — the structure of a web page — marks headings, paragraphs, and buttons. CSS — the look — sets color, space, and type. JavaScript — behavior in the browser — runs when someone clicks or types. Python — a popular language for scripts — is often used outside the browser. This lesson stays with HTML so structure is clear before behavior. The eight lines sit in the example. Read them before you ask for help.
Line 1, the doctype, tells the browser to use modern rules. Line 2 opens html, the root. lang is an attribute — extra detail inside a tag — and it names English. A tag — a label around one part of the page — usually opens and later closes. Line 3 holds head and title together. The head is information about the page. The title is the text on the browser tab, not the big heading visitors see.
Line 4 opens body, the visible page. Line 5 is h1, a top heading. Line 6 is p, a paragraph. Line 7 is a button whose type is button, so it does not submit a form. A click does nothing yet, because no script is attached. Line 8 closes body and html. An API — a doorway one program uses to ask another program for data — may appear later. Keys are secrets and must not be pasted into chat.
03
Real-world example
Eight lines, then a glossary
Keep this page short enough to hold in your head. Line 1 is <!DOCTYPE html>. Line 2 is <html lang='en'>. Line 3 is <head><title>Class note</title></head>. Line 4 is <body>. Line 5 is <h1>Saturday class</h1>. Line 6 is <p>Kids bake at 10.</p>. Line 7 is <button type='button'>Show price</button>. Line 8 is </body></html>. Ask for a line-by-line explanation and a glossary of the tags. Then close the chat and say what the heading, the paragraph, and the button each do. If you cannot, ask about one line only. Do not paste any password, token, or key that happened to sit near the file on your machine.
04
Gemini demonstration
A realistic exchange. Open Gemini beside this page and try a version with your own facts.
You
Explain this eight-line page one line at a time, then give a glossary of doctype, html, head, title, body, h1, p, and button. Use plain words. Do not add CSS or JavaScript. Line 1 <!DOCTYPE html>. Line 2 <html lang='en'>. Line 3 <head><title>Class note</title></head>. Line 4 <body>. Line 5 <h1>Saturday class</h1>. Line 6 <p>Kids bake at 10.</p>. Line 7 <button type='button'>Show price</button>. Line 8 </body></html>.
Gemini
Line 1 tells the browser this is a modern page. Line 2 starts the page and says the language is English. Line 3 is the head, information about the page, and the title Class note is what the browser tab shows. Line 4 starts the visible body. Line 5 is the top heading Saturday class. Line 6 is a paragraph: Kids bake at 10. Line 7 is a button labeled Show price. Its type is button, so it does not submit a form, and no script is here to make a click do anything. Line 8 ends the body and the page. Glossary: doctype, modern-page marker. html, the root. head, page information. title, tab text. body, visible area. h1, top heading. p, paragraph. button, a clickable control.
You
I think the title tag is the large heading on the page, and the button already calculates a price. Correct only what I got wrong. Do not add features.
Gemini
The title is not the large heading. Title text, Class note, is for the browser tab. The large heading is the h1, Saturday class. Those are different tags with different jobs. The button also does not calculate a price. The label says Show price, but a label is not behavior. Behavior would require JavaScript, and this page has none. A click will not show a number, change the paragraph, or talk to another program. Nothing else in your note needs a correction. Try explaining the eight lines once more without looking, and stop if the title and the h1 blur together again.
05
Prompt breakdown
The prompt
Explain this eight-line page one line at a time, then give a glossary of doctype, html, head, title, body, h1, p, and button. Use plain words. Do not add CSS or JavaScript. Line 1 <!DOCTYPE html>. Line 2 <html lang='en'>. Line 3 <head><title>Class note</title></head>. Line 4 <body>. Line 5 <h1>Saturday class</h1>. Line 6 <p>Kids bake at 10.</p>. Line 7 <button type='button'>Show price</button>. Line 8 </body></html>.
- It asks for one line at a time, so the reply cannot skip a tag or hide inside a summary.
- The glossary list names every tag you must be able to say back.
- Plain words and a ban on extra CSS or JavaScript keep the answer inside the page you actually have.
- The eight lines are included, so the model explains this page rather than a generic template.
06
Common mistakes
Usually
Explain my entire project folder and also here is my API key so you can test it.
Better
Explain only these eight lines, one line at a time, and build a glossary. Do not send a key. A key is a secret and stays out of chat.
Usually
Rewrite this into a real website. I do not need to understand it.
Better
Explain the page. I will restate it without looking. Do not add features until I can name what each tag does.
Usually
The title and the big heading are the same thing, so I can ignore one of them.
Better
Ask which tag sets the browser tab and which tag is the visible heading. They are not interchangeable.
07
Practice exercise
Explain the eight lines back
Done when: You can explain the page without the model in front of you, and you never pasted a secret.
08
Challenge
Spot the tag you mixed up
Write a six-line explanation of the sample page from memory. Include one mistake on purpose, such as calling the title the visible heading, or claiming the button already shows a price. Ask Gemini to find the incorrect line and to leave the correct lines alone. Then fix your note yourself and cover the chat. Say the eight tags once more. If you still need the reply visible in order to speak, you are not done. Do not reward yourself by asking for a larger page. The point is ownership of these lines, not a longer file.
Hint: The title is the tab text. The h1 is the visible heading. The button label is not a calculation.
09
Key takeaways
- Code is literal instructions. A program is a saved set of them. A bug is a mismatch between intent and result.
- HTML is structure, CSS is look, and JavaScript is browser behavior. Python is a common language for scripts.
- Ask for a line-by-line explanation and a glossary, then teach the page back without the model.
- An API is a doorway between programs. Keys are secrets and do not go in the chat.
10