About this Project

This project started from a desire to learn about web development

To do so, I asked Chat GPT to design a curriculum and introduce topics gradually

The result is this abomination, part documentation, part learning exercise

Original Prompt

Remember our first chat, you designed and delivered a Python course from basics to more advanced topics, giving me tasks, but minimal code so I could try to work things out for myself?
Could you design and teach something similar, but logically introducing HTML, JS and CSS as they each become relevant? It's all good and well for me to ask for a webpage, but I'd rather learn and understand the fundamentals so I can do it myself.
The following Section written by ChatGPT:

Course Overview: HTML, CSS, JS - The Practical Way

Philosophy:

  • Teach concepts when they're needed
  • Avoid code dumps—minimal scaffolding, you fill in the gaps
  • Real-world project mindset (not abstract examples)
  • You build and explore, I guide and clarify

Stage 1: HTML - The Structure

LessonTopics CoveredTask
1. The SkeletonBasic HTML tags: <!DOCTYPE>, <html>, <head>, <body>, <h1>-<p>Create a page with title, heading, and paragraphs
2. Lists & Links<ul>, <ol>, <li>, <a href="">Add ordered/unordered lists and internal/external links
3. Images & Semantic Tags<img>, alt text, <header>, <nav>, <main>, <section>, <footer>New page with local + remote images, semantic structure

Stage 2: CSS - The Styling

LessonTopics CoveredTask
4. Intro to CSSExternal stylesheet, inline vs internal, selectorsStyle your current pages: colors, fonts, spacing
5. Box Model & LayoutMargin, padding, borders, width/height, displayStyle your sections; practice spacing and layout
6. Classes & ReuseClass selectors, avoiding repetition, DRYRefactor repeated styles using classes
7. Flexbox Introdisplay: flex, alignment, spacing, directionAlign nav links, arrange content side by side

Stage 3: JavaScript - The Behavior

LessonTopics CoveredTask
8. First Script<script>, variables, console.log()Add a script that prints or interacts with your page
9. Events & DOMonclick, document.querySelector(), manipulating contentAdd a button that changes text/image/etc
10. Forms & Input<input>, addEventListener, basic validationAdd a form that responds to input

Bonus Modules

  • Responsive design (media queries)
  • CSS Grid
  • JavaScript modules
  • File structure & deployment
  • Accessibility best practices
  • Integrating APIs (weather, GitHub, etc.)

Structure So Far

  • index.html – Landing page: Navigation and Readme
  • lessons\html\lesson-1-the-skeleton.html - Lesson 1: The Skeleton
  • lessons\html\lesson-2-lists-and-links.html - Lesson 2: Lists and Links
  • lessons\html\lesson-3-images-and-semantic-tags.html - Lesson 3: Images and Semantic Tags
  • lessons\html\template.html - Template: Basic HTML Layout for further Lessons
  • lessons\css\ - Placeholder Folder for CSS lessons
  • lessons\javascript\ - Placeholder Folder for Javascript Lessons
  • img\ - Directory for Images

Current Status

You're at the end of Lesson 3, about to begin Lesson 4: Intro to CSS.