Using ChatGPT to build HTML components (student guide)
Use ChatGPT to generate small, tidy sections of HTML/CSS (components), then paste them into Dreamweaver safely.
Rules (non‑negotiable)
- No copying random code you don’t understand. If you can’t explain it, don’t use it.
- No JavaScript unless your teacher asks for it. HTML + CSS is usually enough.
- Keep everything in your site folder (images in img/).
- Use sensible file names (no spaces, no weird symbols).
The workflow
- Describe the component clearly (what it must include + where it goes).
- Ask for two outputs: (1) HTML snippet and (2) CSS for style.css.
- Paste HTML into your page (use Split view if helpful).
- Paste CSS into style.css under a comment.
- Save → Preview → Fix until it looks right.
How to paste into Dreamweaver (quick steps)
- Open index.html (or the page you’re editing).
- Switch to Design (or use Split).
- Paste the HTML inside the correct section: <header>, <main>, or <footer>.
- Open style.css and paste the CSS at the bottom.
- Preview in browser. If something breaks, undo and try again.
Prompt templates students can copy
Tell ChatGPT exactly what you need, and force it to output clean HTML/CSS.
Create a simple responsive navigation bar for a school website.
Pages: Home, About, Gallery, Contact.
Must work in Dreamweaver.
Provide (1) HTML snippet and (2) CSS for style.css.
No external libraries. No JavaScript.
Use semantic HTML and sensible class names.
Create a hero section with background image img/hero.jpg,
a heading, one short paragraph, and a button.
Mobile-friendly.
Provide HTML + CSS only.
No external libraries.
Create a 3-card grid (3 columns desktop, 1 column mobile)
with title + description in each card.
Provide HTML + CSS only.
No external libraries.