Learning Outcome
You built and published the basic page yourself. Now use ChatGPT to plan understandable improvements, generate known Bootstrap patterns, create homepage, gallery and static-blog content, debug with evidence, and review generated code critically.
1Prompt as an Iteration
Avoid Build me an entire photography website.
It hides decisions and produces too much code to review.
I have the Bootstrap 4.5 page from Tutorial 2.
Plan one change that adds a short About section.
Do not write code yet. Tell me which part of index.html will change.2Develop the Homepage
Improve my existing Bootstrap 4.5 photography homepage.
Keep it responsive and preserve my current image paths.
Add a hero, navigation, three featured-gallery cards and a footer.
Use accessible headings and image alt text.
Return one section at a time and explain where it goes.Version, components, constraints and output format reduce ambiguity. Afterward ask, Explain the Bootstrap classes you used and why.
3Create Galleries with Real Paths
Work from gallery landing page to cards, responsive image grid and individual gallery page.
Create the landscapes card for gallery.html with Bootstrap 4.5.
Link to landscapes.html and use images/landscapes/coast-sunrise.jpg.
Show me only the section that needs changing.Supply real filenames and paths; the browser cannot load invented assets.
4Add a Simple Static Blog
Let blog.html list posts, with each post in another HTML file.
Create one Bootstrap card on blog.html linking to blog-first-gallery.html.
Include title, date and summary. Then create that post with links back
to blog.html and index.html. Do not add a CMS or build system.Add and test one post before repeating.
5Ask for Explanations
Explain the Bootstrap classes you used and why.
Show me only the section that needs changing.
What should I test after this change?
Small outputs are easier to place, understand and reverse.
6Debug with Evidence
Instead of It doesn't work
, provide the exact error, relevant code, expected behaviour and actual behaviour.
The image should load on GitHub Pages but shows a broken icon.
It works locally. HTML: <img src="Images/coast.jpg" alt="Rocky coast">
The repository folder is images. Explain and show only the corrected line.7Keep Human Judgement in Charge
Generated code can be wrong, inaccessible, inconsistent or based on invented files. You own content, design choices, photographs, priorities and approval. AI accelerates implementation; review and test it at desktop and mobile widths.
8Practical Exercise
- Choose one meaningful feature, such as an About section.
- Ask for a plan without code, then only the necessary HTML.
- Ask for an explanation and review every path.
- Test locally at wide and narrow widths.
- Commit and verify it on GitHub Pages.