{"id":38,"date":"2026-07-18T04:54:21","date_gmt":"2026-07-18T04:54:21","guid":{"rendered":"https:\/\/zeecommunications.com\/?page_id=38"},"modified":"2026-07-18T05:36:05","modified_gmt":"2026-07-18T05:36:05","slug":"home","status":"publish","type":"page","link":"https:\/\/zeecommunications.com\/?page_id=38","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

<\/p>\n\n\n\n

<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nFuture Web AI \u2014 Learn \u2022 Build \u2022 Launch<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root{\r\n --bg:#05060A;\r\n --bg-elev:#0A0D16;\r\n --bg-elev-2:#10131F;\r\n --surface:rgba(255,255,255,.045);\r\n --surface-strong:rgba(255,255,255,.07);\r\n --border:rgba(255,255,255,.09);\r\n --border-strong:rgba(255,255,255,.16);\r\n --text:#F3F5FA;\r\n --text-muted:#8A93A6;\r\n --text-faint:#565F72;\r\n --blue:#3E7BFA;\r\n --blue-2:#6EA1FF;\r\n --cyan:#5CE1E6;\r\n --violet:#8B7CF6;\r\n --green:#25D366;\r\n --gold:#F2B84B;\r\n --radius-lg:22px;\r\n --radius-md:16px;\r\n --radius-sm:10px;\r\n --ease:cubic-bezier(.22,.61,.36,1);\r\n --shadow-glow:0 0 0 1px var(--border), 0 20px 60px -20px rgba(62,123,250,.25);\r\n}\r\nhtml[data-theme=\"light\"]{\r\n --bg:#F7F8FB;\r\n --bg-elev:#FFFFFF;\r\n --bg-elev-2:#F1F3F8;\r\n --surface:rgba(10,13,22,.035);\r\n --surface-strong:rgba(10,13,22,.055);\r\n --border:rgba(10,13,22,.09);\r\n --border-strong:rgba(10,13,22,.14);\r\n --text:#0B0E17;\r\n --text-muted:#5B6376;\r\n --text-faint:#8E96A6;\r\n --shadow-glow:0 0 0 1px var(--border), 0 20px 50px -24px rgba(62,123,250,.18);\r\n}\r\n\r\n*{margin:0;padding:0;box-sizing:border-box;}\r\nhtml{scroll-behavior:smooth;}\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--bg);\r\n color:var(--text);\r\n -webkit-font-smoothing:antialiased;\r\n overflow-x:hidden;\r\n transition:background .4s var(--ease),color .4s var(--ease);\r\n}\r\nh1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;}\r\n.mono{font-family:'JetBrains Mono',monospace;}\r\nimg{display:block;max-width:100%;}\r\na{color:inherit;text-decoration:none;}\r\nul{list-style:none;}\r\nbutton{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}\r\n.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}\r\n.eyebrow{\r\n display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;\r\n font-size:12px;font-weight:500;letter-spacing:.05em;color:var(--blue-2);\r\n background:var(--surface);border:1px solid var(--border);padding:6px 13px;border-radius:100px;margin-bottom:18px;\r\n}\r\n.eyebrow::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue);}\r\n.section{padding:120px 0;position:relative;}\r\n.section-head{max-width:600px;margin:0 auto 60px;text-align:center;}\r\n.section-head.left{margin:0 0 56px;text-align:left;}\r\n.section-head h2{font-size:clamp(28px,3.6vw,44px);font-weight:700;line-height:1.15;}\r\n.section-head p{margin-top:16px;font-size:16.5px;color:var(--text-muted);line-height:1.7;}\r\n.section-alt{background:var(--bg-elev);}\r\n\r\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:100px;font-weight:600;font-size:14.5px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s;position:relative;overflow:hidden;white-space:nowrap;}\r\n.btn-primary{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 16px 36px -12px rgba(62,123,250,.6);}\r\n.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 20px 44px -12px rgba(62,123,250,.75);}\r\n.btn-glass{background:var(--surface);border:1px solid var(--border);color:var(--text);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}\r\n.btn-glass:hover{background:var(--surface-strong);border-color:var(--border-strong);transform:translateY(-2px);}\r\n.btn-sm{padding:10px 18px;font-size:13px;}\r\n.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .6s var(--ease);pointer-events:none;}\r\n@keyframes ripple{to{transform:scale(3);opacity:0;}}\r\n\r\n\/* signature circuit motif *\/\r\n.circuit-line{position:absolute;pointer-events:none;opacity:.5;}\r\n.node-pulse{animation:nodePulse 2.4s ease-in-out infinite;}\r\n@keyframes nodePulse{0%,100%{opacity:.35;}50%{opacity:1;}}\r\n\r\n\/* ---------- Nav ---------- *\/\r\nheader{position:fixed;top:0;left:0;right:0;z-index:200;padding:18px 0;transition:background .4s,border-color .4s,padding .3s;}\r\nheader.solid{background:color-mix(in srgb, var(--bg) 78%, transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border);padding:12px 0;}\r\n.navbar{display:flex;align-items:center;justify-content:space-between;gap:20px;}\r\n.logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;}\r\n.logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--violet));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 18px -6px rgba(62,123,250,.7);}\r\n.logo-mark svg{width:18px;height:18px;color:#fff;}\r\n.nav-links{display:flex;align-items:center;gap:30px;}\r\n.nav-links a{font-size:14px;font-weight:500;color:var(--text-muted);transition:color .2s;}\r\n.nav-links a:hover{color:var(--text);}\r\n.nav-actions{display:flex;align-items:center;gap:10px;}\r\n.icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);transition:.25s;}\r\n.icon-btn:hover{background:var(--surface-strong);border-color:var(--border-strong);}\r\n.icon-btn svg{width:16px;height:16px;}\r\n.theme-toggle .sun{display:none;}\r\nhtml[data-theme=\"light\"] .theme-toggle .sun{display:block;}\r\nhtml[data-theme=\"light\"] .theme-toggle .moon{display:none;}\r\n.login-link{font-size:13.5px;font-weight:600;color:var(--text-muted);padding:10px 6px;}\r\n.login-link:hover{color:var(--text);}\r\n.nav-toggle{display:none;}\r\n\r\n\/* ---------- Hero ---------- *\/\r\n.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:140px;padding-bottom:90px;overflow:hidden;}\r\n.hero-glow{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:1100px;height:700px;background:radial-gradient(ellipse at center, rgba(62,123,250,.28), rgba(139,124,246,.12) 45%, transparent 70%);filter:blur(10px);pointer-events:none;z-index:0;}\r\n.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}\r\n.hero-copy h1{font-size:clamp(36px,4.6vw,58px);font-weight:700;line-height:1.08;letter-spacing:-0.025em;}\r\n.hero-copy h1 .grad{background:linear-gradient(100deg,var(--blue-2),var(--cyan) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}\r\n.hero-copy p{margin-top:22px;font-size:17px;line-height:1.7;color:var(--text-muted);max-width:520px;}\r\n.hero-btns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}\r\n.trust-badge{display:flex;align-items:center;gap:12px;margin-top:40px;}\r\n.stars{color:var(--gold);font-size:15px;letter-spacing:2px;}\r\n.trust-badge span{font-size:13.5px;color:var(--text-muted);}\r\n.trust-badge strong{color:var(--text);}\r\n\r\n\/* IDE mockup *\/\r\n.ide-mockup{position:relative;border-radius:var(--radius-lg);background:var(--bg-elev);border:1px solid var(--border);box-shadow:var(--shadow-glow);overflow:hidden;}\r\n.ide-topbar{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--bg-elev-2);}\r\n.ide-dot{width:10px;height:10px;border-radius:50%;}\r\n.ide-tab{margin-left:12px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:6px;}\r\n.ide-body{padding:22px 22px 26px;font-family:'JetBrains Mono',monospace;font-size:12.8px;line-height:1.9;color:var(--text-muted);}\r\n.ide-body .kw{color:var(--violet);}\r\n.ide-body .fn{color:var(--blue-2);}\r\n.ide-body .str{color:var(--cyan);}\r\n.ide-body .cm{color:var(--text-faint);}\r\n.ide-body .ln{display:inline-block;width:20px;color:var(--text-faint);user-select:none;}\r\n.ai-chip{position:absolute;bottom:-18px;left:-18px;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-glow);display:flex;align-items:center;gap:10px;max-width:230px;animation:float 5s ease-in-out infinite;}\r\n.ai-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex-shrink:0;}\r\n.ai-chip p{font-size:12px;color:var(--text-muted);line-height:1.4;}\r\n.ai-chip strong{display:block;font-size:12.5px;color:var(--text);margin-bottom:2px;}\r\n\r\n.float-badge{position:absolute;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:9px 13px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;box-shadow:var(--shadow-glow);display:flex;align-items:center;gap:7px;animation:float 6s ease-in-out infinite;}\r\n.float-badge .sw{width:7px;height:7px;border-radius:2px;}\r\n.fb-1{top:6%;right:-8%;animation-delay:.2s;}\r\n.fb-2{top:38%;right:-14%;animation-delay:1.4s;}\r\n.fb-3{bottom:14%;right:-4%;animation-delay:.8s;}\r\n@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}\r\n\r\n\/* ---------- Stats ---------- *\/\r\n.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}\r\n.stat-cell{background:var(--bg-elev);padding:38px 24px;text-align:center;}\r\n.stat-cell .num{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.4vw,42px);font-weight:700;background:linear-gradient(100deg,var(--blue-2),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}\r\n.stat-cell .lbl{margin-top:6px;font-size:13px;color:var(--text-muted);font-weight:500;}\r\n\r\n\/* ---------- Course cards ---------- *\/\r\n.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}\r\n.course-card{\r\n background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;\r\n transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;display:flex;flex-direction:column;\r\n}\r\n.course-card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow-glow);}\r\n.course-thumb{height:130px;position:relative;display:flex;align-items:center;justify-content:center;}\r\n.course-thumb svg{width:44px;height:44px;}\r\n.diff-tag{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:600;padding:5px 10px;border-radius:100px;font-family:'JetBrains Mono',monospace;}\r\n.course-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}\r\n.course-body h4{font-size:16.5px;font-weight:700;}\r\n.course-meta{display:flex;gap:14px;font-size:12px;color:var(--text-muted);}\r\n.course-meta span{display:flex;align-items:center;gap:5px;}\r\n.course-instructor{display:flex;align-items:center;gap:8px;margin-top:4px;}\r\n.instr-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--violet));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;}\r\n.course-instructor span{font-size:12px;color:var(--text-muted);}\r\n.course-body .btn{margin-top:auto;width:100%;}\r\n\r\n\/* ---------- Why choose ---------- *\/\r\n.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}\r\n.why-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:26px 20px;transition:.35s var(--ease);}\r\n.why-card:hover{background:var(--surface-strong);border-color:var(--border-strong);transform:translateY(-4px);}\r\n.why-icon{width:42px;height:42px;border-radius:12px;background:var(--bg-elev-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--blue-2);}\r\n.why-icon svg{width:20px;height:20px;}\r\n.why-card h4{font-size:15px;font-weight:700;margin-bottom:7px;}\r\n.why-card p{font-size:13px;color:var(--text-muted);line-height:1.6;}\r\n\r\n\/* ---------- Roadmap ---------- *\/\r\n.roadmap{position:relative;padding-left:0;}\r\n.roadmap-line{position:absolute;left:29px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--blue),var(--violet),var(--cyan));opacity:.4;}\r\n.roadmap-item{position:relative;display:flex;gap:28px;padding-bottom:52px;}\r\n.roadmap-item:last-child{padding-bottom:0;}\r\n.rm-node{width:60px;height:60px;flex-shrink:0;border-radius:18px;background:var(--bg-elev);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px;color:var(--blue-2);box-shadow:var(--shadow-glow);position:relative;z-index:1;}\r\n.rm-content{padding-top:8px;}\r\n.rm-content .stage{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;}\r\n.rm-content h4{font-size:19px;font-weight:700;margin-top:4px;}\r\n.rm-content p{font-size:14px;color:var(--text-muted);margin-top:6px;max-width:440px;line-height:1.65;}\r\n\r\n\/* ---------- Projects ---------- *\/\r\n.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}\r\n.proj-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-elev);transition:transform .4s var(--ease),border-color .3s;}\r\n.proj-card:hover{transform:translateY(-6px);border-color:var(--border-strong);}\r\n.proj-media{height:170px;position:relative;}\r\n.proj-body{padding:18px 20px 22px;}\r\n.proj-body h4{font-size:16px;font-weight:700;margin-bottom:10px;}\r\n.tech-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}\r\n.tech-tags span{font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:4px 9px;border-radius:100px;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);}\r\n.proj-body .btn{width:100%;}\r\n\r\n\/* ---------- Technologies ---------- *\/\r\n.tech-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;}\r\n.tech-badge{\r\n aspect-ratio:1;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;\r\n transition:.35s var(--ease);cursor:default;\r\n}\r\n.tech-badge:hover{background:var(--surface-strong);border-color:var(--border-strong);transform:translateY(-4px);box-shadow:var(--shadow-glow);}\r\n.tech-badge svg{width:26px;height:26px;}\r\n.tech-badge span{font-size:11px;font-weight:500;color:var(--text-muted);text-align:center;padding:0 4px;}\r\n\r\n\/* ---------- Testimonials ---------- *\/\r\n.testi-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px;}\r\n.testi-track::-webkit-scrollbar{display:none;}\r\n.testi-card{scroll-snap-align:start;flex:0 0 clamp(280px,31%,370px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;}\r\n.testi-card .stars{margin-bottom:14px;}\r\n.testi-card p.quote{font-size:14px;line-height:1.7;color:var(--text);margin-bottom:20px;}\r\n.testi-person{display:flex;align-items:center;gap:11px;}\r\n.testi-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--violet));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;font-family:'Space Grotesk',sans-serif;}\r\n.testi-person h6{font-size:13.5px;font-weight:700;}\r\n.testi-person span{font-size:11.5px;color:var(--text-muted);}\r\n.testi-nav{display:flex;justify-content:center;gap:10px;margin-top:26px;}\r\n.testi-nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:.25s;}\r\n.testi-nav button:hover{background:var(--surface-strong);border-color:var(--border-strong);}\r\n.testi-nav svg{width:15px;height:15px;}\r\n\r\n\/* ---------- Newsletter ---------- *\/\r\n.nl-card{\r\n position:relative;border-radius:32px;padding:70px 40px;text-align:center;overflow:hidden;\r\n background:var(--bg-elev);border:1px solid var(--border);box-shadow:var(--shadow-glow);\r\n}\r\n.nl-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(62,123,250,.3),transparent 70%);pointer-events:none;}\r\n.nl-card h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;position:relative;z-index:1;}\r\n.nl-card p{margin-top:12px;color:var(--text-muted);font-size:15px;position:relative;z-index:1;}\r\n.nl-form{display:flex;gap:10px;max-width:420px;margin:30px auto 0;position:relative;z-index:1;}\r\n.nl-form input{flex:1;padding:14px 16px;border-radius:12px;background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);font-size:14px;outline:none;transition:border-color .2s;}\r\n.nl-form input:focus{border-color:var(--blue);}\r\n.nl-form input::placeholder{color:var(--text-faint);}\r\n\r\n\/* ---------- Footer ---------- *\/\r\nfooter{background:var(--bg-elev);border-top:1px solid var(--border);padding:64px 0 26px;}\r\n.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--border);}\r\n.footer-brand p{font-size:13.5px;color:var(--text-muted);line-height:1.7;margin-top:14px;max-width:280px;}\r\n.footer-social{display:flex;gap:9px;margin-top:22px;}\r\n.footer-social a{width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:.25s;}\r\n.footer-social a:hover{background:var(--surface-strong);border-color:var(--border-strong);}\r\n.footer-social svg{width:15px;height:15px;}\r\n.footer-col h5{font-size:13px;font-weight:700;margin-bottom:18px;letter-spacing:.02em;}\r\n.footer-col ul{display:flex;flex-direction:column;gap:11px;}\r\n.footer-col a{font-size:13.5px;color:var(--text-muted);transition:.2s;}\r\n.footer-col a:hover{color:var(--text);}\r\n.footer-bottom{padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text-faint);flex-wrap:wrap;gap:10px;}\r\n\r\n\/* ---------- WhatsApp fab ---------- *\/\r\n.fab-wa{\r\n position:fixed;bottom:26px;right:26px;z-index:150;\r\n width:58px;height:58px;border-radius:50%;\r\n background:rgba(37,211,102,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);\r\n border:1px solid rgba(37,211,102,.4);\r\n display:flex;align-items:center;justify-content:center;\r\n box-shadow:0 0 0 1px rgba(37,211,102,.15), 0 16px 34px -10px rgba(37,211,102,.5);\r\n animation:waGlow 2.6s ease-in-out infinite;\r\n}\r\n.fab-wa svg{width:27px;height:27px;color:#25D366;}\r\n@keyframes waGlow{0%,100%{box-shadow:0 0 0 1px rgba(37,211,102,.15),0 16px 34px -10px rgba(37,211,102,.5);}50%{box-shadow:0 0 0 8px rgba(37,211,102,.08),0 16px 34px -10px rgba(37,211,102,.65);}}\r\n.fab-tooltip{\r\n position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(6px);\r\n background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--text);\r\n font-size:12.5px;font-weight:500;padding:9px 14px;border-radius:10px;white-space:nowrap;\r\n opacity:0;pointer-events:none;transition:.25s var(--ease);box-shadow:var(--shadow-glow);\r\n}\r\n.fab-wa:hover .fab-tooltip{opacity:1;transform:translateY(-50%) translateX(0);}\r\n\r\n\/* ---------- reveal ---------- *\/\r\n.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}\r\n.reveal.in{opacity:1;transform:none;}\r\n@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:1180px){\r\n .why-grid{grid-template-columns:repeat(3,1fr);}\r\n .tech-grid{grid-template-columns:repeat(5,1fr);}\r\n}\r\n@media (max-width:1024px){\r\n .hero-grid{grid-template-columns:1fr;}\r\n .ide-mockup{max-width:520px;margin:0 auto;}\r\n .course-grid{grid-template-columns:repeat(2,1fr);}\r\n .proj-grid{grid-template-columns:repeat(2,1fr);}\r\n .stats-grid{grid-template-columns:repeat(2,1fr);}\r\n .footer-grid{grid-template-columns:1fr 1fr;}\r\n}\r\n@media (max-width:860px){\r\n .nav-links{display:none;}\r\n .nav-toggle{display:flex;}\r\n .why-grid{grid-template-columns:repeat(2,1fr);}\r\n .tech-grid{grid-template-columns:repeat(4,1fr);}\r\n .fb-1,.fb-2,.fb-3{display:none;}\r\n}\r\n@media (max-width:640px){\r\n .section{padding:80px 0;}\r\n .course-grid,.proj-grid,.why-grid{grid-template-columns:1fr;}\r\n .tech-grid{grid-template-columns:repeat(3,1fr);}\r\n .footer-grid{grid-template-columns:1fr;}\r\n .nl-form{flex-direction:column;}\r\n .stats-grid{grid-template-columns:1fr 1fr;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ===================== NAV ===================== -->\r\n<header id=\"mainHeader\">\r\n <div class=\"wrap navbar\">\r\n <a href=\"#home\" class=\"logo\">\r\n <span class=\"logo-mark\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2l3 6 6 1-4.5 4 1 6L12 16l-5.5 3 1-6L3 9l6-1z\"\/><\/svg>\r\n <\/span>\r\n Future Web AI\r\n <\/a>\r\n <nav class=\"nav-links\">\r\n <a href=\"#home\">Home<\/a>\r\n <a href=\"#courses\">Courses<\/a>\r\n <a href=\"#projects\">Projects<\/a>\r\n <a href=\"#roadmap\">Resources<\/a>\r\n <a href=\"#testimonials\">Blog<\/a>\r\n <a href=\"#why\">About<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/nav>\r\n <div class=\"nav-actions\">\r\n <button class=\"icon-btn\" aria-label=\"Search\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\r\n <\/button>\r\n <button class=\"icon-btn theme-toggle\" id=\"themeToggle\" aria-label=\"Toggle theme\">\r\n <svg class=\"moon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>\r\n <svg class=\"sun\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"4\"\/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"\/><\/svg>\r\n <\/button>\r\n <a href=\"#\" class=\"login-link\">Log in<\/a>\r\n <a href=\"#courses\" class=\"btn btn-primary btn-sm\">Start Learning<\/a>\r\n <button class=\"icon-btn nav-toggle\" id=\"navToggle\" aria-label=\"Menu\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M4 7h16M4 12h16M4 17h16\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n<!-- ===================== HERO ===================== -->\r\n<section class=\"hero\" id=\"home\">\r\n <div class=\"hero-glow\" aria-hidden=\"true\"><\/div>\r\n <svg class=\"circuit-line\" width=\"100%\" height=\"100%\" viewBox=\"0 0 1440 900\" style=\"position:absolute;inset:0;opacity:.35;\" aria-hidden=\"true\">\r\n <g stroke=\"#3E7BFA\" stroke-width=\"1\" fill=\"none\" opacity=\".4\">\r\n <path d=\"M0,120 L200,120 220,140 220,220 300,220\"\/>\r\n <path d=\"M1440,200 L1250,200 1230,220 1230,300 1150,300\"\/>\r\n <path d=\"M0,760 L180,760 200,740 200,660 320,660\"\/>\r\n <\/g>\r\n <circle class=\"node-pulse\" cx=\"300\" cy=\"220\" r=\"3.5\" fill=\"#5CE1E6\"\/>\r\n <circle class=\"node-pulse\" cx=\"1150\" cy=\"300\" r=\"3.5\" fill=\"#8B7CF6\" style=\"animation-delay:.8s\"\/>\r\n <circle class=\"node-pulse\" cx=\"320\" cy=\"660\" r=\"3.5\" fill=\"#3E7BFA\" style=\"animation-delay:1.4s\"\/>\r\n <\/svg>\r\n\r\n <div class=\"wrap\">\r\n <div class=\"hero-grid\">\r\n <div class=\"hero-copy reveal in\">\r\n <span class=\"eyebrow\">Learn \u00b7 Build \u00b7 Launch<\/span>\r\n <h1>Learn AI Web Development <span class=\"grad\">Like a Professional<\/span><\/h1>\r\n <p>Master AI tools, WordPress, HTML, CSS, JavaScript, and React \u2014 then build professional, real-world websites through project-based learning.<\/p>\r\n <div class=\"hero-btns\">\r\n <a href=\"#courses\" class=\"btn btn-primary\" data-ripple>\ud83d\ude80 Start Learning<\/a>\r\n <a href=\"#\" class=\"btn btn-glass\" data-ripple>\u25b6 Watch Demo<\/a>\r\n <\/div>\r\n <div class=\"trust-badge\">\r\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span>\r\n <span><strong>10,000+<\/strong> students already learning<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-visual reveal in\" style=\"position:relative;\">\r\n <div class=\"ide-mockup\">\r\n <div class=\"ide-topbar\">\r\n <span class=\"ide-dot\" style=\"background:#FF5F57;\"><\/span>\r\n <span class=\"ide-dot\" style=\"background:#FEBC2E;\"><\/span>\r\n <span class=\"ide-dot\" style=\"background:#28C840;\"><\/span>\r\n <span class=\"ide-tab\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\r\n site.jsx\r\n <\/span>\r\n <\/div>\r\n <div class=\"ide-body\">\r\n <div><span class=\"ln\">1<\/span><span class=\"kw\">import<\/span> { AIBuilder } <span class=\"kw\">from<\/span> <span class=\"str\">'future-web-ai'<\/span>;<\/div>\r\n <div><span class=\"ln\">2<\/span><\/div>\r\n <div><span class=\"ln\">3<\/span><span class=\"cm\">\/\/ generate a hero section from a prompt<\/span><\/div>\r\n <div><span class=\"ln\">4<\/span><span class=\"kw\">const<\/span> hero = <span class=\"kw\">await<\/span> <span class=\"fn\">AIBuilder<\/span>.create({<\/div>\r\n <div><span class=\"ln\">5<\/span>  prompt: <span class=\"str\">\"agency homepage, dark, neon\"<\/span>,<\/div>\r\n <div><span class=\"ln\">6<\/span>  stack: <span class=\"str\">\"react\"<\/span><\/div>\r\n <div><span class=\"ln\">7<\/span>});<\/div>\r\n <div><span class=\"ln\">8<\/span><\/div>\r\n <div><span class=\"ln\">9<\/span><span class=\"fn\">render<\/span>(hero); <span class=\"cm\">\u2713 deployed<\/span><\/div>\r\n <\/div>\r\n <div class=\"ai-chip\">\r\n <span class=\"dot\"><\/span>\r\n <p><strong>Claude AI<\/strong>Suggested 3 layout improvements<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"float-badge fb-1\"><span class=\"sw\" style=\"background:#3E7BFA;\"><\/span>ChatGPT<\/div>\r\n <div class=\"float-badge fb-2\"><span class=\"sw\" style=\"background:#61DAFB;\"><\/span>React<\/div>\r\n <div class=\"float-badge fb-3\"><span class=\"sw\" style=\"background:#8B7CF6;\"><\/span>VS Code<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== STATS ===================== -->\r\n<section class=\"section\" style=\"padding-top:0;\">\r\n <div class=\"wrap\">\r\n <div class=\"stats-grid reveal\">\r\n <div class=\"stat-cell\"><div class=\"num\" data-target=\"50\" data-suffix=\"+\">0<\/div><div class=\"lbl\">Lessons<\/div><\/div>\r\n <div class=\"stat-cell\"><div class=\"num\" data-target=\"20\" data-suffix=\"+\">0<\/div><div class=\"lbl\">Projects<\/div><\/div>\r\n <div class=\"stat-cell\"><div class=\"num\" data-target=\"10\" data-suffix=\"K+\">0<\/div><div class=\"lbl\">Students<\/div><\/div>\r\n <div class=\"stat-cell\"><div class=\"num\" data-target=\"4.9\" data-suffix=\"\u2605\" data-decimal=\"1\">0<\/div><div class=\"lbl\">Rating<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== COURSES ===================== -->\r\n<section class=\"section section-alt\" id=\"courses\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"eyebrow\">Featured Courses<\/span>\r\n <h2>Pick a track, start building today<\/h2>\r\n <p>Four core paths \u2014 each stacked with project-based lessons, not passive video.<\/p>\r\n <\/div>\r\n <div class=\"course-grid\">\r\n <div class=\"course-card reveal\">\r\n <div class=\"course-thumb\" style=\"background:linear-gradient(135deg,#1c2b4a,#0d1626);\">\r\n <span class=\"diff-tag\" style=\"background:rgba(94,214,132,.15);color:#5ED684;\">Beginner<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#6EA1FF\" stroke-width=\"1.6\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 18v3\"\/><\/svg>\r\n <\/div>\r\n <div class=\"course-body\">\r\n <h4>WordPress Masterclass<\/h4>\r\n <div class=\"course-meta\"><span>\ud83d\udd52 8h 20m<\/span><span>\ud83d\udce6 12 lessons<\/span><\/div>\r\n <div class=\"course-instructor\"><div class=\"instr-avatar\">HA<\/div><span>Hamza Ali<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">Start Course<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"course-card reveal\">\r\n <div class=\"course-thumb\" style=\"background:linear-gradient(135deg,#2a1c4a,#150d26);\">\r\n <span class=\"diff-tag\" style=\"background:rgba(242,184,75,.15);color:#F2B84B;\">Intermediate<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8B7CF6\" stroke-width=\"1.6\"><path d=\"M12 2l3 6 6 1-4.5 4 1 6L12 16l-5.5 3 1-6L3 9l6-1z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"course-body\">\r\n <h4>AI Website Builder<\/h4>\r\n <div class=\"course-meta\"><span>\ud83d\udd52 6h 40m<\/span><span>\ud83d\udce6 9 lessons<\/span><\/div>\r\n <div class=\"course-instructor\"><div class=\"instr-avatar\">SR<\/div><span>Sara Riaz<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">Start Course<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"course-card reveal\">\r\n <div class=\"course-thumb\" style=\"background:linear-gradient(135deg,#1c3a3a,#0d1f1f);\">\r\n <span class=\"diff-tag\" style=\"background:rgba(94,214,132,.15);color:#5ED684;\">Beginner<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5CE1E6\" stroke-width=\"1.6\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\r\n <\/div>\r\n <div class=\"course-body\">\r\n <h4>HTML, CSS & JavaScript<\/h4>\r\n <div class=\"course-meta\"><span>\ud83d\udd52 10h 10m<\/span><span>\ud83d\udce6 16 lessons<\/span><\/div>\r\n <div class=\"course-instructor\"><div class=\"instr-avatar\">MK<\/div><span>Musa Khan<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">Start Course<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"course-card reveal\">\r\n <div class=\"course-thumb\" style=\"background:linear-gradient(135deg,#1c2b4a,#150d26);\">\r\n <span class=\"diff-tag\" style=\"background:rgba(255,95,87,.15);color:#FF8A80;\">Advanced<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#6EA1FF\" stroke-width=\"1.6\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M8 12h8M12 8v8\"\/><\/svg>\r\n <\/div>\r\n <div class=\"course-body\">\r\n <h4>React Development<\/h4>\r\n <div class=\"course-meta\"><span>\ud83d\udd52 12h 30m<\/span><span>\ud83d\udce6 18 lessons<\/span><\/div>\r\n <div class=\"course-instructor\"><div class=\"instr-avatar\">ZA<\/div><span>Zara Ahmed<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">Start Course<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== WHY CHOOSE ===================== -->\r\n<section class=\"section\" id=\"why\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"eyebrow\">Why Future Web AI<\/span>\r\n <h2>Built for people who want to ship, not just watch<\/h2>\r\n <\/div>\r\n <div class=\"why-grid\">\r\n <div class=\"why-card reveal\">\r\n <div class=\"why-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2l3 6 6 1-4.5 4 1 6L12 16l-5.5 3 1-6L3 9l6-1z\"\/><\/svg><\/div>\r\n <h4>AI Powered Learning<\/h4>\r\n <p>Lessons adapt to your pace using AI-guided feedback on every project.<\/p>\r\n <\/div>\r\n <div class=\"why-card reveal\">\r\n <div class=\"why-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 18v3\"\/><\/svg><\/div>\r\n <h4>Real Client Projects<\/h4>\r\n <p>Build agency, portfolio, and dashboard sites you can put in a real portfolio.<\/p>\r\n <\/div>\r\n <div class=\"why-card reveal\">\r\n <div class=\"why-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 21v-1a8 8 0 0 1 16 0v1\"\/><\/svg><\/div>\r\n <h4>Beginner Friendly<\/h4>\r\n <p>No prior coding needed \u2014 every track starts from first principles.<\/p>\r\n <\/div>\r\n <div class=\"why-card reveal\">\r\n <div class=\"why-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8\"\/><\/svg><\/div>\r\n <h4>Career Focused<\/h4>\r\n <p>Every roadmap ends at a hireable, portfolio-ready skill set.<\/p>\r\n <\/div>\r\n <div class=\"why-card reveal\">\r\n <div class=\"why-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z\"\/><\/svg><\/div>\r\n <h4>Lifetime Free Learning<\/h4>\r\n <p>Core lessons stay free, forever \u2014 no paywall on the fundamentals.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== ROADMAP ===================== -->\r\n<section class=\"section section-alt\" id=\"roadmap\">\r\n <div class=\"wrap\" style=\"max-width:820px;\">\r\n <div class=\"section-head left reveal\">\r\n <span class=\"eyebrow\">Learning Roadmap<\/span>\r\n <h2>One path, four stages<\/h2>\r\n <p>Each stage unlocks the next \u2014 no skipping ahead until the projects ship.<\/p>\r\n <\/div>\r\n <div class=\"roadmap\">\r\n <div class=\"roadmap-line\" aria-hidden=\"true\"><\/div>\r\n <div class=\"roadmap-item reveal\">\r\n <div class=\"rm-node\">01<\/div>\r\n <div class=\"rm-content\">\r\n <span class=\"stage\">Stage 01<\/span>\r\n <h4>Beginner<\/h4>\r\n <p>HTML, CSS, and layout fundamentals \u2014 your first static page, live in week one.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"roadmap-item reveal\">\r\n <div class=\"rm-node\">02<\/div>\r\n <div class=\"rm-content\">\r\n <span class=\"stage\">Stage 02<\/span>\r\n <h4>Intermediate<\/h4>\r\n <p>JavaScript, WordPress, and your first AI-assisted build with real client-style briefs.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"roadmap-item reveal\">\r\n <div class=\"rm-node\">03<\/div>\r\n <div class=\"rm-content\">\r\n <span class=\"stage\">Stage 03<\/span>\r\n <h4>Advanced<\/h4>\r\n <p>React, component architecture, and shipping a full multi-page application.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"roadmap-item reveal\">\r\n <div class=\"rm-node\">04<\/div>\r\n <div class=\"rm-content\">\r\n <span class=\"stage\">Stage 04<\/span>\r\n <h4>Professional<\/h4>\r\n <p>Portfolio review, deployment, and positioning yourself for freelance or full-time work.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== PROJECTS ===================== -->\r\n<section class=\"section\" id=\"projects\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"eyebrow\">Featured Projects<\/span>\r\n <h2>Built by students, shipped for real<\/h2>\r\n <\/div>\r\n <div class=\"proj-grid\">\r\n <div class=\"proj-card reveal\">\r\n <div class=\"proj-media\" style=\"background:linear-gradient(135deg,#1c2b4a,#0d1626);\"><\/div>\r\n <div class=\"proj-body\">\r\n <h4>Agency Website<\/h4>\r\n <div class=\"tech-tags\"><span>React<\/span><span>Next.js<\/span><span>Tailwind<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">View Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"proj-card reveal\">\r\n <div class=\"proj-media\" style=\"background:linear-gradient(135deg,#2a1c4a,#150d26);\"><\/div>\r\n <div class=\"proj-body\">\r\n <h4>Portfolio Website<\/h4>\r\n <div class=\"tech-tags\"><span>HTML<\/span><span>CSS<\/span><span>JS<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">View Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"proj-card reveal\">\r\n <div class=\"proj-media\" style=\"background:linear-gradient(135deg,#1c3a3a,#0d1f1f);\"><\/div>\r\n <div class=\"proj-body\">\r\n <h4>Restaurant Website<\/h4>\r\n <div class=\"tech-tags\"><span>WordPress<\/span><span>WooCommerce<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">View Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"proj-card reveal\">\r\n <div class=\"proj-media\" style=\"background:linear-gradient(135deg,#1c2b4a,#150d26);\"><\/div>\r\n <div class=\"proj-body\">\r\n <h4>Business Website<\/h4>\r\n <div class=\"tech-tags\"><span>PHP<\/span><span>Laravel<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">View Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"proj-card reveal\">\r\n <div class=\"proj-media\" style=\"background:linear-gradient(135deg,#2a1c4a,#0d1626);\"><\/div>\r\n <div class=\"proj-body\">\r\n <h4>Landing Page<\/h4>\r\n <div class=\"tech-tags\"><span>React<\/span><span>Framer Motion<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">View Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"proj-card reveal\">\r\n <div class=\"proj-media\" style=\"background:linear-gradient(135deg,#1c3a3a,#150d26);\"><\/div>\r\n <div class=\"proj-body\">\r\n <h4>Dashboard UI<\/h4>\r\n <div class=\"tech-tags\"><span>React<\/span><span>Node.js<\/span><\/div>\r\n <a href=\"#\" class=\"btn btn-glass btn-sm\">View Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== TECHNOLOGIES ===================== -->\r\n<section class=\"section section-alt\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"eyebrow\">Technologies<\/span>\r\n <h2>Everything you'll actually use<\/h2>\r\n <\/div>\r\n <div class=\"tech-grid\">\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#E44D26\" stroke-width=\"1.8\"><path d=\"M4 3l1.5 17L12 22l6.5-2L20 3z\"\/><\/svg><span>HTML5<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2965F1\" stroke-width=\"1.8\"><path d=\"M4 3l1.5 17L12 22l6.5-2L20 3z\"\/><\/svg><span>CSS3<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F2C94C\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><\/svg><span>JavaScript<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#61DAFB\" stroke-width=\"1.6\"><circle cx=\"12\" cy=\"12\" r=\"2.4\"\/><ellipse cx=\"12\" cy=\"12\" rx=\"10\" ry=\"4.2\"\/><ellipse cx=\"12\" cy=\"12\" rx=\"10\" ry=\"4.2\" transform=\"rotate(60 12 12)\"\/><ellipse cx=\"12\" cy=\"12\" rx=\"10\" ry=\"4.2\" transform=\"rotate(120 12 12)\"\/><\/svg><span>React<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2L2 19h20z\"\/><\/svg><span>Next.js<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5FA04E\" stroke-width=\"1.8\"><path d=\"M12 2l8 4.6v10.8L12 22l-8-4.6V6.6z\"\/><\/svg><span>Node.js<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#787CB5\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M8 15V9l4 3 4-3v6\"\/><\/svg><span>PHP<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF2D20\" stroke-width=\"1.8\"><path d=\"M4 8l8-5 8 5v8l-8 5-8-5z\"\/><\/svg><span>Laravel<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#6EA1FF\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M7 12h10M12 7v10\"\/><\/svg><span>WordPress<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#96588A\" stroke-width=\"1.8\"><path d=\"M3 6h18M6 6v13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"\/><\/svg><span>WooCommerce<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 3v4M12 17v4M3 12h4M17 12h4\"\/><\/svg><span>GitHub<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5CE1E6\" stroke-width=\"1.8\"><path d=\"M12 2l3 6 6 1-4.5 4 1 6L12 16l-5.5 3 1-6L3 9l6-1z\"\/><\/svg><span>ChatGPT<\/span><\/div>\r\n <div class=\"tech-badge reveal\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8B7CF6\" stroke-width=\"1.8\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"5\"\/><circle cx=\"9\" cy=\"10\" r=\"1.2\" fill=\"#8B7CF6\" stroke=\"none\"\/><circle cx=\"15\" cy=\"10\" r=\"1.2\" fill=\"#8B7CF6\" stroke=\"none\"\/><path d=\"M9 15c1 1 5 1 6 0\"\/><\/svg><span>Claude AI<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== TESTIMONIALS ===================== -->\r\n<section class=\"section\" id=\"testimonials\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"eyebrow\">Testimonials<\/span>\r\n <h2>What students say after they ship<\/h2>\r\n <\/div>\r\n <div class=\"testi-track\" id=\"testiTrack\">\r\n <div class=\"testi-card reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"quote\">The React track finally made components click for me \u2014 I shipped my first dashboard in three weeks.<\/p>\r\n <div class=\"testi-person\"><div class=\"testi-avatar\">D<\/div><div><h6>Daniyal Fahad<\/h6><span>Pakistan<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"testi-card reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"quote\">AI Website Builder cut my client turnaround time in half. Genuinely changed how I freelance.<\/p>\r\n <div class=\"testi-person\"><div class=\"testi-avatar\">L<\/div><div><h6>Lena Cortez<\/h6><span>Philippines<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"testi-card reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"quote\">Started with zero code experience. The roadmap structure kept me from getting overwhelmed.<\/p>\r\n <div class=\"testi-person\"><div class=\"testi-avatar\">R<\/div><div><h6>Ravi Menon<\/h6><span>India<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"testi-card reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"quote\">The WordPress masterclass alone paid for itself \u2014 landed my first two client projects from it.<\/p>\r\n <div class=\"testi-person\"><div class=\"testi-avatar\">N<\/div><div><h6>Noah Fischer<\/h6><span>Germany<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-nav\">\r\n <button id=\"testiPrev\" aria-label=\"Previous\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg><\/button>\r\n <button id=\"testiNext\" aria-label=\"Next\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"><path d=\"M9 18l6-6-6-6\"\/><\/svg><\/button>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== NEWSLETTER ===================== -->\r\n<section class=\"section section-alt\" id=\"contact\">\r\n <div class=\"wrap\">\r\n <div class=\"nl-card reveal\">\r\n <div class=\"nl-glow\" aria-hidden=\"true\"><\/div>\r\n <h2>Join Future Web AI<\/h2>\r\n <p>New lessons, project templates, and roadmap updates \u2014 no spam, unsubscribe anytime.<\/p>\r\n <form class=\"nl-form\" onsubmit=\"return false;\">\r\n <input type=\"email\" placeholder=\"you@example.com\" required>\r\n <button type=\"submit\" class=\"btn btn-primary\">Subscribe<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================== FOOTER ===================== -->\r\n<footer>\r\n <div class=\"wrap\">\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <a href=\"#home\" class=\"logo\">\r\n <span class=\"logo-mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2l3 6 6 1-4.5 4 1 6L12 16l-5.5 3 1-6L3 9l6-1z\"\/><\/svg><\/span>\r\n Future Web AI\r\n <\/a>\r\n <p>A premium, project-based platform for learning AI-powered web development \u2014 from first HTML tag to shipped product.<\/p>\r\n <div class=\"footer-social\">\r\n <a href=\"#\" aria-label=\"YouTube\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"3\"\/><path d=\"M10 9.5l6 2.5-6 2.5z\"\/><\/svg><\/a>\r\n <a href=\"#\" aria-label=\"GitHub\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 3v4M12 17v4M3 12h4M17 12h4\"\/><\/svg><\/a>\r\n <a href=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M14 9h3V6h-3c-2 0-3.5 1.5-3.5 3.5V11H8v3h2.5v6h3v-6H16l.5-3h-3V10c0-.5.5-1 1-1z\"\/><\/svg><\/a>\r\n <a href=\"#\" aria-label=\"Instagram\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\"\/><\/svg><\/a>\r\n <a href=\"#\" aria-label=\"LinkedIn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><path d=\"M7 10v7M7 7v.01M11 17v-4a2 2 0 0 1 4 0v4M11 13v4\"\/><\/svg><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Platform<\/h5>\r\n <ul>\r\n <li><a href=\"#courses\">Courses<\/a><\/li>\r\n <li><a href=\"#projects\">Projects<\/a><\/li>\r\n <li><a href=\"#roadmap\">Resources<\/a><\/li>\r\n <li><a href=\"#testimonials\">Blog<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Company<\/h5>\r\n <ul>\r\n <li><a href=\"#why\">About<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <li><a href=\"#\">Careers<\/a><\/li>\r\n <li><a href=\"#\">Partners<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Contact<\/h5>\r\n <ul>\r\n <li><a href=\"https:\/\/wa.me\/923018784472\">+92 301 8784472<\/a><\/li>\r\n <li><a href=\"mailto:hello@futurewebai.com\">hello@futurewebai.com<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <span>\u00a9 2026 Future Web AI. All rights reserved.<\/span>\r\n <span>Learn \u00b7 Build \u00b7 Launch<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<a href=\"https:\/\/wa.me\/923018784472\" target=\"_blank\" class=\"fab-wa\" aria-label=\"Chat on WhatsApp\">\r\n <span class=\"fab-tooltip\">Chat with Us<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.79.47 3.47 1.29 4.92L2 22l5.31-1.39a9.9 9.9 0 0 0 4.73 1.2h.01c5.46 0 9.9-4.45 9.9-9.9C21.96 6.45 17.5 2 12.04 2zm5.8 14.1c-.24.68-1.4 1.3-1.93 1.36-.53.06-1.02.28-3.43-.72-2.9-1.2-4.77-4.12-4.92-4.32-.14-.19-1.17-1.56-1.17-2.98 0-1.42.75-2.11 1.02-2.4.26-.28.57-.35.76-.35.19 0 .38 0 .55.01.18.01.42-.07.66.5.24.58.82 2 .89 2.15.07.14.12.31.02.5-.1.19-.14.31-.28.48-.14.17-.29.37-.42.5-.14.14-.28.29-.12.56.16.28.7 1.16 1.51 1.88 1.04.93 1.91 1.22 2.19 1.36.28.14.44.12.6-.07.17-.19.71-.83.9-1.11.19-.28.38-.23.63-.14.26.09 1.64.77 1.92.91.28.14.47.21.53.33.07.12.07.68-.17 1.36z\"\/><\/svg>\r\n<\/a>\r\n\r\n<script>\r\n \/\/ Sticky header\r\n const header = document.getElementById('mainHeader');\r\n const onScroll = () => header.classList.toggle('solid', window.scrollY > 30);\r\n document.addEventListener('scroll', onScroll); onScroll();\r\n\r\n \/\/ Theme toggle\r\n const root = document.documentElement;\r\n document.getElementById('themeToggle').addEventListener('click', ()=>{\r\n root.setAttribute('data-theme', root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');\r\n });\r\n\r\n \/\/ Reveal on scroll\r\n const io = new IntersectionObserver((entries)=>{\r\n entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });\r\n },{threshold:.12});\r\n document.querySelectorAll('.reveal').forEach(el=>io.observe(el));\r\n\r\n \/\/ Animated counters\r\n const counterIO = new IntersectionObserver((entries)=>{\r\n entries.forEach(entry=>{\r\n if(entry.isIntersecting){\r\n const el = entry.target;\r\n const target = parseFloat(el.dataset.target);\r\n const suffix = el.dataset.suffix || '';\r\n const decimal = parseInt(el.dataset.decimal || '0',10);\r\n let cur = 0;\r\n const steps = 50;\r\n const inc = target\/steps;\r\n const tick = ()=>{\r\n cur += inc;\r\n if(cur >= target){ el.textContent = target.toFixed(decimal) + suffix; return; }\r\n el.textContent = cur.toFixed(decimal) + suffix;\r\n requestAnimationFrame(tick);\r\n };\r\n tick();\r\n counterIO.unobserve(el);\r\n }\r\n });\r\n },{threshold:.4});\r\n document.querySelectorAll('.stat-cell .num').forEach(c=>counterIO.observe(c));\r\n\r\n \/\/ Testimonial nav\r\n const track = document.getElementById('testiTrack');\r\n const cardWidth = () => track.querySelector('.testi-card').getBoundingClientRect().width + 20;\r\n document.getElementById('testiNext').addEventListener('click', ()=> track.scrollBy({left:cardWidth(),behavior:'smooth'}));\r\n document.getElementById('testiPrev').addEventListener('click', ()=> track.scrollBy({left:-cardWidth(),behavior:'smooth'}));\r\n\r\n \/\/ Button ripple\r\n document.querySelectorAll('[data-ripple], .btn').forEach(btn=>{\r\n btn.addEventListener('click', function(e){\r\n const rect = this.getBoundingClientRect();\r\n const circle = document.createElement('span');\r\n circle.className = 'ripple';\r\n circle.style.left = (e.clientX - rect.left) + 'px';\r\n circle.style.top = (e.clientY - rect.top) + 'px';\r\n circle.style.width = circle.style.height = Math.max(rect.width, rect.height) + 'px';\r\n this.appendChild(circle);\r\n setTimeout(()=>circle.remove(), 650);\r\n });\r\n });\r\n\r\n \/\/ Mobile nav toggle\r\n const navToggle = document.getElementById('navToggle');\r\n const navLinks = document.querySelector('.nav-links');\r\n navToggle.addEventListener('click', ()=>{\r\n const shown = navLinks.style.display === 'flex';\r\n navLinks.style.cssText = shown ? '' : 'display:flex;position:fixed;top:66px;left:16px;right:16px;background:var(--bg-elev);border:1px solid var(--border);flex-direction:column;padding:20px;border-radius:16px;box-shadow:var(--shadow-glow);gap:18px;z-index:199;';\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Future Web AI \u2014 Learn \u2022 Build \u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-38","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"Future Web AI \u2014 Learn \u2022 Build \u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log in Start Learning Learn \u00b7 Build \u00b7 Launch Learn AI Web Development Like a Professional Master AI tools, WordPress, HTML, CSS, JavaScript, and React \u2014 then build professional, real-world websites through project-based learning. \ud83d\ude80 Start\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/zeecommunications.com\/?page_id=38\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"-\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Home -\" \/>\n\t\t<meta property=\"og:description\" content=\"Future Web AI \u2014 Learn \u2022 Build \u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log in Start Learning Learn \u00b7 Build \u00b7 Launch Learn AI Web Development Like a Professional Master AI tools, WordPress, HTML, CSS, JavaScript, and React \u2014 then build professional, real-world websites through project-based learning. \ud83d\ude80 Start\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/zeecommunications.com\/?page_id=38\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-07-18T04:54:21+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-07-18T05:36:05+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Home -\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Future Web AI \u2014 Learn \u2022 Build \u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log in Start Learning Learn \u00b7 Build \u00b7 Launch Learn AI Web Development Like a Professional Master AI tools, WordPress, HTML, CSS, JavaScript, and React \u2014 then build professional, real-world websites through project-based learning. \ud83d\ude80 Start\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/?page_id=38#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/zeecommunications.com#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/zeecommunications.com\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/?page_id=38#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/?page_id=38#listItem\",\"position\":2,\"name\":\"Home\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/zeecommunications.com#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/#organization\",\"url\":\"https:\\\/\\\/zeecommunications.com\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/?page_id=38#webpage\",\"url\":\"https:\\\/\\\/zeecommunications.com\\\/?page_id=38\",\"name\":\"Home -\",\"description\":\"Future Web AI \\u2014 Learn \\u2022 Build \\u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log in Start Learning Learn \\u00b7 Build \\u00b7 Launch Learn AI Web Development Like a Professional Master AI tools, WordPress, HTML, CSS, JavaScript, and React \\u2014 then build professional, real-world websites through project-based learning. \\ud83d\\ude80 Start\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/?page_id=38#breadcrumblist\"},\"datePublished\":\"2026-07-18T04:54:21+00:00\",\"dateModified\":\"2026-07-18T05:36:05+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/#website\",\"url\":\"https:\\\/\\\/zeecommunications.com\\\/\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/zeecommunications.com\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Home -","description":"Future Web AI \u2014 Learn \u2022 Build \u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log in Start Learning Learn \u00b7 Build \u00b7 Launch Learn AI Web Development Like a Professional Master AI tools, WordPress, HTML, CSS, JavaScript, and React \u2014 then build professional, real-world websites through project-based learning. \ud83d\ude80 Start","canonical_url":"https:\/\/zeecommunications.com\/?page_id=38","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/zeecommunications.com\/?page_id=38#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/zeecommunications.com#listItem","position":1,"name":"Home","item":"https:\/\/zeecommunications.com","nextItem":{"@type":"ListItem","@id":"https:\/\/zeecommunications.com\/?page_id=38#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/zeecommunications.com\/?page_id=38#listItem","position":2,"name":"Home","previousItem":{"@type":"ListItem","@id":"https:\/\/zeecommunications.com#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/zeecommunications.com\/#organization","url":"https:\/\/zeecommunications.com\/"},{"@type":"WebPage","@id":"https:\/\/zeecommunications.com\/?page_id=38#webpage","url":"https:\/\/zeecommunications.com\/?page_id=38","name":"Home -","description":"Future Web AI \u2014 Learn \u2022 Build \u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log in Start Learning Learn \u00b7 Build \u00b7 Launch Learn AI Web Development Like a Professional Master AI tools, WordPress, HTML, CSS, JavaScript, and React \u2014 then build professional, real-world websites through project-based learning. \ud83d\ude80 Start","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/zeecommunications.com\/#website"},"breadcrumb":{"@id":"https:\/\/zeecommunications.com\/?page_id=38#breadcrumblist"},"datePublished":"2026-07-18T04:54:21+00:00","dateModified":"2026-07-18T05:36:05+00:00"},{"@type":"WebSite","@id":"https:\/\/zeecommunications.com\/#website","url":"https:\/\/zeecommunications.com\/","inLanguage":"en-US","publisher":{"@id":"https:\/\/zeecommunications.com\/#organization"}}]},"og:locale":"en_US","og:site_name":"-","og:type":"article","og:title":"Home -","og:description":"Future Web AI \u2014 Learn \u2022 Build \u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log in Start Learning Learn \u00b7 Build \u00b7 Launch Learn AI Web Development Like a Professional Master AI tools, WordPress, HTML, CSS, JavaScript, and React \u2014 then build professional, real-world websites through project-based learning. \ud83d\ude80 Start","og:url":"https:\/\/zeecommunications.com\/?page_id=38","article:published_time":"2026-07-18T04:54:21+00:00","article:modified_time":"2026-07-18T05:36:05+00:00","twitter:card":"summary_large_image","twitter:title":"Home -","twitter:description":"Future Web AI \u2014 Learn \u2022 Build \u2022 Launch Future Web AI Home Courses Projects Resources Blog About Contact Log in Start Learning Learn \u00b7 Build \u00b7 Launch Learn AI Web Development Like a Professional Master AI tools, WordPress, HTML, CSS, JavaScript, and React \u2014 then build professional, real-world websites through project-based learning. \ud83d\ude80 Start"},"aioseo_meta_data":{"post_id":"38","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_image_url":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-07-18 04:54:23","updated":"2026-07-18 05:48:41"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/zeecommunications.com\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHome\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/zeecommunications.com"},{"label":"Home","link":"https:\/\/zeecommunications.com\/?page_id=38"}],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/zeecommunications.com\/index.php?rest_route=\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeecommunications.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zeecommunications.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zeecommunications.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zeecommunications.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=38"}],"version-history":[{"count":5,"href":"https:\/\/zeecommunications.com\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/zeecommunications.com\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/zeecommunications.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}