Old Website Ko AI Se New Bana Diya 😲 | Web Design Upgrade🔥#ai #aitools #webdevelopment #datascience

Prompt:
You are a Staff+ level Frontend and Backend Engineer with 40+ years of experience,
having worked on product-grade websites at Apple and Amazon.

You design with discipline, clarity, and restraint.
You believe great design is minimal, calm, and precise.

I want you to design and build my institute website: “TwoDimension.in”.

The current site feels unprofessional and cluttered.
I want a website that feels:
• Apple-level clean and minimal
• Product-grade, not marketing-heavy
• Premium, calm, and trustworthy
• Clear to Indian students within 5 seconds

────────────────────────
STRICT TECH CONSTRAINTS
────────────────────────
• Use ONLY:
- HTML5 (semantic, accessible)
- CSS3 (custom, no frameworks)
- Vanilla JavaScript (minimal, purposeful)

• NO React / Vue / Angular
• NO Bootstrap / Tailwind
• NO jQuery
• NO sliders or flashy animations
• Directly uploadable to:
Hostinger → public_html (no build step)

────────────────────────
LANGUAGE & TONE
────────────────────────
• Entire website must be in English only
• Calm, professional, confident tone
• No hype, no marketing jargon
• No coaching-institute language

────────────────────────
DESIGN PHILOSOPHY (NON-NEGOTIABLE)
────────────────────────
• White or off-white background
• One subtle accent color only
• System or premium web-safe fonts
• Strong typography hierarchy
• Generous whitespace
• Pixel-perfect alignment
• Minimal icons, used only where needed

Think Apple.com, Stripe, Linear, Notion.
Avoid loud EdTech designs completely.

────────────────────────
ASSET-FIRST FILE STRUCTURE
────────────────────────
Design the project so assets are easy to replace without touching code.

Provide and use this structure:

/public_html
├── index.html
├── courses.html
├── about.html
├── contact.html
├── css/
│ └── main.css
├── js/
│ └── main.js
└── assets/
├── placements/ (placement photos only)
├── infographics/ (course flow, outcomes, learning path)
├── icons/ (premium, minimal icons only)
├── logos/
└── general/

Explain clearly:
• What each folder controls
• How to replace placement images (delete old → add new)
• Naming conventions for assets

────────────────────────
USER GOAL & CONVERSION
────────────────────────
The website must clearly answer:
• What does TwoDimension teach?
• Who is it for?
• What outcome can a student expect?
• How to enquire about fees?

Primary actions must be obvious and calm:
• Fill enquiry form
• WhatsApp message
• Direct phone call

Use premium, minimal WhatsApp and phone icons.
CTAs must be visible but not aggressive.

────────────────────────
STEP-BY-STEP DELIVERY REQUIRED
────────────────────────

STEP 1: Architecture & Information Hierarchy
Explain page structure and what content should be shown or avoided.

STEP 2: Home Page (index.html)
Deliver full semantic HTML with:
• Clear hero section (one strong value statement)
• Visual clarity using infographics
• Placement section using images only
• Clear CTA area (Form, WhatsApp, Call)
• Product-company style footer

STEP 3: CSS (main.css)
• CSS variables
• Clean Grid/Flex layouts
• Typography-driven design
• No decorative styling
• Explain why minimal CSS looks more professional

STEP 4: JavaScript (main.js)
• Mobile navigation
• Form validation
• WhatsApp redirect with prefilled message
• Click-to-call logic
• No unnecessary JavaScript

STEP 5: Courses Page
• Outcome-focused structure
• Visual separation using infographics
• Subtle but clear enquiry CTAs

STEP 6: SEO & Performance
• Semantic HTML usage
• Meta tags
• Image optimization
• Fast loading on Indian mobile networks

STEP 7: Hostinger Deployment
• Exact steps to upload files
• Common mistakes to avoid
• How to update assets safely

────────────────────────
ABSOLUTE AVOID
────────────────────────
• Loud colors
• Stock photo overload
• Over-promising claims
• Coaching-style visuals
• Too many icons or CTAs
• Fancy effects without purpose

────────────────────────
FINAL EXPECTATION
────────────────────────
Deliver production-ready HTML, CSS, and JavaScript
that feels like it was built by a senior Apple engineer.

The website should be:
• Minimal
• Clear
• Trustworthy
• Easy to maintain for years

A student should immediately know what to do next:
Enquire via form, WhatsApp, or call — without confusion.
Is channel par aap Data Analysis aur Analytics skills Hindi me seekhenge.

Yahan aap Excel, Data Analysis concepts, real-world datasets, reporting, dashboards aur job-oriented preparation step-by-step sikhenge.

Aage chal kar Python, SQL, Power BI aur AI tools for Data Analysis bhi cover kiye jaayenge.

Agar aap Data Analyst, MIS Executive, Business Analyst ya Reporting profile target kar rahe ho, to ye channel aapke liye hai.

📌 Subscribe karke bell icon ON karo
📌 Daily practical learning + real examples

Видео Old Website Ko AI Se New Bana Diya 😲 | Web Design Upgrade🔥#ai #aitools #webdevelopment #datascience канала The Maddy Coder