MR. D · ROOM A112
Coding Basics
Change the code. Run it. See what you made.
Edit the text between tags, then click Run Code (Ctrl/⌘ + Enter). HTML and CSS work here; JavaScript is disabled in the preview.
Progress saves in this browser only, not to your Google account or to Mr. D. On shared devices, download your file before leaving. index.html is the usual filename for a website’s home page.
Try it: build your café
- Replace “Corner Café” with your own brand name.
- Write a tagline for your target customer.
- Add a third menu item with its price.
- Change the background and heading colors.
- Add a paragraph explaining why customers should choose you.
Predict what will change before clicking Run Code. Then explain which tag or style made it happen.
How to read the code
<h1>Your café name</h1>
<h1> opens a heading. The text is its content. </h1> closes it. Most elements use a matching pair.
HTML describes the content. CSS controls its appearance. Put CSS inside <style> in the page’s <head>.
Example: h1 { color: navy; } makes the main heading navy.
Your HTML cheat sheet
| Code | What it does | Try changing |
|---|---|---|
<h1>Main heading</h1> | The main page heading | Your business name |
<h2>Our menu</h2> | A section heading | A menu or About section |
<p>Welcome!</p> | A paragraph | Your tagline or description |
<a href="https://mrdhq.com">Visit Mr. D</a> | A link; href is the destination | The URL and link text |
<img src="photo.jpg" alt="Our café"> | An image; alt describes it | Use a reachable image URL in this editor. Local files require hosting together. |
<ul><li>Latte</li></ul> | A list with one item | Add another <li> item inside the list |
<button>Order now</button> | A button | Its label; a button needs extra code to perform an action |
<strong>Fresh daily</strong> | Important text, usually bold | Highlight a key selling point |
Preview tip: links open inside the preview and some websites block that. External images may be filtered at school. The built-in examples need no external resources.