docs: W3Schools-Style Content Overhaul for all documentation files

[Wombatfreak6]

🔗 Related Issue

Closes #

---

📝 Description of Changes

Systematically overhauled the documentation content for all core web technologies (HTML, CSS, JavaScript, React, Node.js, and TypeScript). Refactored the intro, keyPoints, syntax, and example sections across all topics to follow a beginner-friendly, W3Schools-style format. The new content strictly adheres to a punchy "Subject -> verb -> fact" sentence structure to make learning highly accessible for beginners.

---

🏷️ Proposed Labels

• UI/UX
• Documentation
• CI/CD
• Backend Logic
• Anything else

---

📂 Core Files Changed

• project/src/data/docs/html.ts
• project/src/data/docs/css.ts
• project/src/data/docs/javascript.ts
• project/src/data/docs/nodejs.ts
• project/src/data/docs/react.ts
• project/src/data/docs/typescript.ts

---

🔍 Quality Assurance Checklist

Please check the boxes that apply to your changes ([x]):

🛠️ General Checks

• Self-Review: I have reviewed my own code/content for typos, formatting, and clarity.
• No Breakages: My changes do not break existing roadmaps or application functionality.

📄 Documentation & Data Changes (Roadmaps, JSON, Markdown)

• Data Validity: All resource links, roadmap steps, and data points are accurate and up to date.
• Formatting: Markdown tables, bullet points, and front matter are properly formatted and easy to read.

🎨 UI & Code Changes (Next.js, Tailwind, TypeScript)

• Build, Lint & Format: The project builds locally and passes all linting/formatting checks (npm run build or code formatting tools run without errors).
• Responsive Design: If this is a UI change, it looks great on both desktop and mobile screens.

---

📸 Verification & Screenshots

• UI/UX (User Interface / User Experience - how it looks and feels):
  N/A - Data content changes only. Core UI layout and components remain untouched.
• CI/CD (Continuous Integration / Continuous Deployment - the automated build/test pipeline):
  N/A

---

⚠️ IF YOU CHECKED "YES", YOU MUST ANSWER THE FOLLOWING:

• Which AI Model did you use? (e.g., GPT-4o, Claude 4.5 Sonnet):
• Which Platform/Tool? (e.g., Cursor, OpenCode, Codex, Claude Code, GitHub Copilot, standard web chat):
• What exactly did the AI do?:
• What exactly did YOU do?:
• What is the advantage of using this AI approach here?:

---

⚠️ Reviewer Notes

A small syntax error during the data formatting process was caught and resolved locally; the project successfully builds and renders all the new documentation strings dynamically without issues.

---

✅ The "I Swear I Didn't Break Anything" Pledge

• I have thoroughly tested these changes in my own local branch.
• I verified multiple times that this code compiles into a standalone build and does not break existing production features.

[vercel]

@Wombatfreak6 is attempting to deploy a commit to the Rishi Bhardwaj's projects Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for demontechroadmap ready!

Name	Link
🔨 Latest commit	4899487
🔍 Latest deploy log	https://app.netlify.com/projects/demontechroadmap/deploys/6a318e97606a34000896832d
😎 Deploy Preview	https://deploy-preview-156--demontechroadmap.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
demontech-roadmap	Ready	Preview, Comment	Jun 16, 2026 6:21pm