Frontend Job Ready: The 30 Day AI Era Blueprint<\/title>\r\n <meta name=\"description\" content=\"Become frontend job ready in 30 days \u2014 learn HTML, CSS, JavaScript and React, build 11 real projects, ship a live portfolio, and master the AI workflow recruiters expect. For freshers in India, no experience needed.\">\r\n <link rel=\"preload\" as=\"image\" href=\"assets\/vsl-poster.webp\" fetchpriority=\"high\">\r\n <style>\r\n\/* ===== design-system.css (inlined for fewer requests) ===== *\/\r\n\/* ============================================================\r\n FJR Landing \u2014 design-system.css\r\n Shared tokens + component classes. Everything scoped to .fjr-landing.\r\n Vanilla CSS only. System fonts only. No web fonts, no libraries.\r\n ============================================================ *\/\r\n\r\n\/* ---- TOKENS (locked, do not change) ---- *\/\r\n.fjr-landing{\r\n --ink:#0B0B0C;\r\n --paper:#FFFFFF;\r\n --paper-2:#F4F4F2;\r\n --accent:#FFB020;\r\n --accent-press:#E89A00;\r\n --muted-dark:#9A9AA0;\r\n --muted-light:#5A5A60;\r\n --line-dark:rgba(255,255,255,.14);\r\n --line-light:rgba(0,0,0,.12);\r\n --sans:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n --mono:ui-monospace,\"SF Mono\",SFMono-Regular,Menlo,Consolas,\"Liberation Mono\",monospace;\r\n --pad-y:clamp(64px,10vw,120px);\r\n --container:1120px;\r\n --radius:10px;\r\n}\r\n\r\n\/* 1. Scoped reset + base *\/\r\n.fjr-landing *,\r\n.fjr-landing *::before,\r\n.fjr-landing *::after{ box-sizing:border-box; }\r\n\r\n.fjr-landing{\r\n font-family:var(--sans);\r\n line-height:1.6;\r\n -webkit-font-smoothing:antialiased;\r\n text-rendering:optimizeLegibility;\r\n scroll-behavior:smooth;\r\n}\r\n\r\n.fjr-landing img{ max-width:100%; display:block; }\r\n\r\n.fjr-landing a{ color:inherit; }\r\n\r\n\/* 2. Container *\/\r\n.fjr-container{\r\n width:100%;\r\n max-width:var(--container);\r\n margin-inline:auto;\r\n padding-inline:clamp(20px,5vw,40px);\r\n}\r\n\r\n\/* 3. Sections + light\/dark modifiers *\/\r\n.fjr-section{\r\n padding-block:var(--pad-y);\r\n position:relative;\r\n content-visibility:auto;\r\n contain-intrinsic-size:1px 800px;\r\n}\r\n.fjr-dark{ background:var(--ink); color:var(--paper); }\r\n.fjr-light{ background:var(--paper); color:var(--ink); }\r\n\r\n\/* Hero is above the fold \u2014 never lazy-render it *\/\r\n.fjr-hero{\r\n content-visibility:visible;\r\n contain-intrinsic-size:auto;\r\n}\r\n\r\n\/* 4. Eyebrow (signature mono code-comment label + blinking caret) *\/\r\n.fjr-eyebrow{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n letter-spacing:.02em;\r\n color:var(--accent);\r\n margin:0 0 20px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n}\r\n.fjr-eyebrow .caret{\r\n display:inline-block;\r\n width:8px;\r\n height:1em;\r\n background:var(--accent);\r\n animation:fjr-blink 1.1s steps(1) infinite;\r\n}\r\n@keyframes fjr-blink{ 50%{ opacity:0; } }\r\n\r\n\/* 5. Primary button *\/\r\n.fjr-btn{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:10px;\r\n min-height:44px;\r\n padding:18px 28px;\r\n background:var(--accent);\r\n color:var(--ink);\r\n font-family:var(--sans);\r\n font-size:17px;\r\n font-weight:700;\r\n line-height:1.1;\r\n text-decoration:none;\r\n border:0;\r\n border-radius:var(--radius);\r\n cursor:pointer;\r\n transition:background .18s ease, transform .18s ease;\r\n}\r\n.fjr-btn:hover{\r\n background:var(--accent-press);\r\n transform:translateY(-2px);\r\n}\r\n.fjr-btn:focus-visible{\r\n outline:3px solid var(--accent);\r\n outline-offset:3px;\r\n}\r\n.fjr-btn .fjr-price{ font-family:var(--mono); font-weight:700; }\r\n\r\n\/* 5b. CTA note (small secondary link under a CTA) *\/\r\n.fjr-cta-note{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n min-height:44px;\r\n margin-top:12px;\r\n font-size:14px;\r\n color:var(--muted-dark);\r\n text-decoration:none;\r\n}\r\n.fjr-light .fjr-cta-note{ color:var(--muted-light); }\r\n.fjr-cta-note:hover{ text-decoration:underline; }\r\n.fjr-cta-note:focus-visible{\r\n outline:2px solid var(--accent);\r\n outline-offset:3px;\r\n border-radius:6px;\r\n}\r\n\r\n\/* 6. Heading + muted helpers *\/\r\n.fjr-h2{\r\n font-size:clamp(1.7rem,3.6vw,2.6rem);\r\n line-height:1.1;\r\n letter-spacing:-.02em;\r\n font-weight:800;\r\n margin:0 0 20px;\r\n}\r\n.fjr-muted-d{ color:var(--muted-dark); }\r\n.fjr-muted-l{ color:var(--muted-light); }\r\n\r\n\/* 7. Sticky mobile CTA bar *\/\r\n.fjr-sticky{\r\n position:fixed;\r\n left:0;\r\n right:0;\r\n bottom:0;\r\n z-index:60;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:14px;\r\n flex-wrap:wrap;\r\n padding:12px clamp(16px,4vw,24px);\r\n padding-bottom:max(12px,env(safe-area-inset-bottom));\r\n background:var(--ink);\r\n border-top:1px solid var(--line-dark);\r\n transform:translateY(110%);\r\n transition:transform .28s ease;\r\n}\r\n.fjr-sticky.is-visible{ transform:translateY(0); }\r\n.fjr-sticky .fjr-btn{ padding:12px 22px; font-size:15px; }\r\n.fjr-sticky .fjr-cta-note{ margin-top:0; color:var(--muted-dark); }\r\n@media (min-width:1025px){\r\n .fjr-sticky{ display:none; }\r\n}\r\n\r\n\/* 8. Accordion (<details>\/<summary>) styling *\/\r\n.fjr-landing details{\r\n border-top:1px solid var(--line-dark);\r\n}\r\n.fjr-light details{ border-top-color:var(--line-light); }\r\n.fjr-landing details:last-of-type{\r\n border-bottom:1px solid var(--line-dark);\r\n}\r\n.fjr-light details:last-of-type{ border-bottom-color:var(--line-light); }\r\n\r\n.fjr-landing summary{\r\n list-style:none;\r\n cursor:pointer;\r\n padding:20px 40px 20px 0;\r\n position:relative;\r\n font-weight:700;\r\n display:flex;\r\n flex-direction:column;\r\n gap:4px;\r\n}\r\n.fjr-landing summary::-webkit-details-marker{ display:none; }\r\n.fjr-landing summary::after{\r\n content:\"+\";\r\n position:absolute;\r\n right:2px;\r\n top:18px;\r\n font-family:var(--mono);\r\n font-size:22px;\r\n line-height:1;\r\n color:var(--accent);\r\n transition:transform .2s ease;\r\n}\r\n.fjr-landing details[open] summary::after{ content:\"\\2013\"; }\r\n.fjr-landing summary:focus-visible{\r\n outline:2px solid var(--accent);\r\n outline-offset:3px;\r\n border-radius:6px;\r\n}\r\n\r\n\/* 9. Global niceties *\/\r\n@media (prefers-reduced-motion:reduce){\r\n .fjr-landing *{\r\n animation:none !important;\r\n transition:none !important;\r\n }\r\n .fjr-landing{ scroll-behavior:auto; }\r\n}\r\n\r\n\/* ===== 09b \u00b7 GUARANTEE (trust band) \u2014 merged from sections\/09b-guarantee.html ===== *\/\r\n.fjr-landing .fjr-guarantee{\r\n border-top:1px solid var(--accent);\r\n border-bottom:1px solid var(--accent);\r\n}\r\n.fjr-landing .fjr-guarantee__card{\r\n max-width:840px;\r\n margin-inline:auto;\r\n text-align:center;\r\n border:1px solid rgba(255,176,32,.32);\r\n border-radius:var(--radius);\r\n padding:clamp(28px,5vw,52px) clamp(20px,4vw,48px);\r\n background:rgba(255,176,32,.03);\r\n}\r\n.fjr-landing .fjr-guarantee .fjr-eyebrow{ justify-content:center; }\r\n.fjr-landing .fjr-guarantee__h2{\r\n max-width:20ch;\r\n margin-inline:auto;\r\n margin-bottom:36px;\r\n}\r\n.fjr-landing .fjr-guarantee__promises{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:24px;\r\n text-align:left;\r\n margin-bottom:32px;\r\n}\r\n.fjr-landing .fjr-guarantee__promise{\r\n padding:22px;\r\n border:1px solid var(--line-dark);\r\n border-radius:var(--radius);\r\n background:rgba(255,255,255,.02);\r\n}\r\n.fjr-landing .fjr-guarantee__ptitle{\r\n font-size:1.1rem;\r\n font-weight:800;\r\n line-height:1.25;\r\n margin:0 0 10px;\r\n}\r\n.fjr-landing .fjr-guarantee__promise p{\r\n margin:0;\r\n color:var(--muted-dark);\r\n font-size:1rem;\r\n line-height:1.55;\r\n}\r\n.fjr-landing .fjr-guarantee__list{\r\n list-style:none;\r\n margin:0;\r\n padding:0;\r\n display:grid;\r\n gap:12px;\r\n}\r\n.fjr-landing .fjr-guarantee__list li{\r\n position:relative;\r\n padding-left:24px;\r\n color:var(--muted-dark);\r\n font-size:1rem;\r\n line-height:1.55;\r\n}\r\n.fjr-landing .fjr-guarantee__list li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0;\r\n top:.6em;\r\n width:8px;\r\n height:8px;\r\n border-radius:2px;\r\n background:var(--accent);\r\n}\r\n.fjr-landing .fjr-guarantee__note{\r\n max-width:60ch;\r\n margin:0 auto 32px;\r\n font-size:.95rem;\r\n line-height:1.55;\r\n}\r\n.fjr-landing .fjr-guarantee__seal{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:12px;\r\n padding:12px 20px;\r\n border:1px solid rgba(255,176,32,.4);\r\n border-radius:999px;\r\n background:rgba(255,176,32,.06);\r\n}\r\n.fjr-landing .fjr-guarantee__shield{\r\n display:inline-flex;\r\n color:var(--accent);\r\n}\r\n.fjr-landing .fjr-guarantee__sealtext{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n letter-spacing:.01em;\r\n color:var(--paper);\r\n}\r\n@media (min-width:768px){\r\n .fjr-landing .fjr-guarantee__promises{ grid-template-columns:1fr 1fr; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"fjr-landing\">\r\n\r\n\r\n<section class=\"fjr-topbar\" aria-label=\"Batch availability\">\r\n <p class=\"fjr-topbar__text\">\r\n <span class=\"fjr-topbar__icon\" aria-hidden=\"true\">◆<\/span>\r\n Only <span class=\"fjr-topbar__num\">97<\/span> seats left in this batch\r\n <span class=\"fjr-topbar__dot\" aria-hidden=\"true\">·<\/span>\r\n Doubt support closes when the batch is full\r\n <\/p>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-topbar{\r\n background:var(--ink);\r\n color:var(--paper);\r\n padding:11px clamp(16px,4vw,24px);\r\n text-align:center;\r\n }\r\n .fjr-landing .fjr-topbar__text{\r\n margin:0;\r\n font-size:clamp(12.5px,2.6vw,14px);\r\n line-height:1.5;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n flex-wrap:wrap;\r\n gap:8px;\r\n }\r\n .fjr-landing .fjr-topbar__icon{ color:var(--accent); font-size:.85em; }\r\n .fjr-landing .fjr-topbar__num{\r\n font-family:var(--mono);\r\n font-weight:700;\r\n color:var(--accent);\r\n }\r\n .fjr-landing .fjr-topbar__dot{ color:var(--muted-dark); }\r\n @media (max-width:479px){\r\n .fjr-landing .fjr-topbar__dot{ display:none; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-hero\" aria-labelledby=\"fjr-hero-h1\">\r\n <div class=\"fjr-hero__glow\" aria-hidden=\"true\"><\/div>\r\n <div class=\"fjr-container fjr-hero__inner\">\r\n\r\n <p class=\"fjr-eyebrow\">\r\n \/\/ for students & freshers in India \u2014 no experience needed\r\n <span class=\"caret\" aria-hidden=\"true\"><\/span>\r\n <\/p>\r\n\r\n <h1 id=\"fjr-hero-h1\" class=\"fjr-hero__h1\">\r\n Become frontend job ready in 30 days by learning\r\n <span class=\"mark\">what AI can't do<\/span>,\r\n and how to make AI do the rest.\r\n <\/h1>\r\n\r\n <p class=\"fjr-hero__sub fjr-muted-d\">\r\n This course takes zero experience freshers to job ready in 30 days \u2014 the\r\n frontend skills AI can't replace and the AI workflow recruiters expect,\r\n with coaching until you feel ready to apply.\r\n <\/p>\r\n\r\n \r\n <div class=\"fjr-vsl\" id=\"fjr-vsl\">\r\n <button class=\"fjr-vsl__facade\" type=\"button\" aria-label=\"Play the video \u2014 about 10 minutes\">\r\n <img fetchpriority=\"high\" class=\"fjr-vsl__poster\"\r\n src=\"assets\/vsl-poster.webp\"\r\n alt=\"Preview of the course video\"\r\n width=\"1280\" height=\"720\"\r\n fetchpriority=\"high\" decoding=\"async\">\r\n <span class=\"fjr-vsl__play\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"34\" height=\"34\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path d=\"M8 5v14l11-7z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"fjr-vsl__tag\" aria-hidden=\"true\">▶ watch \u2014 10 min<\/span>\r\n <\/button>\r\n \r\n <\/div>\r\n\r\n <a class=\"fjr-btn fjr-hero__cta\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">\r\n Start my 30 day blueprint \u2014\r\n <span class=\"fjr-price\">\u20b9497<\/span>\r\n <\/a>\r\n\r\n <div>\r\n <a class=\"fjr-cta-note\" href=\"#what-you-get\">or see what you get \u2193<\/a>\r\n <\/div>\r\n\r\n <p class=\"fjr-hero__trust\">7 day refund · WhatsApp help included · batch closes when full<\/p>\r\n\r\n <ul class=\"fjr-hero__stats\" aria-label=\"What's inside\">\r\n <li><span class=\"fjr-hero__diamond\" aria-hidden=\"true\">◆<\/span>11 real projects<\/li>\r\n <li><span class=\"fjr-hero__diamond\" aria-hidden=\"true\">◆<\/span>25+ hours<\/li>\r\n <li><span class=\"fjr-hero__diamond\" aria-hidden=\"true\">◆<\/span>live portfolio you deploy<\/li>\r\n <li><span class=\"fjr-hero__diamond\" aria-hidden=\"true\">◆<\/span>AI workflow included<\/li>\r\n <\/ul>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-hero{ overflow:hidden; }\r\n .fjr-landing .fjr-hero__glow{\r\n position:absolute;\r\n top:-10%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:min(900px,120vw);\r\n height:600px;\r\n background:radial-gradient(50% 50% at 50% 50%, rgba(255,176,32,.14), transparent 70%);\r\n pointer-events:none;\r\n z-index:0;\r\n }\r\n .fjr-landing .fjr-hero__inner{\r\n position:relative;\r\n z-index:1;\r\n text-align:center;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n }\r\n .fjr-landing .fjr-hero__h1{\r\n max-width:16ch;\r\n font-size:clamp(2rem,5.4vw,4rem);\r\n font-weight:800;\r\n line-height:1.05;\r\n letter-spacing:-.02em;\r\n margin:0 0 22px;\r\n }\r\n .fjr-landing .fjr-hero__h1 .mark{\r\n color:var(--accent);\r\n box-shadow:inset 0 -.14em 0 rgba(255,176,32,.28);\r\n }\r\n .fjr-landing .fjr-hero__sub{\r\n max-width:56ch;\r\n font-size:clamp(1rem,2.2vw,1.2rem);\r\n margin:0 0 34px;\r\n }\r\n .fjr-landing .fjr-vsl{\r\n width:100%;\r\n max-width:760px;\r\n aspect-ratio:16\/9;\r\n border-radius:14px;\r\n border:1px solid var(--line-dark);\r\n box-shadow:0 30px 80px rgba(0,0,0,.45);\r\n overflow:hidden;\r\n margin:0 0 32px;\r\n background:#000;\r\n }\r\n .fjr-landing .fjr-vsl__facade{\r\n position:relative;\r\n display:block;\r\n width:100%;\r\n height:100%;\r\n padding:0;\r\n border:0;\r\n cursor:pointer;\r\n background:#000;\r\n }\r\n .fjr-landing .fjr-vsl__poster{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n opacity:.85;\r\n }\r\n .fjr-landing .fjr-vsl__play{\r\n position:absolute;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n width:76px;\r\n height:76px;\r\n border-radius:50%;\r\n background:var(--accent);\r\n color:var(--ink);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n box-shadow:0 10px 30px rgba(0,0,0,.4);\r\n transition:transform .2s ease;\r\n }\r\n .fjr-landing .fjr-vsl__facade:hover .fjr-vsl__play{ transform:translate(-50%,-50%) scale(1.06); }\r\n .fjr-landing .fjr-vsl__facade:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }\r\n .fjr-landing .fjr-vsl__tag{\r\n position:absolute;\r\n left:14px;\r\n bottom:14px;\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n color:var(--paper);\r\n background:rgba(0,0,0,.55);\r\n padding:5px 10px;\r\n border-radius:6px;\r\n }\r\n .fjr-landing .fjr-hero__cta{ margin-bottom:0; }\r\n .fjr-landing .fjr-hero__trust{\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n color:var(--muted-dark);\r\n margin:22px 0 34px;\r\n }\r\n .fjr-landing .fjr-hero__stats{\r\n list-style:none;\r\n margin:0;\r\n padding:24px 0 0;\r\n border-top:1px solid var(--line-dark);\r\n width:100%;\r\n max-width:760px;\r\n display:flex;\r\n justify-content:center;\r\n flex-wrap:wrap;\r\n gap:10px 0;\r\n font-family:var(--mono);\r\n font-size:13px;\r\n color:var(--muted-dark);\r\n }\r\n .fjr-landing .fjr-hero__stats li{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:0 clamp(12px,3vw,22px);\r\n }\r\n .fjr-landing .fjr-hero__diamond{ color:var(--accent); font-size:.8em; }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-hero__stats li + li{ border-left:1px solid var(--line-dark); }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-problem\" aria-labelledby=\"fjr-problem-h2\">\r\n <div class=\"fjr-container fjr-problem__grid\">\r\n <div class=\"fjr-problem__copy\">\r\n <p class=\"fjr-eyebrow\">\/\/ does this sound like you?<\/p>\r\n <h2 id=\"fjr-problem-h2\" class=\"fjr-h2\">You are stuck, and it is not your fault.<\/h2>\r\n\r\n <ul class=\"fjr-problem__list\">\r\n <li>You fill job forms. Nobody replies.<\/li>\r\n <li>Every job wants experience. But how do you get experience without a job?<\/li>\r\n <li>You started many free videos. You finished none.<\/li>\r\n <li>Big courses cost \u20b920,000 to \u20b950,000. Too much money, too much time.<\/li>\r\n <li>You get stuck on one small error, with nobody to ask. So you stop.<\/li>\r\n <\/ul>\r\n\r\n <p class=\"fjr-problem__emph\">\r\n And now there is one more worry. Everyone says AI will do all the coding.\r\n So a voice asks, <em>why even learn this?<\/em> So you wait. And the more you\r\n wait, the more it feels like everyone is moving ahead, and you are stuck.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"fjr-problem__media\" aria-hidden=\"true\">\r\n <img loading=\"lazy\" src=\"https:\/\/webdevarmy.com\/wp-content\/uploads\/2026\/08\/prc.webp\"\r\n alt=\"\"\r\n width=\"520\" height=\"480\"\r\n loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-problem__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:clamp(28px,5vw,56px);\r\n align-items:center;\r\n }\r\n .fjr-landing .fjr-problem__copy{ max-width:62ch; }\r\n .fjr-landing .fjr-problem__list{\r\n list-style:none;\r\n margin:0 0 28px;\r\n padding:0;\r\n display:grid;\r\n gap:14px;\r\n }\r\n .fjr-landing .fjr-problem__list li{\r\n position:relative;\r\n padding-left:26px;\r\n font-size:clamp(1rem,2vw,1.12rem);\r\n }\r\n .fjr-landing .fjr-problem__list li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0;\r\n top:.62em;\r\n width:9px;\r\n height:9px;\r\n border-radius:2px;\r\n background:var(--accent);\r\n }\r\n .fjr-landing .fjr-problem__emph{\r\n font-size:clamp(1.05rem,2.2vw,1.25rem);\r\n font-weight:600;\r\n line-height:1.55;\r\n padding-left:18px;\r\n border-left:3px solid var(--accent);\r\n }\r\n .fjr-landing .fjr-problem__emph em{ font-style:italic; color:var(--muted-light); }\r\n .fjr-landing .fjr-problem__media{\r\n display:none;\r\n }\r\n .fjr-landing .fjr-problem__media img{\r\n width:100%;\r\n height:auto;\r\n border-radius:var(--radius);\r\n border:1px solid var(--line-light);\r\n }\r\n @media (min-width:1024px){\r\n .fjr-landing .fjr-problem__grid{ grid-template-columns:1.3fr .9fr; }\r\n .fjr-landing .fjr-problem__media{ display:block; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-proof\" aria-labelledby=\"fjr-proof-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ the truth about AI and coding jobs<\/p>\r\n <h2 id=\"fjr-proof-h2\" class=\"fjr-h2\">Coding jobs aren't dead. They changed.<\/h2>\r\n\r\n <p class=\"fjr-proof__lead fjr-muted-d\">\r\n AI is a fast helper. But it makes mistakes, and it doesn't know when it's\r\n wrong. So companies need someone to check it \u2014 someone who can read the\r\n code, catch the mistake, and fix it.\r\n <\/p>\r\n\r\n <p class=\"fjr-proof__emph\">\r\n <span class=\"hl\">AI can't replace that person. It needs that person.<\/span>\r\n This course makes you that person.\r\n <\/p>\r\n\r\n <div class=\"fjr-proof__grid\">\r\n \r\n <article class=\"fjr-proof__card\">\r\n <div class=\"fjr-proof__shot\">\r\n <img loading=\"lazy\" src=\"https:\/\/webdevarmy.com\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-20-205747.webp\"\r\n alt=\"U.S. Bureau of Labor Statistics job outlook box showing 15% growth, much faster than average\"\r\n width=\"480\" height=\"300\" loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n <p class=\"fjr-proof__caption\">Software jobs will grow about 15% by 2034. Growing, not shrinking.<\/p>\r\n <a class=\"fjr-proof__src\" href=\"https:\/\/www.bls.gov\/ooh\/computer-and-information-technology\/software-developers.htm\" target=\"_blank\" rel=\"noopener noreferrer\">U.S. Bureau of Labor Statistics \u2197<\/a>\r\n <\/article>\r\n\r\n \r\n <article class=\"fjr-proof__card\">\r\n <div class=\"fjr-proof__shot\">\r\n <img loading=\"lazy\" src=\"https:\/\/webdevarmy.com\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-20-205857.webp\"\r\n alt=\"Article line showing India is second at 11.2 percent with 688 frontend job postings\"\r\n width=\"480\" height=\"300\" loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n <p class=\"fjr-proof__caption\">India ranks number 2 in the world for frontend jobs.<\/p>\r\n <a class=\"fjr-proof__src\" href=\"https:\/\/www.interviewstack.io\/blog\/frontend-developer-skills-companies-want-2026\" target=\"_blank\" rel=\"noopener noreferrer\">InterviewStack, 2026 \u2197<\/a>\r\n <\/article>\r\n\r\n \r\n <article class=\"fjr-proof__card fjr-proof__card--stat\">\r\n <div class=\"fjr-proof__bignum\">85%<\/div>\r\n <p class=\"fjr-proof__caption\">of developers use AI regularly. Frontend is the 2nd highest adopter.<\/p>\r\n <a class=\"fjr-proof__src\" href=\"https:\/\/devecosystem-2025.jetbrains.com\/artificial-intelligence\" target=\"_blank\" rel=\"noopener noreferrer\">JetBrains State of Developer Ecosystem 2025 \u2197<\/a>\r\n <\/article>\r\n <\/div>\r\n\r\n <p class=\"fjr-proof__honest fjr-muted-d\">\r\n The honest part: the easy jobs are fewer now. Companies don't want a copied\r\n project. They want someone who can think. That's why this course is\r\n different. We don't teach you to copy. We teach you to build, check, and\r\n fix \u2014 the skill that gets a fresher hired in the AI age.\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-proof__lead{\r\n max-width:62ch;\r\n font-size:clamp(1.05rem,2.2vw,1.25rem);\r\n margin:0 0 24px;\r\n }\r\n .fjr-landing .fjr-proof__emph{\r\n max-width:60ch;\r\n font-size:clamp(1.15rem,2.6vw,1.5rem);\r\n font-weight:700;\r\n line-height:1.35;\r\n margin:0 0 44px;\r\n }\r\n .fjr-landing .fjr-proof__emph .hl{ color:var(--accent); }\r\n .fjr-landing .fjr-proof__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n margin-bottom:40px;\r\n }\r\n .fjr-landing .fjr-proof__card{\r\n border:1px solid var(--line-dark);\r\n border-radius:var(--radius);\r\n padding:20px;\r\n background:rgba(255,255,255,.02);\r\n transition:transform .2s ease, border-color .2s ease;\r\n display:flex;\r\n flex-direction:column;\r\n gap:14px;\r\n }\r\n .fjr-landing .fjr-proof__card:hover{\r\n transform:translateY(-4px);\r\n border-color:rgba(255,176,32,.4);\r\n }\r\n .fjr-landing .fjr-proof__shot{\r\n aspect-ratio:16\/10;\r\n border-radius:8px;\r\n overflow:hidden;\r\n border:1px solid var(--line-dark);\r\n background:#111;\r\n }\r\n .fjr-landing .fjr-proof__shot img{ width:100%; height:100%; object-fit:cover; }\r\n .fjr-landing .fjr-proof__card--stat{\r\n justify-content:center;\r\n align-items:flex-start;\r\n text-align:left;\r\n }\r\n .fjr-landing .fjr-proof__bignum{\r\n font-size:clamp(3.4rem,10vw,5rem);\r\n font-weight:800;\r\n line-height:1;\r\n letter-spacing:-.03em;\r\n color:var(--accent);\r\n }\r\n .fjr-landing .fjr-proof__caption{\r\n margin:0;\r\n font-size:1.05rem;\r\n font-weight:600;\r\n line-height:1.4;\r\n }\r\n .fjr-landing .fjr-proof__src{\r\n font-family:var(--mono);\r\n font-size:12px;\r\n color:var(--muted-dark);\r\n text-decoration:none;\r\n margin-top:auto;\r\n }\r\n .fjr-landing .fjr-proof__src:hover{ color:var(--accent); text-decoration:underline; }\r\n .fjr-landing .fjr-proof__honest{\r\n max-width:64ch;\r\n font-size:1.05rem;\r\n }\r\n @media (min-width:1024px){\r\n .fjr-landing .fjr-proof__grid{ grid-template-columns:repeat(3,1fr); }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-foryou\" aria-labelledby=\"fjr-foryou-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ this is for you if<\/p>\r\n <h2 id=\"fjr-foryou-h2\" class=\"fjr-h2\">This is for you if...<\/h2>\r\n\r\n <ul class=\"fjr-foryou__list\">\r\n <li>\r\n <span class=\"fjr-foryou__check\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/span>\r\n You are a student or fresher with little or no coding. Good \u2014 we start from zero.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-foryou__check\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/span>\r\n You want one clear path, not 50 random free videos.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-foryou__check\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/span>\r\n You can give about 50 minutes a day for 30 days.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-foryou__check\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/span>\r\n You are ready to actually build, not just watch.\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-foryou__list{\r\n list-style:none;\r\n margin:0;\r\n padding:0;\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:18px 40px;\r\n max-width:900px;\r\n }\r\n .fjr-landing .fjr-foryou__list li{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:14px;\r\n font-size:clamp(1rem,2vw,1.15rem);\r\n line-height:1.5;\r\n }\r\n .fjr-landing .fjr-foryou__check{\r\n flex:0 0 auto;\r\n width:30px;\r\n height:30px;\r\n border-radius:50%;\r\n background:rgba(255,176,32,.16);\r\n color:var(--accent-press);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n margin-top:2px;\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-foryou__list{ grid-template-columns:1fr 1fr; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-course\" id=\"what-you-get\" aria-labelledby=\"fjr-course-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ what this course is<\/p>\r\n <h2 id=\"fjr-course-h2\" class=\"fjr-h2\">One course. One clear path to your first job.<\/h2>\r\n <p class=\"fjr-course__intro fjr-muted-d\">\r\n Your problem is simple: you want a job, but you don't know the right path.\r\n This course is that path. Start at zero. Finish job ready in 30 days.\r\n <\/p>\r\n\r\n <div class=\"fjr-course__grid\">\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">01<\/span>\r\n <h3 class=\"fjr-course__title\">Full Video Course: HTML, CSS, JavaScript and React\r\n <a class=\"fjr-course__inline\" href=\"#curriculum\">(see curriculum \u2193)<\/a>\r\n <\/h3>\r\n <p>Learn from zero. Not just how to write code, but how to think and fix it, the way real developers do with AI.<\/p>\r\n <\/article>\r\n\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">02<\/span>\r\n <h3 class=\"fjr-course__title\">11 Real Projects You Build<\/h3>\r\n <p>You don't just watch. You build real apps, then learn why they work and how to fix them when they break.<\/p>\r\n <\/article>\r\n\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">03<\/span>\r\n <h3 class=\"fjr-course__title\">Your Live Portfolio Website + Setup Guide<\/h3>\r\n <p>Finish with a real website online, at your own web address. Ready for your resume the same day.<\/p>\r\n <\/article>\r\n\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">04<\/span>\r\n <h3 class=\"fjr-course__title\">WhatsApp Doubt Support<\/h3>\r\n <p>Stuck on a bug? Ask and get help. You never sit alone.<\/p>\r\n <\/article>\r\n\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">05<\/span>\r\n <h3 class=\"fjr-course__title\">Certificate of Completion<\/h3>\r\n <p>Proof you finished, to show employers.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-course__intro{\r\n max-width:60ch;\r\n font-size:clamp(1.05rem,2.2vw,1.2rem);\r\n margin:0 0 44px;\r\n }\r\n .fjr-landing .fjr-course__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:2px;\r\n background:var(--line-dark);\r\n border:1px solid var(--line-dark);\r\n border-radius:var(--radius);\r\n overflow:hidden;\r\n }\r\n .fjr-landing .fjr-course__item{\r\n background:var(--ink);\r\n padding:26px clamp(20px,3vw,30px);\r\n }\r\n .fjr-landing .fjr-course__idx{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n color:var(--accent);\r\n display:block;\r\n margin-bottom:12px;\r\n }\r\n .fjr-landing .fjr-course__title{\r\n font-size:1.15rem;\r\n font-weight:700;\r\n line-height:1.3;\r\n margin:0 0 8px;\r\n }\r\n .fjr-landing .fjr-course__inline{\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n font-weight:400;\r\n color:var(--accent);\r\n text-decoration:none;\r\n white-space:nowrap;\r\n }\r\n .fjr-landing .fjr-course__inline:hover{ text-decoration:underline; }\r\n .fjr-landing .fjr-course__item p{\r\n margin:0;\r\n color:var(--muted-dark);\r\n font-size:1rem;\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-course__grid{ grid-template-columns:1fr 1fr; }\r\n }\r\n @media (min-width:1024px){\r\n .fjr-landing .fjr-course__grid{ grid-template-columns:repeat(3,1fr); }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-bonuses\" aria-labelledby=\"fjr-bonuses-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ free bonuses \u2014 only with this batch<\/p>\r\n <h2 id=\"fjr-bonuses-h2\" class=\"fjr-h2 fjr-bonuses__h2\">\r\n Oh wait! Did we tell you? You also get these bonuses worth\r\n <span class=\"fjr-bonuses__hl\">\u20b96,995<\/span>, absolutely free.\r\n <\/h2>\r\n\r\n <div class=\"fjr-bonuses__grid\">\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b91,499<\/span>\r\n <h3 class=\"fjr-bonus__name\">AI Assisted Coding Toolkit<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: your guide to using AI the smart way, so you look skilled, not replaceable.<\/p>\r\n <ul>\r\n <li>What to learn yourself, and what to safely let AI do<\/li>\r\n <li>How to check and fix the code AI writes<\/li>\r\n <li>The right order to learn things, so you never feel lost<\/li>\r\n <\/ul>\r\n <\/article>\r\n\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b91,499<\/span>\r\n <h3 class=\"fjr-bonus__name\">Fresher Resume + LinkedIn Kit<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: a ready resume and profile, made for a fresher with no experience.<\/p>\r\n <ul>\r\n <li>A clean resume template built the way company computers like<\/li>\r\n <li>The right words to turn your projects into real experience<\/li>\r\n <li>A LinkedIn checklist so recruiters can find you<\/li>\r\n <\/ul>\r\n <\/article>\r\n\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b91,499<\/span>\r\n <h3 class=\"fjr-bonus__name\">48 Hour Interview Crash Sheet<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: the real questions junior interviews ask, with simple answers.<\/p>\r\n <ul>\r\n <li>Top HTML, CSS, and JavaScript questions, answered<\/li>\r\n <li>Small live coding tasks they give you, solved step by step<\/li>\r\n <li>What to say when you don't know an answer<\/li>\r\n <\/ul>\r\n <\/article>\r\n\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b9999<\/span>\r\n <h3 class=\"fjr-bonus__name\">30 Day Job Ready Roadmap<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: your day by day plan, so you never guess what to do next.<\/p>\r\n <ul>\r\n <li>Exactly what to learn each day<\/li>\r\n <li>About 50 minutes a day<\/li>\r\n <li>A clear finish line in 30 days<\/li>\r\n <\/ul>\r\n <\/article>\r\n\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b91,499<\/span>\r\n <h3 class=\"fjr-bonus__name\">How to Use AI (ChatGPT \/ v0) to Write Frontend Code 10x Faster<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: a hands on guide to building real screens fast with AI tools.<\/p>\r\n <ul>\r\n <li>Turn a plain description into working code with ChatGPT and v0<\/li>\r\n <li>Prompts that give you clean, usable frontend code<\/li>\r\n <li>How to fix the mistakes these tools make, so it actually works<\/li>\r\n <\/ul>\r\n <\/article>\r\n <\/div>\r\n\r\n <p class=\"fjr-bonuses__footer\">All 5 free with this batch. Worth <span>\u20b96,995<\/span>.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-bonuses__h2{ max-width:22ch; }\r\n .fjr-landing .fjr-bonuses__hl{ color:var(--accent-press); }\r\n .fjr-landing .fjr-bonuses__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n margin:36px 0 32px;\r\n }\r\n .fjr-landing .fjr-bonus{\r\n position:relative;\r\n background:var(--paper);\r\n border:1px solid var(--line-light);\r\n border-radius:var(--radius);\r\n padding:24px 22px 22px;\r\n box-shadow:0 1px 0 rgba(0,0,0,.03);\r\n overflow:hidden;\r\n }\r\n .fjr-landing .fjr-bonus::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0; left:0;\r\n width:100%; height:4px;\r\n background:linear-gradient(90deg,var(--accent),var(--accent-press));\r\n }\r\n .fjr-landing .fjr-bonus__gift{\r\n font-size:24px;\r\n display:block;\r\n margin-bottom:10px;\r\n }\r\n .fjr-landing .fjr-bonus__price{\r\n position:absolute;\r\n top:20px; right:18px;\r\n font-family:var(--mono);\r\n font-size:13px;\r\n font-weight:700;\r\n color:var(--accent-press);\r\n background:rgba(255,176,32,.14);\r\n padding:4px 10px;\r\n border-radius:999px;\r\n }\r\n .fjr-landing .fjr-bonus__name{\r\n font-size:1.12rem;\r\n font-weight:800;\r\n line-height:1.25;\r\n margin:0 0 10px;\r\n max-width:26ch;\r\n }\r\n .fjr-landing .fjr-bonus__what{\r\n margin:0 0 12px;\r\n font-size:.96rem;\r\n color:var(--muted-light);\r\n }\r\n .fjr-landing .fjr-bonus ul{\r\n margin:0;\r\n padding:0;\r\n list-style:none;\r\n display:grid;\r\n gap:8px;\r\n }\r\n .fjr-landing .fjr-bonus ul li{\r\n position:relative;\r\n padding-left:20px;\r\n font-size:.95rem;\r\n }\r\n .fjr-landing .fjr-bonus ul li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0; top:.55em;\r\n width:7px; height:7px;\r\n border-radius:2px;\r\n background:var(--accent);\r\n }\r\n .fjr-landing .fjr-bonuses__footer{\r\n text-align:center;\r\n font-size:clamp(1.1rem,2.4vw,1.35rem);\r\n font-weight:800;\r\n margin:0;\r\n }\r\n .fjr-landing .fjr-bonuses__footer span{ color:var(--accent-press); }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-bonuses__grid{ grid-template-columns:1fr 1fr; }\r\n }\r\n @media (min-width:1024px){\r\n .fjr-landing .fjr-bonuses__grid{ grid-template-columns:repeat(3,1fr); }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-curr\" id=\"curriculum\" aria-labelledby=\"fjr-curr-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ what you will learn<\/p>\r\n <h2 id=\"fjr-curr-h2\" class=\"fjr-h2\">The full path, from zero to job ready.<\/h2>\r\n <p class=\"fjr-curr__intro fjr-muted-d\">\r\n You start knowing nothing. Step by step, you learn to build real websites and apps.\r\n <\/p>\r\n\r\n <div class=\"fjr-curr__accordions\">\r\n <details>\r\n <summary>\r\n <span class=\"fjr-curr__sumtop\"><span class=\"fjr-curr__no\">01<\/span> Part 1: HTML \u2014 build the page<\/span>\r\n <span class=\"fjr-curr__line fjr-muted-d\">The bones of every website.<\/span>\r\n <\/summary>\r\n <div class=\"fjr-curr__body\">\r\n <ul>\r\n <li>HTML fundamentals: intro, document structure, elements<\/li>\r\n <li>Content and elements: images, comments, line breaks, links, lists, tables<\/li>\r\n <li>Forms<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n <span class=\"fjr-curr__sumtop\"><span class=\"fjr-curr__no\">02<\/span> Part 2: CSS \u2014 make it look good<\/span>\r\n <span class=\"fjr-curr__line fjr-muted-d\">Make it beautiful and work on every screen.<\/span>\r\n <\/summary>\r\n <div class=\"fjr-curr__body\">\r\n <ul>\r\n <li>Fundamentals and selectors<\/li>\r\n <li>div and span<\/li>\r\n <li>Colors and backgrounds (RGB, RGBA, HEX)<\/li>\r\n <li>Units (px, %, em, vh, vw, calc)<\/li>\r\n <li>Typography<\/li>\r\n <li>Box model<\/li>\r\n <li>Display and visibility<\/li>\r\n <li>Selectors (descendant, child, pseudo elements)<\/li>\r\n <li>Background images and gradients<\/li>\r\n <li>Positioning (static, relative, absolute, fixed, z-index, float)<\/li>\r\n <li>Responsive design (media queries)<\/li>\r\n <li>Flexbox<\/li>\r\n <li>Grid<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n <span class=\"fjr-curr__sumtop\"><span class=\"fjr-curr__no\">03<\/span> Part 3: JavaScript \u2014 make it work<\/span>\r\n <span class=\"fjr-curr__line fjr-muted-d\">Bring the page to life.<\/span>\r\n <\/summary>\r\n <div class=\"fjr-curr__body\">\r\n <ul>\r\n <li>Fundamentals (var, let, const)<\/li>\r\n <li>Strings, numbers, operators<\/li>\r\n <li>Data types and core objects<\/li>\r\n <li>Functions<\/li>\r\n <li>Conditions and comparison\/logical operators<\/li>\r\n <li>Control flow and loops<\/li>\r\n <li>Strings (methods, template literals)<\/li>\r\n <li>Arrays (methods)<\/li>\r\n <li>Iterations (forEach, map, filter, find)<\/li>\r\n <li>Date<\/li>\r\n <li>DOM and DOM manipulation<\/li>\r\n <li>Asynchronous JavaScript<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n <span class=\"fjr-curr__sumtop\"><span class=\"fjr-curr__no\">04<\/span> Part 4: React \u2014 build like real companies<\/span>\r\n <span class=\"fjr-curr__line fjr-muted-d\">The tool used by top tech companies.<\/span>\r\n <\/summary>\r\n <div class=\"fjr-curr__body\">\r\n <ul>\r\n <li>Fundamentals (components, JSX, CSS in React)<\/li>\r\n <li>Data flow (props, event handlers, prop drilling)<\/li>\r\n <li>Hooks (useState, useEffect, useRef, useReducer, useContext, custom hooks)<\/li>\r\n <li>Conditional rendering<\/li>\r\n <li>Forms and form projects<\/li>\r\n <li>React Router 6<\/li>\r\n <li>Performance (memo, useCallback, useMemo)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n\r\n \r\n <div class=\"fjr-curr__projects\">\r\n <h3 class=\"fjr-curr__projects-h\">The 11 real projects you build<\/h3>\r\n <p class=\"fjr-curr__projects-intro fjr-muted-d\">\r\n You build all of these, then learn why each works and how to fix it when\r\n it breaks. That last part is the skill AI can't hand you.\r\n <\/p>\r\n <ol class=\"fjr-curr__projects-list\">\r\n <li>Interactive counter app (useState)<\/li>\r\n <li>Dynamic UI app (useEffect + conditional rendering)<\/li>\r\n <li>Working forms app<\/li>\r\n <li>Sidebar menu<\/li>\r\n <li>Popup modal<\/li>\r\n <li>Cocktails app (live database)<\/li>\r\n <li>Markdown preview tool<\/li>\r\n <li>Pagination app<\/li>\r\n <li>MovieDB app (real movie data)<\/li>\r\n <li>Netflix style app<\/li>\r\n <li>Disney+ style app<\/li>\r\n <\/ol>\r\n <p class=\"fjr-curr__close\">You finish with your live portfolio, a ready resume, and real interview practice.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-curr__intro{\r\n max-width:56ch;\r\n font-size:clamp(1.05rem,2.2vw,1.2rem);\r\n margin:0 0 32px;\r\n }\r\n .fjr-landing .fjr-curr__accordions{ margin-bottom:56px; }\r\n .fjr-landing .fjr-curr__sumtop{\r\n display:flex;\r\n align-items:baseline;\r\n gap:12px;\r\n font-size:1.1rem;\r\n }\r\n .fjr-landing .fjr-curr__no{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n color:var(--accent);\r\n }\r\n .fjr-landing .fjr-curr__line{ font-weight:400; font-size:.95rem; }\r\n .fjr-landing .fjr-curr__body{ padding:0 0 22px; }\r\n .fjr-landing .fjr-curr__body ul{\r\n margin:0;\r\n padding:0;\r\n list-style:none;\r\n display:grid;\r\n gap:9px;\r\n max-width:70ch;\r\n }\r\n .fjr-landing .fjr-curr__body ul li{\r\n position:relative;\r\n padding-left:20px;\r\n color:var(--muted-dark);\r\n font-size:.98rem;\r\n }\r\n .fjr-landing .fjr-curr__body ul li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0; top:.55em;\r\n width:6px; height:6px;\r\n border-radius:50%;\r\n background:var(--accent);\r\n }\r\n .fjr-landing .fjr-curr__projects-h{\r\n font-size:clamp(1.3rem,3vw,1.7rem);\r\n font-weight:800;\r\n letter-spacing:-.02em;\r\n margin:0 0 12px;\r\n }\r\n .fjr-landing .fjr-curr__projects-intro{ max-width:60ch; margin:0 0 24px; }\r\n .fjr-landing .fjr-curr__projects-list{\r\n margin:0 0 24px;\r\n padding-left:1.4em;\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:10px 40px;\r\n }\r\n .fjr-landing .fjr-curr__projects-list li{ font-size:1rem; padding-left:6px; }\r\n .fjr-landing .fjr-curr__projects-list li::marker{\r\n color:var(--accent);\r\n font-family:var(--mono);\r\n font-weight:700;\r\n }\r\n .fjr-landing .fjr-curr__close{\r\n font-weight:700;\r\n font-size:1.05rem;\r\n margin:0;\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-curr__projects-list{ grid-template-columns:1fr 1fr; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-value\" aria-labelledby=\"fjr-value-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ here is everything you get<\/p>\r\n <h2 id=\"fjr-value-h2\" class=\"fjr-h2\">Everything included.<\/h2>\r\n\r\n <div class=\"fjr-value__card\">\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">Core Course: HTML, CSS, JavaScript and React (25+ hours)<\/span>\r\n <span class=\"fjr-value__val\">\u20b96,999<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">11 Real Projects to build along the way<\/span>\r\n <span class=\"fjr-value__val fjr-value__inc\">Included<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">Your Live Portfolio Website + easy setup guide<\/span>\r\n <span class=\"fjr-value__val fjr-value__inc\">Included<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">WhatsApp Doubt Support Group<\/span>\r\n <span class=\"fjr-value__val fjr-value__inc\">Included<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">Certificate of Completion<\/span>\r\n <span class=\"fjr-value__val fjr-value__inc\">Included<\/span>\r\n <\/div>\r\n\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 1<\/span> AI Assisted Coding Toolkit<\/span>\r\n <span class=\"fjr-value__val\">\u20b91,499<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 2<\/span> Fresher Resume + LinkedIn Kit<\/span>\r\n <span class=\"fjr-value__val\">\u20b91,499<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 3<\/span> 48 Hour Interview Crash Sheet<\/span>\r\n <span class=\"fjr-value__val\">\u20b91,499<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 4<\/span> 30 Day Job Ready Roadmap<\/span>\r\n <span class=\"fjr-value__val\">\u20b9999<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 5<\/span> How to Use AI (ChatGPT \/ v0) to Code 10x Faster<\/span>\r\n <span class=\"fjr-value__val\">\u20b91,499<\/span>\r\n <\/div>\r\n\r\n <div class=\"fjr-value__row fjr-value__total\">\r\n <span class=\"fjr-value__item\">Total Value<\/span>\r\n <span class=\"fjr-value__val\"><s>\u20b913,994<\/s><\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row fjr-value__price\">\r\n <span class=\"fjr-value__item\">Your price today<\/span>\r\n <span class=\"fjr-value__val\">\u20b9497<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"fjr-value__cta\">\r\n <a class=\"fjr-btn\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">Start my 30 day blueprint \u2014 <span class=\"fjr-price\">\u20b9497<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-value__card{\r\n max-width:760px;\r\n margin:0 auto;\r\n background:var(--paper);\r\n border:1px solid var(--line-light);\r\n border-radius:14px;\r\n padding:8px clamp(16px,3vw,28px);\r\n box-shadow:0 10px 40px rgba(0,0,0,.06);\r\n }\r\n .fjr-landing .fjr-value__row{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:16px;\r\n padding:16px 0;\r\n border-bottom:1px solid var(--line-light);\r\n }\r\n .fjr-landing .fjr-value__row:last-child{ border-bottom:0; }\r\n .fjr-landing .fjr-value__item{\r\n font-size:1rem;\r\n font-weight:600;\r\n line-height:1.35;\r\n }\r\n .fjr-landing .fjr-value__tag{\r\n display:inline-block;\r\n font-family:var(--mono);\r\n font-size:11px;\r\n font-weight:700;\r\n color:var(--accent-press);\r\n background:rgba(255,176,32,.16);\r\n padding:2px 7px;\r\n border-radius:5px;\r\n margin-right:6px;\r\n }\r\n .fjr-landing .fjr-value__val{\r\n font-family:var(--mono);\r\n font-weight:700;\r\n white-space:nowrap;\r\n font-size:1rem;\r\n }\r\n .fjr-landing .fjr-value__inc{ color:var(--muted-light); font-weight:600; }\r\n .fjr-landing .fjr-value__total{\r\n border-top:2px solid var(--line-light);\r\n padding-top:20px;\r\n }\r\n .fjr-landing .fjr-value__total .fjr-value__item,\r\n .fjr-landing .fjr-value__total .fjr-value__val{\r\n font-size:1.2rem;\r\n color:var(--muted-light);\r\n }\r\n .fjr-landing .fjr-value__price .fjr-value__item{\r\n font-size:1.3rem;\r\n font-weight:800;\r\n }\r\n .fjr-landing .fjr-value__price .fjr-value__val{\r\n font-size:clamp(1.6rem,4vw,2.2rem);\r\n font-weight:800;\r\n color:var(--accent-press);\r\n }\r\n .fjr-landing .fjr-value__cta{ text-align:center; margin-top:32px; }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-guarantee\" aria-labelledby=\"fjr-guarantee-h2\">\r\n <div class=\"fjr-container\">\r\n <div class=\"fjr-guarantee__card\">\r\n <p class=\"fjr-eyebrow\">\/\/ 100% Money Back Guarantee<\/p>\r\n <h2 id=\"fjr-guarantee-h2\" class=\"fjr-h2 fjr-guarantee__h2\">You do the work. We take the risk.<\/h2>\r\n\r\n <div class=\"fjr-guarantee__promises\">\r\n <div class=\"fjr-guarantee__promise\">\r\n <h3 class=\"fjr-guarantee__ptitle\">7 day money back<\/h3>\r\n <ul class=\"fjr-guarantee__list\">\r\n <li>Join, watch the early lessons, and open the first projects<\/li>\r\n <li>Not the right fit? Request a full refund within 7 days<\/li>\r\n <li>One condition: you have completed less than 20 percent of the course<\/li>\r\n <li>Meet that, and every rupee comes back<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"fjr-guarantee__promise\">\r\n <h3 class=\"fjr-guarantee__ptitle\">The Interview Ready Guarantee<\/h3>\r\n <p>Finish the course, then attend 5 real interviews within 90 days and show us the proof. If you do all that and still get no offer, we refund every rupee. You risk nothing but your effort.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"fjr-guarantee__note fjr-muted-d\">\r\n No honest course can force a company to hire you. So we guarantee our\r\n effort and reward yours, not a promise we can't control.\r\n <\/p>\r\n\r\n <div class=\"fjr-guarantee__seal\">\r\n <span class=\"fjr-guarantee__shield\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 2 4 5v6c0 5 3.4 8.4 8 11 4.6-2.6 8-6 8-11V5l-8-3Z\"\/>\r\n <path d=\"m9 12 2 2 4-4\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"fjr-guarantee__sealtext\">7 Day Refund · Interview Ready Guarantee<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-mentor\" aria-labelledby=\"fjr-mentor-h2\">\r\n <div class=\"fjr-container fjr-mentor__grid\">\r\n <div class=\"fjr-mentor__photo\">\r\n <img loading=\"lazy\" src=\"https:\/\/webdevarmy.com\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-16-at-11.34.08-PM.jpeg\"\r\n alt=\"Roopam Gupta, course mentor\"\r\n width=\"420\" height=\"480\"\r\n loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n\r\n <div class=\"fjr-mentor__copy\">\r\n <p class=\"fjr-eyebrow\">\/\/ meet your mentor<\/p>\r\n <h2 id=\"fjr-mentor-h2\" class=\"fjr-h2\">Roopam Gupta<\/h2>\r\n\r\n <p class=\"fjr-mentor__credits fjr-muted-d\">\r\n DevOps Engineer with 3.5+ years of industry experience and a strong\r\n background in web development. Hands on with Full Stack Development,\r\n cloud, and DevOps, with a focus on practical, project based learning.\r\n <\/p>\r\n\r\n <p class=\"fjr-mentor__body\">\r\n Roopam has built and shipped real software. So this course doesn't teach\r\n you to just follow along, it teaches you to think like someone who\r\n actually works in the field.\r\n <\/p>\r\n\r\n <a class=\"fjr-mentor__linkedin\"\r\n href=\"https:\/\/www.linkedin.com\/in\/roopam-badoniya-947748195\/\"\r\n target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"fjr-mentor__li-icon\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"\/>\r\n <\/svg>\r\n <span>View Roopam on LinkedIn<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-mentor__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:clamp(28px,5vw,56px);\r\n align-items:center;\r\n }\r\n .fjr-landing .fjr-mentor__photo{ max-width:340px; }\r\n .fjr-landing .fjr-mentor__photo img{\r\n width:100%;\r\n height:auto;\r\n border-radius:14px;\r\n border:2px solid var(--accent);\r\n box-shadow:0 20px 60px rgba(0,0,0,.4);\r\n }\r\n .fjr-landing .fjr-mentor__credits{\r\n font-family:var(--mono);\r\n font-size:.95rem;\r\n line-height:1.55;\r\n margin:0 0 20px;\r\n padding-left:16px;\r\n border-left:3px solid var(--accent);\r\n }\r\n .fjr-landing .fjr-mentor__body{\r\n font-size:clamp(1.05rem,2.2vw,1.2rem);\r\n max-width:52ch;\r\n margin:0 0 26px;\r\n }\r\n .fjr-landing .fjr-mentor__linkedin{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n min-height:44px;\r\n padding:10px 20px;\r\n border:1px solid var(--accent);\r\n border-radius:var(--radius);\r\n color:var(--accent);\r\n font-weight:700;\r\n font-size:15px;\r\n text-decoration:none;\r\n transition:background .18s ease, color .18s ease, transform .18s ease;\r\n }\r\n .fjr-landing .fjr-mentor__linkedin:hover{\r\n background:var(--accent);\r\n color:var(--ink);\r\n transform:translateY(-2px);\r\n }\r\n .fjr-landing .fjr-mentor__linkedin:focus-visible{\r\n outline:3px solid var(--accent);\r\n outline-offset:3px;\r\n }\r\n .fjr-landing .fjr-mentor__li-icon{ flex:0 0 auto; }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-mentor__grid{ grid-template-columns:340px 1fr; }\r\n }\r\n<\/style>\r\n\r\n\r\n\r\n\r\n<section class=\"sp-section sp-strip\" aria-labelledby=\"sp-strip-h\">\r\n <div class=\"sp-wrap\">\r\n <p class=\"sp-label\">\/\/ real student work<\/p>\r\n <h2 id=\"sp-strip-h\" class=\"sp-h2 sp-strip__h\">Not just reviews. Real apps students actually shipped.<\/h2>\r\n\r\n <ul class=\"sp-stats\" aria-label=\"Workshop numbers\">\r\n <li><span class=\"sp-diamond\" aria-hidden=\"true\">◆<\/span>90+ written reviews<\/li>\r\n <li><span class=\"sp-diamond\" aria-hidden=\"true\">◆<\/span>37 students shipped real React apps<\/li>\r\n <li><span class=\"sp-diamond\" aria-hidden=\"true\">◆<\/span>11 live and clickable<\/li>\r\n <\/ul>\r\n\r\n <div class=\"sp-scroller\" role=\"list\" aria-label=\"Student work\">\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Rahul<\/p>\r\n <p class=\"sp-card__proj\">Book store app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/incandescent-lolly-bf0481.netlify.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/Shady-45\/books-buy\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Varun H<\/p>\r\n <p class=\"sp-card__proj\">Amazon book list app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/hvarun13.github.io\/amazon-booklist\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/hvarun13\/amazon-booklist\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Aaditya Singh Rana<\/p>\r\n <p class=\"sp-card__proj\">React practice app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/aadi-singh.github.io\/WebDevAcademy--React\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/aadi-singh\/WebDevAcademy--React\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Yash Adatiya<\/p>\r\n <p class=\"sp-card__proj\">Library app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/library-task-1.netlify.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Kummetha Adi Narayana Reddy<\/p>\r\n <p class=\"sp-card__proj\">React props app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/adi19471.github.io\/react-props-passdata\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/Adi19471\/react-props-passdata\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Monika Pant<\/p>\r\n <p class=\"sp-card__proj\">Library app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/o15xfm.csb.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/codesandbox.io\/s\/my-library-app-o15xfm\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <p class=\"sp-strip__caption\">These are early React projects, shared by the students themselves. They show one simple thing: people who started with little shipped a real, working app fast.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"sp-section sp-testi\" aria-labelledby=\"sp-testi-h\">\r\n <div class=\"sp-wrap\">\r\n <p class=\"sp-label\">\/\/ what learners said<\/p>\r\n <h2 id=\"sp-testi-h\" class=\"sp-h2\">What learners said about the teaching<\/h2>\r\n\r\n <p class=\"sp-disclose\">\r\n <span class=\"sp-disclose__dot\" aria-hidden=\"true\"><\/span>\r\n Real feedback and real projects from students in a past React workshop. Shared with permission. Names are real; emails are kept private.\r\n <\/p>\r\n\r\n \r\n <figure class=\"sp-verified\">\r\n <span class=\"sp-verified__badge\">\u2713 Verified \u2014 review + live app from the same student<\/span>\r\n <blockquote class=\"sp-verified__quote\">\"I liked the teaching.\"<\/blockquote>\r\n <span class=\"sp-verified__name\">Rahul<\/span>\r\n <p class=\"sp-verified__line\">They also built and shipped this:<\/p>\r\n <div class=\"sp-verified__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/incandescent-lolly-bf0481.netlify.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/Shady-45\/books-buy\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/figure>\r\n\r\n <div class=\"sp-carousel\" aria-label=\"What learners said \u2014 auto-scrolling reviews\">\r\n <div class=\"sp-reviews\">\r\n \r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"It's just beginning but it's already a good start. The teaching is at the right speed, and even a complete beginner can understand the concept. Looking forward to the next one. Thanks!\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Tejas Gandhi<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I really enjoyed the pace of the lecture. It's great that the teacher goes into each part in detail.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Michelle<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like that there will be projects I can put on my GitHub, as proof that I actually did something.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Peter<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"The teaching style is excellent and straightforward. I'm looking forward to working on real projects.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Jyoti Malhotra<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"Very good explanation, easy and clear. The mic sounds good and the mentor speaks very clearly, so it's easy to follow even though English is not my first language.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Luca<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"The way of teaching is excellent, and I don't think it needs any improvement.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Suchikant Patnaik<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like the beginner friendly teaching, and the class was super good. In my opinion, no change is needed.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Ajith Jacob Dany<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like the way you teach. It makes everyone very comfortable to understand. Nothing I would change.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Ritesh<\/figcaption>\r\n <\/figure>\r\n\r\n \r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"It's just beginning but it's already a good start. The teaching is at the right speed, and even a complete beginner can understand the concept. Looking forward to the next one. Thanks!\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Tejas Gandhi<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I really enjoyed the pace of the lecture. It's great that the teacher goes into each part in detail.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Michelle<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like that there will be projects I can put on my GitHub, as proof that I actually did something.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Peter<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"The teaching style is excellent and straightforward. I'm looking forward to working on real projects.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Jyoti Malhotra<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"Very good explanation, easy and clear. The mic sounds good and the mentor speaks very clearly, so it's easy to follow even though English is not my first language.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Luca<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"The way of teaching is excellent, and I don't think it needs any improvement.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Suchikant Patnaik<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like the beginner friendly teaching, and the class was super good. In my opinion, no change is needed.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Ajith Jacob Dany<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like the way you teach. It makes everyone very comfortable to understand. Nothing I would change.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Ritesh<\/figcaption>\r\n <\/figure>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n \/* ===== 11 \u00b7 SOCIAL PROOF \u2014 light theme (adapted from social-proof-section.html) ===== *\/\r\n .fjr-landing .sp-section{\r\n background:var(--paper);\r\n color:var(--ink);\r\n padding-block:clamp(48px,7vw,80px);\r\n }\r\n .fjr-landing .sp-testi{ background:var(--paper-2); }\r\n .fjr-landing .sp-wrap{\r\n width:100%;\r\n max-width:var(--container);\r\n margin-inline:auto;\r\n padding-inline:clamp(20px,5vw,40px);\r\n }\r\n .fjr-landing .sp-label{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n letter-spacing:.02em;\r\n color:var(--accent-press);\r\n margin:0 0 16px;\r\n }\r\n .fjr-landing .sp-h2{\r\n font-size:clamp(1.5rem,3.4vw,2.3rem);\r\n font-weight:800;\r\n line-height:1.12;\r\n letter-spacing:-.02em;\r\n margin:0 0 20px;\r\n color:var(--ink);\r\n }\r\n\r\n \/* Link buttons (shared by strip + verified card) *\/\r\n .fjr-landing .sp-live,\r\n .fjr-landing .sp-code{\r\n display:inline-flex;\r\n align-items:center;\r\n min-height:44px;\r\n padding:10px 16px;\r\n border-radius:8px;\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n font-weight:700;\r\n text-decoration:none;\r\n transition:background .18s ease, transform .18s ease, color .18s ease, border-color .18s ease;\r\n }\r\n .fjr-landing .sp-live{ background:var(--accent); color:var(--ink); }\r\n .fjr-landing .sp-live:hover{ background:var(--accent-press); transform:translateY(-1px); }\r\n .fjr-landing .sp-code{ border:1px solid var(--line-light); color:var(--muted-light); background:var(--paper); }\r\n .fjr-landing .sp-code:hover{ color:var(--ink); border-color:var(--accent); }\r\n .fjr-landing .sp-live:focus-visible,\r\n .fjr-landing .sp-code:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }\r\n\r\n \/* ---------- COMPONENT A: proof strip ---------- *\/\r\n .fjr-landing .sp-strip__h{ max-width:24ch; }\r\n .fjr-landing .sp-stats{\r\n list-style:none;\r\n margin:0 0 26px;\r\n padding:0;\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px 24px;\r\n font-family:var(--mono);\r\n font-size:13px;\r\n color:var(--muted-light);\r\n }\r\n .fjr-landing .sp-stats li{ display:inline-flex; align-items:center; gap:8px; }\r\n .fjr-landing .sp-diamond{ color:var(--accent-press); font-size:.8em; }\r\n\r\n .fjr-landing .sp-scroller{\r\n display:flex;\r\n gap:16px;\r\n overflow-x:auto;\r\n scroll-snap-type:x mandatory;\r\n -webkit-overflow-scrolling:touch;\r\n padding:4px 0 14px;\r\n margin-inline:calc(-1 * clamp(20px,5vw,40px));\r\n padding-inline:clamp(20px,5vw,40px);\r\n }\r\n .fjr-landing .sp-card{\r\n scroll-snap-align:start;\r\n flex:0 0 auto;\r\n width:min(80vw,300px);\r\n display:flex;\r\n flex-direction:column;\r\n gap:8px;\r\n padding:20px;\r\n border:1px solid var(--line-light);\r\n border-radius:var(--radius);\r\n background:var(--paper-2);\r\n }\r\n .fjr-landing .sp-card__name{ margin:0; font-weight:800; font-size:1.02rem; line-height:1.25; color:var(--ink); }\r\n .fjr-landing .sp-card__proj{ margin:0 0 6px; font-size:.92rem; color:var(--muted-light); }\r\n .fjr-landing .sp-card__links{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }\r\n .fjr-landing .sp-strip__caption{\r\n max-width:66ch;\r\n margin:18px 0 0;\r\n font-size:.95rem;\r\n line-height:1.55;\r\n color:var(--muted-light);\r\n }\r\n\r\n \/* ---------- COMPONENT B: testimonials ---------- *\/\r\n .fjr-landing .sp-disclose{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:10px;\r\n max-width:72ch;\r\n margin:0 0 30px;\r\n font-size:.95rem;\r\n color:var(--muted-light);\r\n }\r\n .fjr-landing .sp-disclose__dot{\r\n flex:0 0 auto; width:9px; height:9px; margin-top:.45em;\r\n border-radius:50%; background:var(--accent);\r\n }\r\n\r\n \/* Verified card \u2014 larger, set apart, gold border + subtle glow *\/\r\n .fjr-landing .sp-verified{\r\n margin:0 0 40px;\r\n max-width:760px;\r\n background:var(--ink);\r\n border:2px solid var(--accent);\r\n border-radius:14px;\r\n padding:clamp(22px,4vw,34px);\r\n box-shadow:0 0 0 6px rgba(255,176,32,.06), 0 20px 60px rgba(255,176,32,.12);\r\n }\r\n .fjr-landing .sp-verified__badge{\r\n display:inline-block;\r\n font-family:var(--mono);\r\n font-size:11.5px;\r\n font-weight:700;\r\n color:var(--accent-press);\r\n background:rgba(255,176,32,.16);\r\n padding:5px 12px;\r\n border-radius:999px;\r\n margin-bottom:16px;\r\n }\r\n .fjr-landing .sp-verified__quote{\r\n margin:0 0 10px;\r\n font-size:clamp(1.2rem,2.6vw,1.5rem);\r\n font-weight:700;\r\n line-height:1.35;\r\n color:var(--paper);\r\n }\r\n .fjr-landing .sp-verified__name{ font-weight:800; color:var(--accent); }\r\n .fjr-landing .sp-verified__line{ margin:16px 0 12px; font-size:.95rem; color:var(--muted-dark); }\r\n .fjr-landing .sp-verified__links{ display:flex; flex-wrap:wrap; gap:12px; }\r\n \/* Secondary link + badge tuned for the dark verified card *\/\r\n .fjr-landing .sp-verified .sp-code{ background:transparent; border-color:var(--line-dark); color:var(--muted-dark); }\r\n .fjr-landing .sp-verified .sp-code:hover{ color:var(--paper); border-color:var(--accent); }\r\n\r\n \/* Reviews \u2014 auto-scrolling marquee carousel *\/\r\n .fjr-landing .sp-carousel{\r\n position:relative;\r\n overflow:hidden;\r\n \/* bleed to container edges so cards can enter\/exit past the padding *\/\r\n margin-inline:calc(-1 * clamp(20px,5vw,40px));\r\n padding-block:6px;\r\n \/* soft fade at both edges *\/\r\n -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);\r\n mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);\r\n }\r\n .fjr-landing .sp-reviews{\r\n display:flex;\r\n flex-wrap:nowrap;\r\n width:max-content;\r\n animation:sp-marquee 48s linear infinite;\r\n will-change:transform;\r\n }\r\n .fjr-landing .sp-carousel:hover .sp-reviews,\r\n .fjr-landing .sp-carousel:focus-within .sp-reviews{ animation-play-state:paused; }\r\n @keyframes sp-marquee{\r\n from{ transform:translateX(0); }\r\n to{ transform:translateX(-50%); } \/* card set is duplicated, so -50% = one full set *\/\r\n }\r\n .fjr-landing .sp-review{\r\n flex:0 0 min(80vw,340px);\r\n \/* uniform gap via margin (incl. the last card) so each half is exactly equal \u2192 seamless loop *\/\r\n margin:0 18px 0 0;\r\n background:var(--paper);\r\n border:1px solid var(--line-light);\r\n border-radius:var(--radius);\r\n padding:22px;\r\n transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;\r\n }\r\n .fjr-landing .sp-review:hover{ transform:translateY(-4px); border-color:rgba(255,176,32,.5); box-shadow:0 16px 40px rgba(0,0,0,.08); }\r\n .fjr-landing .sp-review__mark{\r\n font-family:var(--mono);\r\n font-size:18px;\r\n color:var(--accent-press);\r\n display:block;\r\n margin-bottom:10px;\r\n }\r\n .fjr-landing .sp-review blockquote{ margin:0 0 14px; font-size:1rem; line-height:1.55; color:var(--ink); }\r\n .fjr-landing .sp-review__name{ font-weight:800; color:var(--accent-press); }\r\n\r\n \/* No motion: fall back to a normal swipeable scroller, drop the clone set *\/\r\n @media (prefers-reduced-motion:reduce){\r\n .fjr-landing .sp-carousel{\r\n overflow-x:auto;\r\n -webkit-mask-image:none;\r\n mask-image:none;\r\n scroll-snap-type:x mandatory;\r\n }\r\n .fjr-landing .sp-reviews{ animation:none; }\r\n .fjr-landing .sp-reviews > [aria-hidden=\"true\"]{ display:none; }\r\n .fjr-landing .sp-review{ scroll-snap-align:start; }\r\n }\r\n @media (prefers-reduced-motion:reduce){\r\n .fjr-landing .sp-live,.fjr-landing .sp-code,.fjr-landing .sp-review{ transition:none; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-how\" aria-labelledby=\"fjr-how-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ how it works<\/p>\r\n <h2 id=\"fjr-how-h2\" class=\"fjr-h2\">Three steps. Thirty days.<\/h2>\r\n\r\n <ol class=\"fjr-how__steps\">\r\n <li class=\"fjr-how__step\">\r\n <span class=\"fjr-how__no\">01<\/span>\r\n <h3 class=\"fjr-how__title\">Join<\/h3>\r\n <p>You get everything right away: all videos, all projects, all bonuses.<\/p>\r\n <\/li>\r\n <li class=\"fjr-how__step\">\r\n <span class=\"fjr-how__no\">02<\/span>\r\n <h3 class=\"fjr-how__title\">Follow the 30 day plan<\/h3>\r\n <p>About 50 minutes a day. Build as you learn. Ask in WhatsApp the moment you're stuck.<\/p>\r\n <\/li>\r\n <li class=\"fjr-how__step\">\r\n <span class=\"fjr-how__no\">03<\/span>\r\n <h3 class=\"fjr-how__title\">Go live and apply<\/h3>\r\n <p>Put your website online, fix your resume with the kit, and start giving interviews with the crash sheet in hand.<\/p>\r\n <\/li>\r\n <\/ol>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-how__steps{\r\n list-style:none;\r\n margin:0;\r\n padding:0;\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:28px;\r\n position:relative;\r\n }\r\n .fjr-landing .fjr-how__step{\r\n position:relative;\r\n padding:24px;\r\n border:1px solid var(--line-dark);\r\n border-radius:var(--radius);\r\n background:rgba(255,255,255,.02);\r\n }\r\n .fjr-landing .fjr-how__no{\r\n font-family:var(--mono);\r\n font-size:14px;\r\n font-weight:700;\r\n color:var(--ink);\r\n background:var(--accent);\r\n width:40px; height:40px;\r\n border-radius:50%;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n margin-bottom:14px;\r\n }\r\n .fjr-landing .fjr-how__title{\r\n font-size:1.2rem;\r\n font-weight:700;\r\n margin:0 0 8px;\r\n }\r\n .fjr-landing .fjr-how__step p{\r\n margin:0;\r\n color:var(--muted-dark);\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-how__steps{ grid-template-columns:repeat(3,1fr); }\r\n \/* thin connecting accent hairline behind the steps (desktop only) *\/\r\n .fjr-landing .fjr-how__steps::before{\r\n content:\"\";\r\n position:absolute;\r\n top:44px; left:15%; right:15%;\r\n height:1px;\r\n background:var(--accent);\r\n opacity:.35;\r\n z-index:0;\r\n }\r\n .fjr-landing .fjr-how__step{ z-index:1; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-faq\" aria-labelledby=\"fjr-faq-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ questions<\/p>\r\n <h2 id=\"fjr-faq-h2\" class=\"fjr-h2\">Straight answers.<\/h2>\r\n\r\n <div class=\"fjr-faq__list\">\r\n <details>\r\n <summary>Will AI take this job before I even get it?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>No. AI is a helper, and it makes mistakes. Companies need people who can check and fix its work. This course teaches exactly that, so AI becomes your tool, not your replacement.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>Can't I just use AI to build without learning to code?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>You can build something that looks fine. But when it breaks, you won't know why, and you won't get hired. Companies pay you to understand the code, not just to prompt for it.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>I've never written one line of code. Can I really do this?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>Yes. This starts from zero, and the WhatsApp group is there when you're stuck.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>What if I get stuck?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>Post it in the WhatsApp group. A small error won't stop you for days.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>Will this guarantee me a job?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>No honest course can promise that. What we promise: you finish with a real website online, a ready resume, and interview practice. And if you finish everything and still don't feel ready, we coach you personally until you do.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>How is this different from free YouTube videos?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>YouTube is random videos, no order, no help. This is one clear path, with support, plus the resume and interview help YouTube skips.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>How is this different from a \u20b930,000 bootcamp?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>Bootcamps cram Java, Python, React, Node and databases into 6 months. This is focused: frontend done properly in 30 days, for a fraction of the cost.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>What if I don't like it?<\/summary>\r\n <div class=\"fjr-faq__a\">\r\n <p>Join, watch the early lessons, and open the first projects.<\/p>\r\n <ul class=\"fjr-faq__ul\">\r\n <li>Not the right fit? Request a full refund within 7 days<\/li>\r\n <li>One condition: you have completed less than 20 percent of the course<\/li>\r\n <li>Meet that, and every rupee comes back<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-faq__list{\r\n max-width:70ch;\r\n }\r\n .fjr-landing .fjr-faq__a{ padding:0 40px 22px 0; }\r\n .fjr-landing .fjr-faq__a p{\r\n margin:0;\r\n color:var(--muted-light);\r\n font-size:1rem;\r\n line-height:1.6;\r\n }\r\n .fjr-landing .fjr-faq__ul{\r\n list-style:none;\r\n margin:12px 0 0;\r\n padding:0;\r\n display:grid;\r\n gap:10px;\r\n }\r\n .fjr-landing .fjr-faq__ul li{\r\n position:relative;\r\n padding-left:22px;\r\n color:var(--muted-light);\r\n font-size:1rem;\r\n line-height:1.55;\r\n }\r\n .fjr-landing .fjr-faq__ul li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0;\r\n top:.6em;\r\n width:7px;\r\n height:7px;\r\n border-radius:2px;\r\n background:var(--accent);\r\n }\r\n \/* FAQ summaries are single-line questions, not the two-line curriculum style *\/\r\n .fjr-landing .fjr-faq summary{ flex-direction:row; }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-final\" aria-labelledby=\"fjr-final-h2\">\r\n <div class=\"fjr-container fjr-final__inner\">\r\n <p class=\"fjr-eyebrow\">\/\/ thirty days from now<\/p>\r\n <h2 id=\"fjr-final-h2\" class=\"fjr-h2 fjr-final__h2\">Where do you want to be?<\/h2>\r\n\r\n <p class=\"fjr-final__lines\">\r\n Still watching random videos with no plan? Or holding your own website, a\r\n ready resume, and the skill that gets a fresher hired in the AI age?\r\n <\/p>\r\n\r\n <p class=\"fjr-final__offer\">\r\n <strong>Frontend Job Ready: The 30 Day AI Era Blueprint<\/strong><br>\r\n Only \u20b9497. All 5 bonuses included. 25+ hours of clear training.\r\n <\/p>\r\n\r\n <div class=\"fjr-final__guarantee\">\r\n \r\n <div class=\"fjr-final__gpart\">\r\n <span class=\"fjr-final__gno\">1<\/span>\r\n <p>Don't like the content? Full refund in 7 days. No questions.<\/p>\r\n <\/div>\r\n <div class=\"fjr-final__gpart\">\r\n <span class=\"fjr-final__gno\">2<\/span>\r\n <p>Finish the course and still don't feel ready to apply? We coach you personally until you do.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <a class=\"fjr-btn fjr-final__cta\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">Start my 30 day blueprint \u2014 <span class=\"fjr-price\">\u20b9497<\/span><\/a>\r\n\r\n <p class=\"fjr-final__scarcity\">WhatsApp support is capped at [X] members. These 5 bonuses are only for the current batch.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-final__inner{\r\n text-align:center;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n }\r\n .fjr-landing .fjr-final__h2{\r\n font-size:clamp(2rem,5vw,3.4rem);\r\n max-width:18ch;\r\n }\r\n .fjr-landing .fjr-final__lines{\r\n max-width:56ch;\r\n font-size:clamp(1.05rem,2.4vw,1.3rem);\r\n color:var(--muted-dark);\r\n margin:0 0 28px;\r\n }\r\n .fjr-landing .fjr-final__offer{\r\n font-size:1.1rem;\r\n line-height:1.6;\r\n margin:0 0 32px;\r\n }\r\n .fjr-landing .fjr-final__offer strong{ color:var(--accent); }\r\n .fjr-landing .fjr-final__guarantee{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:16px;\r\n max-width:640px;\r\n width:100%;\r\n margin:0 0 36px;\r\n text-align:left;\r\n border:1px solid var(--line-dark);\r\n border-radius:14px;\r\n padding:24px;\r\n background:rgba(255,255,255,.02);\r\n }\r\n .fjr-landing .fjr-final__gpart{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:14px;\r\n }\r\n .fjr-landing .fjr-final__gno{\r\n flex:0 0 auto;\r\n width:28px; height:28px;\r\n border-radius:50%;\r\n background:var(--accent);\r\n color:var(--ink);\r\n font-weight:700;\r\n font-size:14px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n }\r\n .fjr-landing .fjr-final__gpart p{ margin:0; font-size:1rem; }\r\n .fjr-landing .fjr-final__scarcity{\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n color:var(--muted-dark);\r\n max-width:52ch;\r\n margin:22px 0 0;\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-final__guarantee{ grid-template-columns:1fr 1fr; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-notfor\" aria-labelledby=\"fjr-notfor-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ this is not for you if<\/p>\r\n <h2 id=\"fjr-notfor-h2\" class=\"fjr-h2\">This is not for you if...<\/h2>\r\n\r\n <ul class=\"fjr-notfor__list\">\r\n <li>\r\n <span class=\"fjr-notfor__x\" aria-hidden=\"true\">×<\/span>\r\n You already know HTML, CSS and JavaScript and want an advanced or full stack course.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-notfor__x\" aria-hidden=\"true\">×<\/span>\r\n You want a \"job guaranteed\" placement scheme. We don't sell that. We sell real skills.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-notfor__x\" aria-hidden=\"true\">×<\/span>\r\n You are not willing to actually build the projects.\r\n <\/li>\r\n <\/ul>\r\n\r\n <p class=\"fjr-notfor__close\">\r\n If you're still reading, this course was made for you. Join the batch before the seats fill.\r\n <\/p>\r\n\r\n <div class=\"fjr-notfor__cta\">\r\n <a class=\"fjr-btn\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">Start my 30 day blueprint \u2014 <span class=\"fjr-price\">\u20b9497<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-notfor__list{\r\n list-style:none;\r\n margin:0 0 32px;\r\n padding:0;\r\n display:grid;\r\n gap:16px;\r\n max-width:64ch;\r\n }\r\n .fjr-landing .fjr-notfor__list li{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:14px;\r\n font-size:clamp(1rem,2vw,1.12rem);\r\n line-height:1.5;\r\n }\r\n .fjr-landing .fjr-notfor__x{\r\n flex:0 0 auto;\r\n width:28px; height:28px;\r\n border-radius:50%;\r\n background:var(--paper-2);\r\n border:1px solid var(--line-light);\r\n color:var(--muted-light);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-size:18px;\r\n line-height:1;\r\n margin-top:2px;\r\n }\r\n .fjr-landing .fjr-notfor__close{\r\n font-size:clamp(1.1rem,2.4vw,1.3rem);\r\n font-weight:700;\r\n max-width:56ch;\r\n margin:0 0 32px;\r\n }\r\n .fjr-landing .fjr-notfor__cta{ text-align:left; }\r\n<\/style>\r\n\r\n \r\n <div class=\"fjr-sticky\" id=\"fjr-sticky\" aria-hidden=\"true\">\r\n <a class=\"fjr-btn\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">Start \u2014 <span class=\"fjr-price\">\u20b9497<\/span><\/a>\r\n <a class=\"fjr-cta-note\" href=\"#what-you-get\">see what you get<\/a>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script defer>\r\n(function () {\r\n var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n \/* a) VSL facade \u2014 swap poster for the real player on click *\/\r\n var vsl = document.getElementById('fjr-vsl');\r\n if (vsl) {\r\n var facade = vsl.querySelector('.fjr-vsl__facade');\r\n if (facade) {\r\n facade.addEventListener('click', function () {\r\n var v = document.createElement('video');\r\n v.setAttribute('controls', '');\r\n v.setAttribute('autoplay', '');\r\n v.setAttribute('playsinline', '');\r\n v.setAttribute('preload', 'metadata');\r\n v.setAttribute('poster', 'assets\/vsl-poster.webp');\r\n v.style.width = '100%';\r\n v.style.height = '100%';\r\n v.style.objectFit = 'cover';\r\n var s = document.createElement('source');\r\n s.src = 'assets\/vsl.mp4';\r\n s.type = 'video\/mp4';\r\n v.appendChild(s);\r\n facade.replaceWith(v);\r\n if (v.play) { v.play().catch(function(){}); }\r\n });\r\n }\r\n }\r\n\r\n \/* b) Sticky bar \u2014 show after the hero scrolls out of view (mobile\/tablet only) *\/\r\n var hero = document.querySelector('.fjr-hero');\r\n var sticky = document.getElementById('fjr-sticky');\r\n if (hero && sticky && 'IntersectionObserver' in window) {\r\n var io = new IntersectionObserver(function (entries) {\r\n if (window.innerWidth > 1024) { sticky.classList.remove('is-visible'); sticky.setAttribute('aria-hidden','true'); return; }\r\n entries.forEach(function (e) {\r\n if (e.isIntersecting) { sticky.classList.remove('is-visible'); sticky.setAttribute('aria-hidden','true'); }\r\n else { sticky.classList.add('is-visible'); sticky.setAttribute('aria-hidden','false'); }\r\n });\r\n }, { threshold: 0 });\r\n io.observe(hero);\r\n }\r\n\r\n \/* c) Smooth-scroll fallback + offset so targets aren't hidden behind fixed bars *\/\r\n document.querySelectorAll('.fjr-landing a[href^=\"#\"]').forEach(function (a) {\r\n a.addEventListener('click', function (ev) {\r\n var id = a.getAttribute('href');\r\n if (!id || id === '#') return;\r\n var target = document.querySelector(id);\r\n if (!target) return;\r\n ev.preventDefault();\r\n var top = target.getBoundingClientRect().top + window.pageYOffset - 12;\r\n window.scrollTo({ top: top, behavior: reduce ? 'auto' : 'smooth' });\r\n });\r\n });\r\n})();\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"author":1,"featured_media":0,"template":"wflp-canvas.php","meta":{"footnotes":""},"class_list":["post-25","wffn_landing","type-wffn_landing","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/wffn_landing\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/wffn_landing"}],"about":[{"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/types\/wffn_landing"}],"author":[{"embeddable":true,"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"version-history":[{"count":10,"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/wffn_landing\/25\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/wffn_landing\/25\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/webdevarmy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Frontend Job Ready: The 30 Day AI Era Blueprint<\/title>\r\n <meta name=\"description\" content=\"Become frontend job ready in 30 days \u2014 learn HTML, CSS, JavaScript and React, build 11 real projects, ship a live portfolio, and master the AI workflow recruiters expect. For freshers in India, no experience needed.\">\r\n <link rel=\"preload\" as=\"image\" href=\"assets\/vsl-poster.webp\" fetchpriority=\"high\">\r\n <style>\r\n\/* ===== design-system.css (inlined for fewer requests) ===== *\/\r\n\/* ============================================================\r\n FJR Landing \u2014 design-system.css\r\n Shared tokens + component classes. Everything scoped to .fjr-landing.\r\n Vanilla CSS only. System fonts only. No web fonts, no libraries.\r\n ============================================================ *\/\r\n\r\n\/* ---- TOKENS (locked, do not change) ---- *\/\r\n.fjr-landing{\r\n --ink:#0B0B0C;\r\n --paper:#FFFFFF;\r\n --paper-2:#F4F4F2;\r\n --accent:#FFB020;\r\n --accent-press:#E89A00;\r\n --muted-dark:#9A9AA0;\r\n --muted-light:#5A5A60;\r\n --line-dark:rgba(255,255,255,.14);\r\n --line-light:rgba(0,0,0,.12);\r\n --sans:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n --mono:ui-monospace,\"SF Mono\",SFMono-Regular,Menlo,Consolas,\"Liberation Mono\",monospace;\r\n --pad-y:clamp(64px,10vw,120px);\r\n --container:1120px;\r\n --radius:10px;\r\n}\r\n\r\n\/* 1. Scoped reset + base *\/\r\n.fjr-landing *,\r\n.fjr-landing *::before,\r\n.fjr-landing *::after{ box-sizing:border-box; }\r\n\r\n.fjr-landing{\r\n font-family:var(--sans);\r\n line-height:1.6;\r\n -webkit-font-smoothing:antialiased;\r\n text-rendering:optimizeLegibility;\r\n scroll-behavior:smooth;\r\n}\r\n\r\n.fjr-landing img{ max-width:100%; display:block; }\r\n\r\n.fjr-landing a{ color:inherit; }\r\n\r\n\/* 2. Container *\/\r\n.fjr-container{\r\n width:100%;\r\n max-width:var(--container);\r\n margin-inline:auto;\r\n padding-inline:clamp(20px,5vw,40px);\r\n}\r\n\r\n\/* 3. Sections + light\/dark modifiers *\/\r\n.fjr-section{\r\n padding-block:var(--pad-y);\r\n position:relative;\r\n content-visibility:auto;\r\n contain-intrinsic-size:1px 800px;\r\n}\r\n.fjr-dark{ background:var(--ink); color:var(--paper); }\r\n.fjr-light{ background:var(--paper); color:var(--ink); }\r\n\r\n\/* Hero is above the fold \u2014 never lazy-render it *\/\r\n.fjr-hero{\r\n content-visibility:visible;\r\n contain-intrinsic-size:auto;\r\n}\r\n\r\n\/* 4. Eyebrow (signature mono code-comment label + blinking caret) *\/\r\n.fjr-eyebrow{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n letter-spacing:.02em;\r\n color:var(--accent);\r\n margin:0 0 20px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n}\r\n.fjr-eyebrow .caret{\r\n display:inline-block;\r\n width:8px;\r\n height:1em;\r\n background:var(--accent);\r\n animation:fjr-blink 1.1s steps(1) infinite;\r\n}\r\n@keyframes fjr-blink{ 50%{ opacity:0; } }\r\n\r\n\/* 5. Primary button *\/\r\n.fjr-btn{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:10px;\r\n min-height:44px;\r\n padding:18px 28px;\r\n background:var(--accent);\r\n color:var(--ink);\r\n font-family:var(--sans);\r\n font-size:17px;\r\n font-weight:700;\r\n line-height:1.1;\r\n text-decoration:none;\r\n border:0;\r\n border-radius:var(--radius);\r\n cursor:pointer;\r\n transition:background .18s ease, transform .18s ease;\r\n}\r\n.fjr-btn:hover{\r\n background:var(--accent-press);\r\n transform:translateY(-2px);\r\n}\r\n.fjr-btn:focus-visible{\r\n outline:3px solid var(--accent);\r\n outline-offset:3px;\r\n}\r\n.fjr-btn .fjr-price{ font-family:var(--mono); font-weight:700; }\r\n\r\n\/* 5b. CTA note (small secondary link under a CTA) *\/\r\n.fjr-cta-note{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n min-height:44px;\r\n margin-top:12px;\r\n font-size:14px;\r\n color:var(--muted-dark);\r\n text-decoration:none;\r\n}\r\n.fjr-light .fjr-cta-note{ color:var(--muted-light); }\r\n.fjr-cta-note:hover{ text-decoration:underline; }\r\n.fjr-cta-note:focus-visible{\r\n outline:2px solid var(--accent);\r\n outline-offset:3px;\r\n border-radius:6px;\r\n}\r\n\r\n\/* 6. Heading + muted helpers *\/\r\n.fjr-h2{\r\n font-size:clamp(1.7rem,3.6vw,2.6rem);\r\n line-height:1.1;\r\n letter-spacing:-.02em;\r\n font-weight:800;\r\n margin:0 0 20px;\r\n}\r\n.fjr-muted-d{ color:var(--muted-dark); }\r\n.fjr-muted-l{ color:var(--muted-light); }\r\n\r\n\/* 7. Sticky mobile CTA bar *\/\r\n.fjr-sticky{\r\n position:fixed;\r\n left:0;\r\n right:0;\r\n bottom:0;\r\n z-index:60;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:14px;\r\n flex-wrap:wrap;\r\n padding:12px clamp(16px,4vw,24px);\r\n padding-bottom:max(12px,env(safe-area-inset-bottom));\r\n background:var(--ink);\r\n border-top:1px solid var(--line-dark);\r\n transform:translateY(110%);\r\n transition:transform .28s ease;\r\n}\r\n.fjr-sticky.is-visible{ transform:translateY(0); }\r\n.fjr-sticky .fjr-btn{ padding:12px 22px; font-size:15px; }\r\n.fjr-sticky .fjr-cta-note{ margin-top:0; color:var(--muted-dark); }\r\n@media (min-width:1025px){\r\n .fjr-sticky{ display:none; }\r\n}\r\n\r\n\/* 8. Accordion (<details>\/<summary>) styling *\/\r\n.fjr-landing details{\r\n border-top:1px solid var(--line-dark);\r\n}\r\n.fjr-light details{ border-top-color:var(--line-light); }\r\n.fjr-landing details:last-of-type{\r\n border-bottom:1px solid var(--line-dark);\r\n}\r\n.fjr-light details:last-of-type{ border-bottom-color:var(--line-light); }\r\n\r\n.fjr-landing summary{\r\n list-style:none;\r\n cursor:pointer;\r\n padding:20px 40px 20px 0;\r\n position:relative;\r\n font-weight:700;\r\n display:flex;\r\n flex-direction:column;\r\n gap:4px;\r\n}\r\n.fjr-landing summary::-webkit-details-marker{ display:none; }\r\n.fjr-landing summary::after{\r\n content:\"+\";\r\n position:absolute;\r\n right:2px;\r\n top:18px;\r\n font-family:var(--mono);\r\n font-size:22px;\r\n line-height:1;\r\n color:var(--accent);\r\n transition:transform .2s ease;\r\n}\r\n.fjr-landing details[open] summary::after{ content:\"\\2013\"; }\r\n.fjr-landing summary:focus-visible{\r\n outline:2px solid var(--accent);\r\n outline-offset:3px;\r\n border-radius:6px;\r\n}\r\n\r\n\/* 9. Global niceties *\/\r\n@media (prefers-reduced-motion:reduce){\r\n .fjr-landing *{\r\n animation:none !important;\r\n transition:none !important;\r\n }\r\n .fjr-landing{ scroll-behavior:auto; }\r\n}\r\n\r\n\/* ===== 09b \u00b7 GUARANTEE (trust band) \u2014 merged from sections\/09b-guarantee.html ===== *\/\r\n.fjr-landing .fjr-guarantee{\r\n border-top:1px solid var(--accent);\r\n border-bottom:1px solid var(--accent);\r\n}\r\n.fjr-landing .fjr-guarantee__card{\r\n max-width:840px;\r\n margin-inline:auto;\r\n text-align:center;\r\n border:1px solid rgba(255,176,32,.32);\r\n border-radius:var(--radius);\r\n padding:clamp(28px,5vw,52px) clamp(20px,4vw,48px);\r\n background:rgba(255,176,32,.03);\r\n}\r\n.fjr-landing .fjr-guarantee .fjr-eyebrow{ justify-content:center; }\r\n.fjr-landing .fjr-guarantee__h2{\r\n max-width:20ch;\r\n margin-inline:auto;\r\n margin-bottom:36px;\r\n}\r\n.fjr-landing .fjr-guarantee__promises{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:24px;\r\n text-align:left;\r\n margin-bottom:32px;\r\n}\r\n.fjr-landing .fjr-guarantee__promise{\r\n padding:22px;\r\n border:1px solid var(--line-dark);\r\n border-radius:var(--radius);\r\n background:rgba(255,255,255,.02);\r\n}\r\n.fjr-landing .fjr-guarantee__ptitle{\r\n font-size:1.1rem;\r\n font-weight:800;\r\n line-height:1.25;\r\n margin:0 0 10px;\r\n}\r\n.fjr-landing .fjr-guarantee__promise p{\r\n margin:0;\r\n color:var(--muted-dark);\r\n font-size:1rem;\r\n line-height:1.55;\r\n}\r\n.fjr-landing .fjr-guarantee__list{\r\n list-style:none;\r\n margin:0;\r\n padding:0;\r\n display:grid;\r\n gap:12px;\r\n}\r\n.fjr-landing .fjr-guarantee__list li{\r\n position:relative;\r\n padding-left:24px;\r\n color:var(--muted-dark);\r\n font-size:1rem;\r\n line-height:1.55;\r\n}\r\n.fjr-landing .fjr-guarantee__list li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0;\r\n top:.6em;\r\n width:8px;\r\n height:8px;\r\n border-radius:2px;\r\n background:var(--accent);\r\n}\r\n.fjr-landing .fjr-guarantee__note{\r\n max-width:60ch;\r\n margin:0 auto 32px;\r\n font-size:.95rem;\r\n line-height:1.55;\r\n}\r\n.fjr-landing .fjr-guarantee__seal{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:12px;\r\n padding:12px 20px;\r\n border:1px solid rgba(255,176,32,.4);\r\n border-radius:999px;\r\n background:rgba(255,176,32,.06);\r\n}\r\n.fjr-landing .fjr-guarantee__shield{\r\n display:inline-flex;\r\n color:var(--accent);\r\n}\r\n.fjr-landing .fjr-guarantee__sealtext{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n letter-spacing:.01em;\r\n color:var(--paper);\r\n}\r\n@media (min-width:768px){\r\n .fjr-landing .fjr-guarantee__promises{ grid-template-columns:1fr 1fr; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"fjr-landing\">\r\n\r\n\r\n<section class=\"fjr-topbar\" aria-label=\"Batch availability\">\r\n <p class=\"fjr-topbar__text\">\r\n <span class=\"fjr-topbar__icon\" aria-hidden=\"true\">◆<\/span>\r\n Only <span class=\"fjr-topbar__num\">97<\/span> seats left in this batch\r\n <span class=\"fjr-topbar__dot\" aria-hidden=\"true\">·<\/span>\r\n Doubt support closes when the batch is full\r\n <\/p>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-topbar{\r\n background:var(--ink);\r\n color:var(--paper);\r\n padding:11px clamp(16px,4vw,24px);\r\n text-align:center;\r\n }\r\n .fjr-landing .fjr-topbar__text{\r\n margin:0;\r\n font-size:clamp(12.5px,2.6vw,14px);\r\n line-height:1.5;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n flex-wrap:wrap;\r\n gap:8px;\r\n }\r\n .fjr-landing .fjr-topbar__icon{ color:var(--accent); font-size:.85em; }\r\n .fjr-landing .fjr-topbar__num{\r\n font-family:var(--mono);\r\n font-weight:700;\r\n color:var(--accent);\r\n }\r\n .fjr-landing .fjr-topbar__dot{ color:var(--muted-dark); }\r\n @media (max-width:479px){\r\n .fjr-landing .fjr-topbar__dot{ display:none; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-hero\" aria-labelledby=\"fjr-hero-h1\">\r\n <div class=\"fjr-hero__glow\" aria-hidden=\"true\"><\/div>\r\n <div class=\"fjr-container fjr-hero__inner\">\r\n\r\n <p class=\"fjr-eyebrow\">\r\n \/\/ for students & freshers in India \u2014 no experience needed\r\n <span class=\"caret\" aria-hidden=\"true\"><\/span>\r\n <\/p>\r\n\r\n <h1 id=\"fjr-hero-h1\" class=\"fjr-hero__h1\">\r\n Become frontend job ready in 30 days by learning\r\n <span class=\"mark\">what AI can't do<\/span>,\r\n and how to make AI do the rest.\r\n <\/h1>\r\n\r\n <p class=\"fjr-hero__sub fjr-muted-d\">\r\n This course takes zero experience freshers to job ready in 30 days \u2014 the\r\n frontend skills AI can't replace and the AI workflow recruiters expect,\r\n with coaching until you feel ready to apply.\r\n <\/p>\r\n\r\n \r\n <div class=\"fjr-vsl\" id=\"fjr-vsl\">\r\n <button class=\"fjr-vsl__facade\" type=\"button\" aria-label=\"Play the video \u2014 about 10 minutes\">\r\n <img fetchpriority=\"high\" class=\"fjr-vsl__poster\"\r\n src=\"assets\/vsl-poster.webp\"\r\n alt=\"Preview of the course video\"\r\n width=\"1280\" height=\"720\"\r\n fetchpriority=\"high\" decoding=\"async\">\r\n <span class=\"fjr-vsl__play\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"34\" height=\"34\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path d=\"M8 5v14l11-7z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"fjr-vsl__tag\" aria-hidden=\"true\">▶ watch \u2014 10 min<\/span>\r\n <\/button>\r\n \r\n <\/div>\r\n\r\n <a class=\"fjr-btn fjr-hero__cta\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">\r\n Start my 30 day blueprint \u2014\r\n <span class=\"fjr-price\">\u20b9497<\/span>\r\n <\/a>\r\n\r\n <div>\r\n <a class=\"fjr-cta-note\" href=\"#what-you-get\">or see what you get \u2193<\/a>\r\n <\/div>\r\n\r\n <p class=\"fjr-hero__trust\">7 day refund · WhatsApp help included · batch closes when full<\/p>\r\n\r\n <ul class=\"fjr-hero__stats\" aria-label=\"What's inside\">\r\n <li><span class=\"fjr-hero__diamond\" aria-hidden=\"true\">◆<\/span>11 real projects<\/li>\r\n <li><span class=\"fjr-hero__diamond\" aria-hidden=\"true\">◆<\/span>25+ hours<\/li>\r\n <li><span class=\"fjr-hero__diamond\" aria-hidden=\"true\">◆<\/span>live portfolio you deploy<\/li>\r\n <li><span class=\"fjr-hero__diamond\" aria-hidden=\"true\">◆<\/span>AI workflow included<\/li>\r\n <\/ul>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-hero{ overflow:hidden; }\r\n .fjr-landing .fjr-hero__glow{\r\n position:absolute;\r\n top:-10%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:min(900px,120vw);\r\n height:600px;\r\n background:radial-gradient(50% 50% at 50% 50%, rgba(255,176,32,.14), transparent 70%);\r\n pointer-events:none;\r\n z-index:0;\r\n }\r\n .fjr-landing .fjr-hero__inner{\r\n position:relative;\r\n z-index:1;\r\n text-align:center;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n }\r\n .fjr-landing .fjr-hero__h1{\r\n max-width:16ch;\r\n font-size:clamp(2rem,5.4vw,4rem);\r\n font-weight:800;\r\n line-height:1.05;\r\n letter-spacing:-.02em;\r\n margin:0 0 22px;\r\n }\r\n .fjr-landing .fjr-hero__h1 .mark{\r\n color:var(--accent);\r\n box-shadow:inset 0 -.14em 0 rgba(255,176,32,.28);\r\n }\r\n .fjr-landing .fjr-hero__sub{\r\n max-width:56ch;\r\n font-size:clamp(1rem,2.2vw,1.2rem);\r\n margin:0 0 34px;\r\n }\r\n .fjr-landing .fjr-vsl{\r\n width:100%;\r\n max-width:760px;\r\n aspect-ratio:16\/9;\r\n border-radius:14px;\r\n border:1px solid var(--line-dark);\r\n box-shadow:0 30px 80px rgba(0,0,0,.45);\r\n overflow:hidden;\r\n margin:0 0 32px;\r\n background:#000;\r\n }\r\n .fjr-landing .fjr-vsl__facade{\r\n position:relative;\r\n display:block;\r\n width:100%;\r\n height:100%;\r\n padding:0;\r\n border:0;\r\n cursor:pointer;\r\n background:#000;\r\n }\r\n .fjr-landing .fjr-vsl__poster{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n opacity:.85;\r\n }\r\n .fjr-landing .fjr-vsl__play{\r\n position:absolute;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n width:76px;\r\n height:76px;\r\n border-radius:50%;\r\n background:var(--accent);\r\n color:var(--ink);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n box-shadow:0 10px 30px rgba(0,0,0,.4);\r\n transition:transform .2s ease;\r\n }\r\n .fjr-landing .fjr-vsl__facade:hover .fjr-vsl__play{ transform:translate(-50%,-50%) scale(1.06); }\r\n .fjr-landing .fjr-vsl__facade:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }\r\n .fjr-landing .fjr-vsl__tag{\r\n position:absolute;\r\n left:14px;\r\n bottom:14px;\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n color:var(--paper);\r\n background:rgba(0,0,0,.55);\r\n padding:5px 10px;\r\n border-radius:6px;\r\n }\r\n .fjr-landing .fjr-hero__cta{ margin-bottom:0; }\r\n .fjr-landing .fjr-hero__trust{\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n color:var(--muted-dark);\r\n margin:22px 0 34px;\r\n }\r\n .fjr-landing .fjr-hero__stats{\r\n list-style:none;\r\n margin:0;\r\n padding:24px 0 0;\r\n border-top:1px solid var(--line-dark);\r\n width:100%;\r\n max-width:760px;\r\n display:flex;\r\n justify-content:center;\r\n flex-wrap:wrap;\r\n gap:10px 0;\r\n font-family:var(--mono);\r\n font-size:13px;\r\n color:var(--muted-dark);\r\n }\r\n .fjr-landing .fjr-hero__stats li{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:0 clamp(12px,3vw,22px);\r\n }\r\n .fjr-landing .fjr-hero__diamond{ color:var(--accent); font-size:.8em; }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-hero__stats li + li{ border-left:1px solid var(--line-dark); }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-problem\" aria-labelledby=\"fjr-problem-h2\">\r\n <div class=\"fjr-container fjr-problem__grid\">\r\n <div class=\"fjr-problem__copy\">\r\n <p class=\"fjr-eyebrow\">\/\/ does this sound like you?<\/p>\r\n <h2 id=\"fjr-problem-h2\" class=\"fjr-h2\">You are stuck, and it is not your fault.<\/h2>\r\n\r\n <ul class=\"fjr-problem__list\">\r\n <li>You fill job forms. Nobody replies.<\/li>\r\n <li>Every job wants experience. But how do you get experience without a job?<\/li>\r\n <li>You started many free videos. You finished none.<\/li>\r\n <li>Big courses cost \u20b920,000 to \u20b950,000. Too much money, too much time.<\/li>\r\n <li>You get stuck on one small error, with nobody to ask. So you stop.<\/li>\r\n <\/ul>\r\n\r\n <p class=\"fjr-problem__emph\">\r\n And now there is one more worry. Everyone says AI will do all the coding.\r\n So a voice asks, <em>why even learn this?<\/em> So you wait. And the more you\r\n wait, the more it feels like everyone is moving ahead, and you are stuck.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"fjr-problem__media\" aria-hidden=\"true\">\r\n <img loading=\"lazy\" src=\"https:\/\/webdevarmy.com\/wp-content\/uploads\/2026\/08\/prc.webp\"\r\n alt=\"\"\r\n width=\"520\" height=\"480\"\r\n loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-problem__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:clamp(28px,5vw,56px);\r\n align-items:center;\r\n }\r\n .fjr-landing .fjr-problem__copy{ max-width:62ch; }\r\n .fjr-landing .fjr-problem__list{\r\n list-style:none;\r\n margin:0 0 28px;\r\n padding:0;\r\n display:grid;\r\n gap:14px;\r\n }\r\n .fjr-landing .fjr-problem__list li{\r\n position:relative;\r\n padding-left:26px;\r\n font-size:clamp(1rem,2vw,1.12rem);\r\n }\r\n .fjr-landing .fjr-problem__list li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0;\r\n top:.62em;\r\n width:9px;\r\n height:9px;\r\n border-radius:2px;\r\n background:var(--accent);\r\n }\r\n .fjr-landing .fjr-problem__emph{\r\n font-size:clamp(1.05rem,2.2vw,1.25rem);\r\n font-weight:600;\r\n line-height:1.55;\r\n padding-left:18px;\r\n border-left:3px solid var(--accent);\r\n }\r\n .fjr-landing .fjr-problem__emph em{ font-style:italic; color:var(--muted-light); }\r\n .fjr-landing .fjr-problem__media{\r\n display:none;\r\n }\r\n .fjr-landing .fjr-problem__media img{\r\n width:100%;\r\n height:auto;\r\n border-radius:var(--radius);\r\n border:1px solid var(--line-light);\r\n }\r\n @media (min-width:1024px){\r\n .fjr-landing .fjr-problem__grid{ grid-template-columns:1.3fr .9fr; }\r\n .fjr-landing .fjr-problem__media{ display:block; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-proof\" aria-labelledby=\"fjr-proof-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ the truth about AI and coding jobs<\/p>\r\n <h2 id=\"fjr-proof-h2\" class=\"fjr-h2\">Coding jobs aren't dead. They changed.<\/h2>\r\n\r\n <p class=\"fjr-proof__lead fjr-muted-d\">\r\n AI is a fast helper. But it makes mistakes, and it doesn't know when it's\r\n wrong. So companies need someone to check it \u2014 someone who can read the\r\n code, catch the mistake, and fix it.\r\n <\/p>\r\n\r\n <p class=\"fjr-proof__emph\">\r\n <span class=\"hl\">AI can't replace that person. It needs that person.<\/span>\r\n This course makes you that person.\r\n <\/p>\r\n\r\n <div class=\"fjr-proof__grid\">\r\n \r\n <article class=\"fjr-proof__card\">\r\n <div class=\"fjr-proof__shot\">\r\n <img loading=\"lazy\" src=\"https:\/\/webdevarmy.com\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-20-205747.webp\"\r\n alt=\"U.S. Bureau of Labor Statistics job outlook box showing 15% growth, much faster than average\"\r\n width=\"480\" height=\"300\" loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n <p class=\"fjr-proof__caption\">Software jobs will grow about 15% by 2034. Growing, not shrinking.<\/p>\r\n <a class=\"fjr-proof__src\" href=\"https:\/\/www.bls.gov\/ooh\/computer-and-information-technology\/software-developers.htm\" target=\"_blank\" rel=\"noopener noreferrer\">U.S. Bureau of Labor Statistics \u2197<\/a>\r\n <\/article>\r\n\r\n \r\n <article class=\"fjr-proof__card\">\r\n <div class=\"fjr-proof__shot\">\r\n <img loading=\"lazy\" src=\"https:\/\/webdevarmy.com\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-20-205857.webp\"\r\n alt=\"Article line showing India is second at 11.2 percent with 688 frontend job postings\"\r\n width=\"480\" height=\"300\" loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n <p class=\"fjr-proof__caption\">India ranks number 2 in the world for frontend jobs.<\/p>\r\n <a class=\"fjr-proof__src\" href=\"https:\/\/www.interviewstack.io\/blog\/frontend-developer-skills-companies-want-2026\" target=\"_blank\" rel=\"noopener noreferrer\">InterviewStack, 2026 \u2197<\/a>\r\n <\/article>\r\n\r\n \r\n <article class=\"fjr-proof__card fjr-proof__card--stat\">\r\n <div class=\"fjr-proof__bignum\">85%<\/div>\r\n <p class=\"fjr-proof__caption\">of developers use AI regularly. Frontend is the 2nd highest adopter.<\/p>\r\n <a class=\"fjr-proof__src\" href=\"https:\/\/devecosystem-2025.jetbrains.com\/artificial-intelligence\" target=\"_blank\" rel=\"noopener noreferrer\">JetBrains State of Developer Ecosystem 2025 \u2197<\/a>\r\n <\/article>\r\n <\/div>\r\n\r\n <p class=\"fjr-proof__honest fjr-muted-d\">\r\n The honest part: the easy jobs are fewer now. Companies don't want a copied\r\n project. They want someone who can think. That's why this course is\r\n different. We don't teach you to copy. We teach you to build, check, and\r\n fix \u2014 the skill that gets a fresher hired in the AI age.\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-proof__lead{\r\n max-width:62ch;\r\n font-size:clamp(1.05rem,2.2vw,1.25rem);\r\n margin:0 0 24px;\r\n }\r\n .fjr-landing .fjr-proof__emph{\r\n max-width:60ch;\r\n font-size:clamp(1.15rem,2.6vw,1.5rem);\r\n font-weight:700;\r\n line-height:1.35;\r\n margin:0 0 44px;\r\n }\r\n .fjr-landing .fjr-proof__emph .hl{ color:var(--accent); }\r\n .fjr-landing .fjr-proof__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n margin-bottom:40px;\r\n }\r\n .fjr-landing .fjr-proof__card{\r\n border:1px solid var(--line-dark);\r\n border-radius:var(--radius);\r\n padding:20px;\r\n background:rgba(255,255,255,.02);\r\n transition:transform .2s ease, border-color .2s ease;\r\n display:flex;\r\n flex-direction:column;\r\n gap:14px;\r\n }\r\n .fjr-landing .fjr-proof__card:hover{\r\n transform:translateY(-4px);\r\n border-color:rgba(255,176,32,.4);\r\n }\r\n .fjr-landing .fjr-proof__shot{\r\n aspect-ratio:16\/10;\r\n border-radius:8px;\r\n overflow:hidden;\r\n border:1px solid var(--line-dark);\r\n background:#111;\r\n }\r\n .fjr-landing .fjr-proof__shot img{ width:100%; height:100%; object-fit:cover; }\r\n .fjr-landing .fjr-proof__card--stat{\r\n justify-content:center;\r\n align-items:flex-start;\r\n text-align:left;\r\n }\r\n .fjr-landing .fjr-proof__bignum{\r\n font-size:clamp(3.4rem,10vw,5rem);\r\n font-weight:800;\r\n line-height:1;\r\n letter-spacing:-.03em;\r\n color:var(--accent);\r\n }\r\n .fjr-landing .fjr-proof__caption{\r\n margin:0;\r\n font-size:1.05rem;\r\n font-weight:600;\r\n line-height:1.4;\r\n }\r\n .fjr-landing .fjr-proof__src{\r\n font-family:var(--mono);\r\n font-size:12px;\r\n color:var(--muted-dark);\r\n text-decoration:none;\r\n margin-top:auto;\r\n }\r\n .fjr-landing .fjr-proof__src:hover{ color:var(--accent); text-decoration:underline; }\r\n .fjr-landing .fjr-proof__honest{\r\n max-width:64ch;\r\n font-size:1.05rem;\r\n }\r\n @media (min-width:1024px){\r\n .fjr-landing .fjr-proof__grid{ grid-template-columns:repeat(3,1fr); }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-foryou\" aria-labelledby=\"fjr-foryou-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ this is for you if<\/p>\r\n <h2 id=\"fjr-foryou-h2\" class=\"fjr-h2\">This is for you if...<\/h2>\r\n\r\n <ul class=\"fjr-foryou__list\">\r\n <li>\r\n <span class=\"fjr-foryou__check\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/span>\r\n You are a student or fresher with little or no coding. Good \u2014 we start from zero.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-foryou__check\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/span>\r\n You want one clear path, not 50 random free videos.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-foryou__check\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/span>\r\n You can give about 50 minutes a day for 30 days.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-foryou__check\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\r\n <\/span>\r\n You are ready to actually build, not just watch.\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-foryou__list{\r\n list-style:none;\r\n margin:0;\r\n padding:0;\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:18px 40px;\r\n max-width:900px;\r\n }\r\n .fjr-landing .fjr-foryou__list li{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:14px;\r\n font-size:clamp(1rem,2vw,1.15rem);\r\n line-height:1.5;\r\n }\r\n .fjr-landing .fjr-foryou__check{\r\n flex:0 0 auto;\r\n width:30px;\r\n height:30px;\r\n border-radius:50%;\r\n background:rgba(255,176,32,.16);\r\n color:var(--accent-press);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n margin-top:2px;\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-foryou__list{ grid-template-columns:1fr 1fr; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-course\" id=\"what-you-get\" aria-labelledby=\"fjr-course-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ what this course is<\/p>\r\n <h2 id=\"fjr-course-h2\" class=\"fjr-h2\">One course. One clear path to your first job.<\/h2>\r\n <p class=\"fjr-course__intro fjr-muted-d\">\r\n Your problem is simple: you want a job, but you don't know the right path.\r\n This course is that path. Start at zero. Finish job ready in 30 days.\r\n <\/p>\r\n\r\n <div class=\"fjr-course__grid\">\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">01<\/span>\r\n <h3 class=\"fjr-course__title\">Full Video Course: HTML, CSS, JavaScript and React\r\n <a class=\"fjr-course__inline\" href=\"#curriculum\">(see curriculum \u2193)<\/a>\r\n <\/h3>\r\n <p>Learn from zero. Not just how to write code, but how to think and fix it, the way real developers do with AI.<\/p>\r\n <\/article>\r\n\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">02<\/span>\r\n <h3 class=\"fjr-course__title\">11 Real Projects You Build<\/h3>\r\n <p>You don't just watch. You build real apps, then learn why they work and how to fix them when they break.<\/p>\r\n <\/article>\r\n\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">03<\/span>\r\n <h3 class=\"fjr-course__title\">Your Live Portfolio Website + Setup Guide<\/h3>\r\n <p>Finish with a real website online, at your own web address. Ready for your resume the same day.<\/p>\r\n <\/article>\r\n\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">04<\/span>\r\n <h3 class=\"fjr-course__title\">WhatsApp Doubt Support<\/h3>\r\n <p>Stuck on a bug? Ask and get help. You never sit alone.<\/p>\r\n <\/article>\r\n\r\n <article class=\"fjr-course__item\">\r\n <span class=\"fjr-course__idx\">05<\/span>\r\n <h3 class=\"fjr-course__title\">Certificate of Completion<\/h3>\r\n <p>Proof you finished, to show employers.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-course__intro{\r\n max-width:60ch;\r\n font-size:clamp(1.05rem,2.2vw,1.2rem);\r\n margin:0 0 44px;\r\n }\r\n .fjr-landing .fjr-course__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:2px;\r\n background:var(--line-dark);\r\n border:1px solid var(--line-dark);\r\n border-radius:var(--radius);\r\n overflow:hidden;\r\n }\r\n .fjr-landing .fjr-course__item{\r\n background:var(--ink);\r\n padding:26px clamp(20px,3vw,30px);\r\n }\r\n .fjr-landing .fjr-course__idx{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n color:var(--accent);\r\n display:block;\r\n margin-bottom:12px;\r\n }\r\n .fjr-landing .fjr-course__title{\r\n font-size:1.15rem;\r\n font-weight:700;\r\n line-height:1.3;\r\n margin:0 0 8px;\r\n }\r\n .fjr-landing .fjr-course__inline{\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n font-weight:400;\r\n color:var(--accent);\r\n text-decoration:none;\r\n white-space:nowrap;\r\n }\r\n .fjr-landing .fjr-course__inline:hover{ text-decoration:underline; }\r\n .fjr-landing .fjr-course__item p{\r\n margin:0;\r\n color:var(--muted-dark);\r\n font-size:1rem;\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-course__grid{ grid-template-columns:1fr 1fr; }\r\n }\r\n @media (min-width:1024px){\r\n .fjr-landing .fjr-course__grid{ grid-template-columns:repeat(3,1fr); }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-bonuses\" aria-labelledby=\"fjr-bonuses-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ free bonuses \u2014 only with this batch<\/p>\r\n <h2 id=\"fjr-bonuses-h2\" class=\"fjr-h2 fjr-bonuses__h2\">\r\n Oh wait! Did we tell you? You also get these bonuses worth\r\n <span class=\"fjr-bonuses__hl\">\u20b96,995<\/span>, absolutely free.\r\n <\/h2>\r\n\r\n <div class=\"fjr-bonuses__grid\">\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b91,499<\/span>\r\n <h3 class=\"fjr-bonus__name\">AI Assisted Coding Toolkit<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: your guide to using AI the smart way, so you look skilled, not replaceable.<\/p>\r\n <ul>\r\n <li>What to learn yourself, and what to safely let AI do<\/li>\r\n <li>How to check and fix the code AI writes<\/li>\r\n <li>The right order to learn things, so you never feel lost<\/li>\r\n <\/ul>\r\n <\/article>\r\n\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b91,499<\/span>\r\n <h3 class=\"fjr-bonus__name\">Fresher Resume + LinkedIn Kit<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: a ready resume and profile, made for a fresher with no experience.<\/p>\r\n <ul>\r\n <li>A clean resume template built the way company computers like<\/li>\r\n <li>The right words to turn your projects into real experience<\/li>\r\n <li>A LinkedIn checklist so recruiters can find you<\/li>\r\n <\/ul>\r\n <\/article>\r\n\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b91,499<\/span>\r\n <h3 class=\"fjr-bonus__name\">48 Hour Interview Crash Sheet<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: the real questions junior interviews ask, with simple answers.<\/p>\r\n <ul>\r\n <li>Top HTML, CSS, and JavaScript questions, answered<\/li>\r\n <li>Small live coding tasks they give you, solved step by step<\/li>\r\n <li>What to say when you don't know an answer<\/li>\r\n <\/ul>\r\n <\/article>\r\n\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b9999<\/span>\r\n <h3 class=\"fjr-bonus__name\">30 Day Job Ready Roadmap<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: your day by day plan, so you never guess what to do next.<\/p>\r\n <ul>\r\n <li>Exactly what to learn each day<\/li>\r\n <li>About 50 minutes a day<\/li>\r\n <li>A clear finish line in 30 days<\/li>\r\n <\/ul>\r\n <\/article>\r\n\r\n <article class=\"fjr-bonus\">\r\n <span class=\"fjr-bonus__gift\" aria-hidden=\"true\">🎁<\/span>\r\n <span class=\"fjr-bonus__price\">\u20b91,499<\/span>\r\n <h3 class=\"fjr-bonus__name\">How to Use AI (ChatGPT \/ v0) to Write Frontend Code 10x Faster<\/h3>\r\n <p class=\"fjr-bonus__what\">What it is: a hands on guide to building real screens fast with AI tools.<\/p>\r\n <ul>\r\n <li>Turn a plain description into working code with ChatGPT and v0<\/li>\r\n <li>Prompts that give you clean, usable frontend code<\/li>\r\n <li>How to fix the mistakes these tools make, so it actually works<\/li>\r\n <\/ul>\r\n <\/article>\r\n <\/div>\r\n\r\n <p class=\"fjr-bonuses__footer\">All 5 free with this batch. Worth <span>\u20b96,995<\/span>.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-bonuses__h2{ max-width:22ch; }\r\n .fjr-landing .fjr-bonuses__hl{ color:var(--accent-press); }\r\n .fjr-landing .fjr-bonuses__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n margin:36px 0 32px;\r\n }\r\n .fjr-landing .fjr-bonus{\r\n position:relative;\r\n background:var(--paper);\r\n border:1px solid var(--line-light);\r\n border-radius:var(--radius);\r\n padding:24px 22px 22px;\r\n box-shadow:0 1px 0 rgba(0,0,0,.03);\r\n overflow:hidden;\r\n }\r\n .fjr-landing .fjr-bonus::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0; left:0;\r\n width:100%; height:4px;\r\n background:linear-gradient(90deg,var(--accent),var(--accent-press));\r\n }\r\n .fjr-landing .fjr-bonus__gift{\r\n font-size:24px;\r\n display:block;\r\n margin-bottom:10px;\r\n }\r\n .fjr-landing .fjr-bonus__price{\r\n position:absolute;\r\n top:20px; right:18px;\r\n font-family:var(--mono);\r\n font-size:13px;\r\n font-weight:700;\r\n color:var(--accent-press);\r\n background:rgba(255,176,32,.14);\r\n padding:4px 10px;\r\n border-radius:999px;\r\n }\r\n .fjr-landing .fjr-bonus__name{\r\n font-size:1.12rem;\r\n font-weight:800;\r\n line-height:1.25;\r\n margin:0 0 10px;\r\n max-width:26ch;\r\n }\r\n .fjr-landing .fjr-bonus__what{\r\n margin:0 0 12px;\r\n font-size:.96rem;\r\n color:var(--muted-light);\r\n }\r\n .fjr-landing .fjr-bonus ul{\r\n margin:0;\r\n padding:0;\r\n list-style:none;\r\n display:grid;\r\n gap:8px;\r\n }\r\n .fjr-landing .fjr-bonus ul li{\r\n position:relative;\r\n padding-left:20px;\r\n font-size:.95rem;\r\n }\r\n .fjr-landing .fjr-bonus ul li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0; top:.55em;\r\n width:7px; height:7px;\r\n border-radius:2px;\r\n background:var(--accent);\r\n }\r\n .fjr-landing .fjr-bonuses__footer{\r\n text-align:center;\r\n font-size:clamp(1.1rem,2.4vw,1.35rem);\r\n font-weight:800;\r\n margin:0;\r\n }\r\n .fjr-landing .fjr-bonuses__footer span{ color:var(--accent-press); }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-bonuses__grid{ grid-template-columns:1fr 1fr; }\r\n }\r\n @media (min-width:1024px){\r\n .fjr-landing .fjr-bonuses__grid{ grid-template-columns:repeat(3,1fr); }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-curr\" id=\"curriculum\" aria-labelledby=\"fjr-curr-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ what you will learn<\/p>\r\n <h2 id=\"fjr-curr-h2\" class=\"fjr-h2\">The full path, from zero to job ready.<\/h2>\r\n <p class=\"fjr-curr__intro fjr-muted-d\">\r\n You start knowing nothing. Step by step, you learn to build real websites and apps.\r\n <\/p>\r\n\r\n <div class=\"fjr-curr__accordions\">\r\n <details>\r\n <summary>\r\n <span class=\"fjr-curr__sumtop\"><span class=\"fjr-curr__no\">01<\/span> Part 1: HTML \u2014 build the page<\/span>\r\n <span class=\"fjr-curr__line fjr-muted-d\">The bones of every website.<\/span>\r\n <\/summary>\r\n <div class=\"fjr-curr__body\">\r\n <ul>\r\n <li>HTML fundamentals: intro, document structure, elements<\/li>\r\n <li>Content and elements: images, comments, line breaks, links, lists, tables<\/li>\r\n <li>Forms<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n <span class=\"fjr-curr__sumtop\"><span class=\"fjr-curr__no\">02<\/span> Part 2: CSS \u2014 make it look good<\/span>\r\n <span class=\"fjr-curr__line fjr-muted-d\">Make it beautiful and work on every screen.<\/span>\r\n <\/summary>\r\n <div class=\"fjr-curr__body\">\r\n <ul>\r\n <li>Fundamentals and selectors<\/li>\r\n <li>div and span<\/li>\r\n <li>Colors and backgrounds (RGB, RGBA, HEX)<\/li>\r\n <li>Units (px, %, em, vh, vw, calc)<\/li>\r\n <li>Typography<\/li>\r\n <li>Box model<\/li>\r\n <li>Display and visibility<\/li>\r\n <li>Selectors (descendant, child, pseudo elements)<\/li>\r\n <li>Background images and gradients<\/li>\r\n <li>Positioning (static, relative, absolute, fixed, z-index, float)<\/li>\r\n <li>Responsive design (media queries)<\/li>\r\n <li>Flexbox<\/li>\r\n <li>Grid<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n <span class=\"fjr-curr__sumtop\"><span class=\"fjr-curr__no\">03<\/span> Part 3: JavaScript \u2014 make it work<\/span>\r\n <span class=\"fjr-curr__line fjr-muted-d\">Bring the page to life.<\/span>\r\n <\/summary>\r\n <div class=\"fjr-curr__body\">\r\n <ul>\r\n <li>Fundamentals (var, let, const)<\/li>\r\n <li>Strings, numbers, operators<\/li>\r\n <li>Data types and core objects<\/li>\r\n <li>Functions<\/li>\r\n <li>Conditions and comparison\/logical operators<\/li>\r\n <li>Control flow and loops<\/li>\r\n <li>Strings (methods, template literals)<\/li>\r\n <li>Arrays (methods)<\/li>\r\n <li>Iterations (forEach, map, filter, find)<\/li>\r\n <li>Date<\/li>\r\n <li>DOM and DOM manipulation<\/li>\r\n <li>Asynchronous JavaScript<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n <span class=\"fjr-curr__sumtop\"><span class=\"fjr-curr__no\">04<\/span> Part 4: React \u2014 build like real companies<\/span>\r\n <span class=\"fjr-curr__line fjr-muted-d\">The tool used by top tech companies.<\/span>\r\n <\/summary>\r\n <div class=\"fjr-curr__body\">\r\n <ul>\r\n <li>Fundamentals (components, JSX, CSS in React)<\/li>\r\n <li>Data flow (props, event handlers, prop drilling)<\/li>\r\n <li>Hooks (useState, useEffect, useRef, useReducer, useContext, custom hooks)<\/li>\r\n <li>Conditional rendering<\/li>\r\n <li>Forms and form projects<\/li>\r\n <li>React Router 6<\/li>\r\n <li>Performance (memo, useCallback, useMemo)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n\r\n \r\n <div class=\"fjr-curr__projects\">\r\n <h3 class=\"fjr-curr__projects-h\">The 11 real projects you build<\/h3>\r\n <p class=\"fjr-curr__projects-intro fjr-muted-d\">\r\n You build all of these, then learn why each works and how to fix it when\r\n it breaks. That last part is the skill AI can't hand you.\r\n <\/p>\r\n <ol class=\"fjr-curr__projects-list\">\r\n <li>Interactive counter app (useState)<\/li>\r\n <li>Dynamic UI app (useEffect + conditional rendering)<\/li>\r\n <li>Working forms app<\/li>\r\n <li>Sidebar menu<\/li>\r\n <li>Popup modal<\/li>\r\n <li>Cocktails app (live database)<\/li>\r\n <li>Markdown preview tool<\/li>\r\n <li>Pagination app<\/li>\r\n <li>MovieDB app (real movie data)<\/li>\r\n <li>Netflix style app<\/li>\r\n <li>Disney+ style app<\/li>\r\n <\/ol>\r\n <p class=\"fjr-curr__close\">You finish with your live portfolio, a ready resume, and real interview practice.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-curr__intro{\r\n max-width:56ch;\r\n font-size:clamp(1.05rem,2.2vw,1.2rem);\r\n margin:0 0 32px;\r\n }\r\n .fjr-landing .fjr-curr__accordions{ margin-bottom:56px; }\r\n .fjr-landing .fjr-curr__sumtop{\r\n display:flex;\r\n align-items:baseline;\r\n gap:12px;\r\n font-size:1.1rem;\r\n }\r\n .fjr-landing .fjr-curr__no{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n color:var(--accent);\r\n }\r\n .fjr-landing .fjr-curr__line{ font-weight:400; font-size:.95rem; }\r\n .fjr-landing .fjr-curr__body{ padding:0 0 22px; }\r\n .fjr-landing .fjr-curr__body ul{\r\n margin:0;\r\n padding:0;\r\n list-style:none;\r\n display:grid;\r\n gap:9px;\r\n max-width:70ch;\r\n }\r\n .fjr-landing .fjr-curr__body ul li{\r\n position:relative;\r\n padding-left:20px;\r\n color:var(--muted-dark);\r\n font-size:.98rem;\r\n }\r\n .fjr-landing .fjr-curr__body ul li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0; top:.55em;\r\n width:6px; height:6px;\r\n border-radius:50%;\r\n background:var(--accent);\r\n }\r\n .fjr-landing .fjr-curr__projects-h{\r\n font-size:clamp(1.3rem,3vw,1.7rem);\r\n font-weight:800;\r\n letter-spacing:-.02em;\r\n margin:0 0 12px;\r\n }\r\n .fjr-landing .fjr-curr__projects-intro{ max-width:60ch; margin:0 0 24px; }\r\n .fjr-landing .fjr-curr__projects-list{\r\n margin:0 0 24px;\r\n padding-left:1.4em;\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:10px 40px;\r\n }\r\n .fjr-landing .fjr-curr__projects-list li{ font-size:1rem; padding-left:6px; }\r\n .fjr-landing .fjr-curr__projects-list li::marker{\r\n color:var(--accent);\r\n font-family:var(--mono);\r\n font-weight:700;\r\n }\r\n .fjr-landing .fjr-curr__close{\r\n font-weight:700;\r\n font-size:1.05rem;\r\n margin:0;\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-curr__projects-list{ grid-template-columns:1fr 1fr; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-value\" aria-labelledby=\"fjr-value-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ here is everything you get<\/p>\r\n <h2 id=\"fjr-value-h2\" class=\"fjr-h2\">Everything included.<\/h2>\r\n\r\n <div class=\"fjr-value__card\">\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">Core Course: HTML, CSS, JavaScript and React (25+ hours)<\/span>\r\n <span class=\"fjr-value__val\">\u20b96,999<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">11 Real Projects to build along the way<\/span>\r\n <span class=\"fjr-value__val fjr-value__inc\">Included<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">Your Live Portfolio Website + easy setup guide<\/span>\r\n <span class=\"fjr-value__val fjr-value__inc\">Included<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">WhatsApp Doubt Support Group<\/span>\r\n <span class=\"fjr-value__val fjr-value__inc\">Included<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\">Certificate of Completion<\/span>\r\n <span class=\"fjr-value__val fjr-value__inc\">Included<\/span>\r\n <\/div>\r\n\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 1<\/span> AI Assisted Coding Toolkit<\/span>\r\n <span class=\"fjr-value__val\">\u20b91,499<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 2<\/span> Fresher Resume + LinkedIn Kit<\/span>\r\n <span class=\"fjr-value__val\">\u20b91,499<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 3<\/span> 48 Hour Interview Crash Sheet<\/span>\r\n <span class=\"fjr-value__val\">\u20b91,499<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 4<\/span> 30 Day Job Ready Roadmap<\/span>\r\n <span class=\"fjr-value__val\">\u20b9999<\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row\">\r\n <span class=\"fjr-value__item\"><span class=\"fjr-value__tag\">Bonus 5<\/span> How to Use AI (ChatGPT \/ v0) to Code 10x Faster<\/span>\r\n <span class=\"fjr-value__val\">\u20b91,499<\/span>\r\n <\/div>\r\n\r\n <div class=\"fjr-value__row fjr-value__total\">\r\n <span class=\"fjr-value__item\">Total Value<\/span>\r\n <span class=\"fjr-value__val\"><s>\u20b913,994<\/s><\/span>\r\n <\/div>\r\n <div class=\"fjr-value__row fjr-value__price\">\r\n <span class=\"fjr-value__item\">Your price today<\/span>\r\n <span class=\"fjr-value__val\">\u20b9497<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"fjr-value__cta\">\r\n <a class=\"fjr-btn\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">Start my 30 day blueprint \u2014 <span class=\"fjr-price\">\u20b9497<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-value__card{\r\n max-width:760px;\r\n margin:0 auto;\r\n background:var(--paper);\r\n border:1px solid var(--line-light);\r\n border-radius:14px;\r\n padding:8px clamp(16px,3vw,28px);\r\n box-shadow:0 10px 40px rgba(0,0,0,.06);\r\n }\r\n .fjr-landing .fjr-value__row{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:16px;\r\n padding:16px 0;\r\n border-bottom:1px solid var(--line-light);\r\n }\r\n .fjr-landing .fjr-value__row:last-child{ border-bottom:0; }\r\n .fjr-landing .fjr-value__item{\r\n font-size:1rem;\r\n font-weight:600;\r\n line-height:1.35;\r\n }\r\n .fjr-landing .fjr-value__tag{\r\n display:inline-block;\r\n font-family:var(--mono);\r\n font-size:11px;\r\n font-weight:700;\r\n color:var(--accent-press);\r\n background:rgba(255,176,32,.16);\r\n padding:2px 7px;\r\n border-radius:5px;\r\n margin-right:6px;\r\n }\r\n .fjr-landing .fjr-value__val{\r\n font-family:var(--mono);\r\n font-weight:700;\r\n white-space:nowrap;\r\n font-size:1rem;\r\n }\r\n .fjr-landing .fjr-value__inc{ color:var(--muted-light); font-weight:600; }\r\n .fjr-landing .fjr-value__total{\r\n border-top:2px solid var(--line-light);\r\n padding-top:20px;\r\n }\r\n .fjr-landing .fjr-value__total .fjr-value__item,\r\n .fjr-landing .fjr-value__total .fjr-value__val{\r\n font-size:1.2rem;\r\n color:var(--muted-light);\r\n }\r\n .fjr-landing .fjr-value__price .fjr-value__item{\r\n font-size:1.3rem;\r\n font-weight:800;\r\n }\r\n .fjr-landing .fjr-value__price .fjr-value__val{\r\n font-size:clamp(1.6rem,4vw,2.2rem);\r\n font-weight:800;\r\n color:var(--accent-press);\r\n }\r\n .fjr-landing .fjr-value__cta{ text-align:center; margin-top:32px; }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-guarantee\" aria-labelledby=\"fjr-guarantee-h2\">\r\n <div class=\"fjr-container\">\r\n <div class=\"fjr-guarantee__card\">\r\n <p class=\"fjr-eyebrow\">\/\/ 100% Money Back Guarantee<\/p>\r\n <h2 id=\"fjr-guarantee-h2\" class=\"fjr-h2 fjr-guarantee__h2\">You do the work. We take the risk.<\/h2>\r\n\r\n <div class=\"fjr-guarantee__promises\">\r\n <div class=\"fjr-guarantee__promise\">\r\n <h3 class=\"fjr-guarantee__ptitle\">7 day money back<\/h3>\r\n <ul class=\"fjr-guarantee__list\">\r\n <li>Join, watch the early lessons, and open the first projects<\/li>\r\n <li>Not the right fit? Request a full refund within 7 days<\/li>\r\n <li>One condition: you have completed less than 20 percent of the course<\/li>\r\n <li>Meet that, and every rupee comes back<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"fjr-guarantee__promise\">\r\n <h3 class=\"fjr-guarantee__ptitle\">The Interview Ready Guarantee<\/h3>\r\n <p>Finish the course, then attend 5 real interviews within 90 days and show us the proof. If you do all that and still get no offer, we refund every rupee. You risk nothing but your effort.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"fjr-guarantee__note fjr-muted-d\">\r\n No honest course can force a company to hire you. So we guarantee our\r\n effort and reward yours, not a promise we can't control.\r\n <\/p>\r\n\r\n <div class=\"fjr-guarantee__seal\">\r\n <span class=\"fjr-guarantee__shield\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 2 4 5v6c0 5 3.4 8.4 8 11 4.6-2.6 8-6 8-11V5l-8-3Z\"\/>\r\n <path d=\"m9 12 2 2 4-4\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"fjr-guarantee__sealtext\">7 Day Refund · Interview Ready Guarantee<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-mentor\" aria-labelledby=\"fjr-mentor-h2\">\r\n <div class=\"fjr-container fjr-mentor__grid\">\r\n <div class=\"fjr-mentor__photo\">\r\n <img loading=\"lazy\" src=\"https:\/\/webdevarmy.com\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-16-at-11.34.08-PM.jpeg\"\r\n alt=\"Roopam Gupta, course mentor\"\r\n width=\"420\" height=\"480\"\r\n loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n\r\n <div class=\"fjr-mentor__copy\">\r\n <p class=\"fjr-eyebrow\">\/\/ meet your mentor<\/p>\r\n <h2 id=\"fjr-mentor-h2\" class=\"fjr-h2\">Roopam Gupta<\/h2>\r\n\r\n <p class=\"fjr-mentor__credits fjr-muted-d\">\r\n DevOps Engineer with 3.5+ years of industry experience and a strong\r\n background in web development. Hands on with Full Stack Development,\r\n cloud, and DevOps, with a focus on practical, project based learning.\r\n <\/p>\r\n\r\n <p class=\"fjr-mentor__body\">\r\n Roopam has built and shipped real software. So this course doesn't teach\r\n you to just follow along, it teaches you to think like someone who\r\n actually works in the field.\r\n <\/p>\r\n\r\n <a class=\"fjr-mentor__linkedin\"\r\n href=\"https:\/\/www.linkedin.com\/in\/roopam-badoniya-947748195\/\"\r\n target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"fjr-mentor__li-icon\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"\/>\r\n <\/svg>\r\n <span>View Roopam on LinkedIn<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-mentor__grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:clamp(28px,5vw,56px);\r\n align-items:center;\r\n }\r\n .fjr-landing .fjr-mentor__photo{ max-width:340px; }\r\n .fjr-landing .fjr-mentor__photo img{\r\n width:100%;\r\n height:auto;\r\n border-radius:14px;\r\n border:2px solid var(--accent);\r\n box-shadow:0 20px 60px rgba(0,0,0,.4);\r\n }\r\n .fjr-landing .fjr-mentor__credits{\r\n font-family:var(--mono);\r\n font-size:.95rem;\r\n line-height:1.55;\r\n margin:0 0 20px;\r\n padding-left:16px;\r\n border-left:3px solid var(--accent);\r\n }\r\n .fjr-landing .fjr-mentor__body{\r\n font-size:clamp(1.05rem,2.2vw,1.2rem);\r\n max-width:52ch;\r\n margin:0 0 26px;\r\n }\r\n .fjr-landing .fjr-mentor__linkedin{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n min-height:44px;\r\n padding:10px 20px;\r\n border:1px solid var(--accent);\r\n border-radius:var(--radius);\r\n color:var(--accent);\r\n font-weight:700;\r\n font-size:15px;\r\n text-decoration:none;\r\n transition:background .18s ease, color .18s ease, transform .18s ease;\r\n }\r\n .fjr-landing .fjr-mentor__linkedin:hover{\r\n background:var(--accent);\r\n color:var(--ink);\r\n transform:translateY(-2px);\r\n }\r\n .fjr-landing .fjr-mentor__linkedin:focus-visible{\r\n outline:3px solid var(--accent);\r\n outline-offset:3px;\r\n }\r\n .fjr-landing .fjr-mentor__li-icon{ flex:0 0 auto; }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-mentor__grid{ grid-template-columns:340px 1fr; }\r\n }\r\n<\/style>\r\n\r\n\r\n\r\n\r\n<section class=\"sp-section sp-strip\" aria-labelledby=\"sp-strip-h\">\r\n <div class=\"sp-wrap\">\r\n <p class=\"sp-label\">\/\/ real student work<\/p>\r\n <h2 id=\"sp-strip-h\" class=\"sp-h2 sp-strip__h\">Not just reviews. Real apps students actually shipped.<\/h2>\r\n\r\n <ul class=\"sp-stats\" aria-label=\"Workshop numbers\">\r\n <li><span class=\"sp-diamond\" aria-hidden=\"true\">◆<\/span>90+ written reviews<\/li>\r\n <li><span class=\"sp-diamond\" aria-hidden=\"true\">◆<\/span>37 students shipped real React apps<\/li>\r\n <li><span class=\"sp-diamond\" aria-hidden=\"true\">◆<\/span>11 live and clickable<\/li>\r\n <\/ul>\r\n\r\n <div class=\"sp-scroller\" role=\"list\" aria-label=\"Student work\">\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Rahul<\/p>\r\n <p class=\"sp-card__proj\">Book store app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/incandescent-lolly-bf0481.netlify.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/Shady-45\/books-buy\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Varun H<\/p>\r\n <p class=\"sp-card__proj\">Amazon book list app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/hvarun13.github.io\/amazon-booklist\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/hvarun13\/amazon-booklist\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Aaditya Singh Rana<\/p>\r\n <p class=\"sp-card__proj\">React practice app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/aadi-singh.github.io\/WebDevAcademy--React\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/aadi-singh\/WebDevAcademy--React\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Yash Adatiya<\/p>\r\n <p class=\"sp-card__proj\">Library app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/library-task-1.netlify.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Kummetha Adi Narayana Reddy<\/p>\r\n <p class=\"sp-card__proj\">React props app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/adi19471.github.io\/react-props-passdata\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/Adi19471\/react-props-passdata\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"sp-card\" role=\"listitem\">\r\n <p class=\"sp-card__name\">Monika Pant<\/p>\r\n <p class=\"sp-card__proj\">Library app<\/p>\r\n <div class=\"sp-card__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/o15xfm.csb.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/codesandbox.io\/s\/my-library-app-o15xfm\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <p class=\"sp-strip__caption\">These are early React projects, shared by the students themselves. They show one simple thing: people who started with little shipped a real, working app fast.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"sp-section sp-testi\" aria-labelledby=\"sp-testi-h\">\r\n <div class=\"sp-wrap\">\r\n <p class=\"sp-label\">\/\/ what learners said<\/p>\r\n <h2 id=\"sp-testi-h\" class=\"sp-h2\">What learners said about the teaching<\/h2>\r\n\r\n <p class=\"sp-disclose\">\r\n <span class=\"sp-disclose__dot\" aria-hidden=\"true\"><\/span>\r\n Real feedback and real projects from students in a past React workshop. Shared with permission. Names are real; emails are kept private.\r\n <\/p>\r\n\r\n \r\n <figure class=\"sp-verified\">\r\n <span class=\"sp-verified__badge\">\u2713 Verified \u2014 review + live app from the same student<\/span>\r\n <blockquote class=\"sp-verified__quote\">\"I liked the teaching.\"<\/blockquote>\r\n <span class=\"sp-verified__name\">Rahul<\/span>\r\n <p class=\"sp-verified__line\">They also built and shipped this:<\/p>\r\n <div class=\"sp-verified__links\">\r\n <a class=\"sp-live\" href=\"https:\/\/incandescent-lolly-bf0481.netlify.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">View live \u2197<\/a>\r\n <a class=\"sp-code\" href=\"https:\/\/github.com\/Shady-45\/books-buy\" target=\"_blank\" rel=\"noopener noreferrer\">View code \u2197<\/a>\r\n <\/div>\r\n <\/figure>\r\n\r\n <div class=\"sp-carousel\" aria-label=\"What learners said \u2014 auto-scrolling reviews\">\r\n <div class=\"sp-reviews\">\r\n \r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"It's just beginning but it's already a good start. The teaching is at the right speed, and even a complete beginner can understand the concept. Looking forward to the next one. Thanks!\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Tejas Gandhi<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I really enjoyed the pace of the lecture. It's great that the teacher goes into each part in detail.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Michelle<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like that there will be projects I can put on my GitHub, as proof that I actually did something.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Peter<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"The teaching style is excellent and straightforward. I'm looking forward to working on real projects.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Jyoti Malhotra<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"Very good explanation, easy and clear. The mic sounds good and the mentor speaks very clearly, so it's easy to follow even though English is not my first language.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Luca<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"The way of teaching is excellent, and I don't think it needs any improvement.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Suchikant Patnaik<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like the beginner friendly teaching, and the class was super good. In my opinion, no change is needed.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Ajith Jacob Dany<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like the way you teach. It makes everyone very comfortable to understand. Nothing I would change.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Ritesh<\/figcaption>\r\n <\/figure>\r\n\r\n \r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"It's just beginning but it's already a good start. The teaching is at the right speed, and even a complete beginner can understand the concept. Looking forward to the next one. Thanks!\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Tejas Gandhi<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I really enjoyed the pace of the lecture. It's great that the teacher goes into each part in detail.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Michelle<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like that there will be projects I can put on my GitHub, as proof that I actually did something.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Peter<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"The teaching style is excellent and straightforward. I'm looking forward to working on real projects.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Jyoti Malhotra<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"Very good explanation, easy and clear. The mic sounds good and the mentor speaks very clearly, so it's easy to follow even though English is not my first language.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Luca<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"The way of teaching is excellent, and I don't think it needs any improvement.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Suchikant Patnaik<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like the beginner friendly teaching, and the class was super good. In my opinion, no change is needed.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Ajith Jacob Dany<\/figcaption>\r\n <\/figure>\r\n\r\n <figure class=\"sp-review\" aria-hidden=\"true\">\r\n <span class=\"sp-review__mark\" aria-hidden=\"true\">>_<\/span>\r\n <blockquote>\"I like the way you teach. It makes everyone very comfortable to understand. Nothing I would change.\"<\/blockquote>\r\n <figcaption class=\"sp-review__name\">Ritesh<\/figcaption>\r\n <\/figure>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n \/* ===== 11 \u00b7 SOCIAL PROOF \u2014 light theme (adapted from social-proof-section.html) ===== *\/\r\n .fjr-landing .sp-section{\r\n background:var(--paper);\r\n color:var(--ink);\r\n padding-block:clamp(48px,7vw,80px);\r\n }\r\n .fjr-landing .sp-testi{ background:var(--paper-2); }\r\n .fjr-landing .sp-wrap{\r\n width:100%;\r\n max-width:var(--container);\r\n margin-inline:auto;\r\n padding-inline:clamp(20px,5vw,40px);\r\n }\r\n .fjr-landing .sp-label{\r\n font-family:var(--mono);\r\n font-size:13px;\r\n letter-spacing:.02em;\r\n color:var(--accent-press);\r\n margin:0 0 16px;\r\n }\r\n .fjr-landing .sp-h2{\r\n font-size:clamp(1.5rem,3.4vw,2.3rem);\r\n font-weight:800;\r\n line-height:1.12;\r\n letter-spacing:-.02em;\r\n margin:0 0 20px;\r\n color:var(--ink);\r\n }\r\n\r\n \/* Link buttons (shared by strip + verified card) *\/\r\n .fjr-landing .sp-live,\r\n .fjr-landing .sp-code{\r\n display:inline-flex;\r\n align-items:center;\r\n min-height:44px;\r\n padding:10px 16px;\r\n border-radius:8px;\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n font-weight:700;\r\n text-decoration:none;\r\n transition:background .18s ease, transform .18s ease, color .18s ease, border-color .18s ease;\r\n }\r\n .fjr-landing .sp-live{ background:var(--accent); color:var(--ink); }\r\n .fjr-landing .sp-live:hover{ background:var(--accent-press); transform:translateY(-1px); }\r\n .fjr-landing .sp-code{ border:1px solid var(--line-light); color:var(--muted-light); background:var(--paper); }\r\n .fjr-landing .sp-code:hover{ color:var(--ink); border-color:var(--accent); }\r\n .fjr-landing .sp-live:focus-visible,\r\n .fjr-landing .sp-code:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }\r\n\r\n \/* ---------- COMPONENT A: proof strip ---------- *\/\r\n .fjr-landing .sp-strip__h{ max-width:24ch; }\r\n .fjr-landing .sp-stats{\r\n list-style:none;\r\n margin:0 0 26px;\r\n padding:0;\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px 24px;\r\n font-family:var(--mono);\r\n font-size:13px;\r\n color:var(--muted-light);\r\n }\r\n .fjr-landing .sp-stats li{ display:inline-flex; align-items:center; gap:8px; }\r\n .fjr-landing .sp-diamond{ color:var(--accent-press); font-size:.8em; }\r\n\r\n .fjr-landing .sp-scroller{\r\n display:flex;\r\n gap:16px;\r\n overflow-x:auto;\r\n scroll-snap-type:x mandatory;\r\n -webkit-overflow-scrolling:touch;\r\n padding:4px 0 14px;\r\n margin-inline:calc(-1 * clamp(20px,5vw,40px));\r\n padding-inline:clamp(20px,5vw,40px);\r\n }\r\n .fjr-landing .sp-card{\r\n scroll-snap-align:start;\r\n flex:0 0 auto;\r\n width:min(80vw,300px);\r\n display:flex;\r\n flex-direction:column;\r\n gap:8px;\r\n padding:20px;\r\n border:1px solid var(--line-light);\r\n border-radius:var(--radius);\r\n background:var(--paper-2);\r\n }\r\n .fjr-landing .sp-card__name{ margin:0; font-weight:800; font-size:1.02rem; line-height:1.25; color:var(--ink); }\r\n .fjr-landing .sp-card__proj{ margin:0 0 6px; font-size:.92rem; color:var(--muted-light); }\r\n .fjr-landing .sp-card__links{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }\r\n .fjr-landing .sp-strip__caption{\r\n max-width:66ch;\r\n margin:18px 0 0;\r\n font-size:.95rem;\r\n line-height:1.55;\r\n color:var(--muted-light);\r\n }\r\n\r\n \/* ---------- COMPONENT B: testimonials ---------- *\/\r\n .fjr-landing .sp-disclose{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:10px;\r\n max-width:72ch;\r\n margin:0 0 30px;\r\n font-size:.95rem;\r\n color:var(--muted-light);\r\n }\r\n .fjr-landing .sp-disclose__dot{\r\n flex:0 0 auto; width:9px; height:9px; margin-top:.45em;\r\n border-radius:50%; background:var(--accent);\r\n }\r\n\r\n \/* Verified card \u2014 larger, set apart, gold border + subtle glow *\/\r\n .fjr-landing .sp-verified{\r\n margin:0 0 40px;\r\n max-width:760px;\r\n background:var(--ink);\r\n border:2px solid var(--accent);\r\n border-radius:14px;\r\n padding:clamp(22px,4vw,34px);\r\n box-shadow:0 0 0 6px rgba(255,176,32,.06), 0 20px 60px rgba(255,176,32,.12);\r\n }\r\n .fjr-landing .sp-verified__badge{\r\n display:inline-block;\r\n font-family:var(--mono);\r\n font-size:11.5px;\r\n font-weight:700;\r\n color:var(--accent-press);\r\n background:rgba(255,176,32,.16);\r\n padding:5px 12px;\r\n border-radius:999px;\r\n margin-bottom:16px;\r\n }\r\n .fjr-landing .sp-verified__quote{\r\n margin:0 0 10px;\r\n font-size:clamp(1.2rem,2.6vw,1.5rem);\r\n font-weight:700;\r\n line-height:1.35;\r\n color:var(--paper);\r\n }\r\n .fjr-landing .sp-verified__name{ font-weight:800; color:var(--accent); }\r\n .fjr-landing .sp-verified__line{ margin:16px 0 12px; font-size:.95rem; color:var(--muted-dark); }\r\n .fjr-landing .sp-verified__links{ display:flex; flex-wrap:wrap; gap:12px; }\r\n \/* Secondary link + badge tuned for the dark verified card *\/\r\n .fjr-landing .sp-verified .sp-code{ background:transparent; border-color:var(--line-dark); color:var(--muted-dark); }\r\n .fjr-landing .sp-verified .sp-code:hover{ color:var(--paper); border-color:var(--accent); }\r\n\r\n \/* Reviews \u2014 auto-scrolling marquee carousel *\/\r\n .fjr-landing .sp-carousel{\r\n position:relative;\r\n overflow:hidden;\r\n \/* bleed to container edges so cards can enter\/exit past the padding *\/\r\n margin-inline:calc(-1 * clamp(20px,5vw,40px));\r\n padding-block:6px;\r\n \/* soft fade at both edges *\/\r\n -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);\r\n mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);\r\n }\r\n .fjr-landing .sp-reviews{\r\n display:flex;\r\n flex-wrap:nowrap;\r\n width:max-content;\r\n animation:sp-marquee 48s linear infinite;\r\n will-change:transform;\r\n }\r\n .fjr-landing .sp-carousel:hover .sp-reviews,\r\n .fjr-landing .sp-carousel:focus-within .sp-reviews{ animation-play-state:paused; }\r\n @keyframes sp-marquee{\r\n from{ transform:translateX(0); }\r\n to{ transform:translateX(-50%); } \/* card set is duplicated, so -50% = one full set *\/\r\n }\r\n .fjr-landing .sp-review{\r\n flex:0 0 min(80vw,340px);\r\n \/* uniform gap via margin (incl. the last card) so each half is exactly equal \u2192 seamless loop *\/\r\n margin:0 18px 0 0;\r\n background:var(--paper);\r\n border:1px solid var(--line-light);\r\n border-radius:var(--radius);\r\n padding:22px;\r\n transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;\r\n }\r\n .fjr-landing .sp-review:hover{ transform:translateY(-4px); border-color:rgba(255,176,32,.5); box-shadow:0 16px 40px rgba(0,0,0,.08); }\r\n .fjr-landing .sp-review__mark{\r\n font-family:var(--mono);\r\n font-size:18px;\r\n color:var(--accent-press);\r\n display:block;\r\n margin-bottom:10px;\r\n }\r\n .fjr-landing .sp-review blockquote{ margin:0 0 14px; font-size:1rem; line-height:1.55; color:var(--ink); }\r\n .fjr-landing .sp-review__name{ font-weight:800; color:var(--accent-press); }\r\n\r\n \/* No motion: fall back to a normal swipeable scroller, drop the clone set *\/\r\n @media (prefers-reduced-motion:reduce){\r\n .fjr-landing .sp-carousel{\r\n overflow-x:auto;\r\n -webkit-mask-image:none;\r\n mask-image:none;\r\n scroll-snap-type:x mandatory;\r\n }\r\n .fjr-landing .sp-reviews{ animation:none; }\r\n .fjr-landing .sp-reviews > [aria-hidden=\"true\"]{ display:none; }\r\n .fjr-landing .sp-review{ scroll-snap-align:start; }\r\n }\r\n @media (prefers-reduced-motion:reduce){\r\n .fjr-landing .sp-live,.fjr-landing .sp-code,.fjr-landing .sp-review{ transition:none; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-how\" aria-labelledby=\"fjr-how-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ how it works<\/p>\r\n <h2 id=\"fjr-how-h2\" class=\"fjr-h2\">Three steps. Thirty days.<\/h2>\r\n\r\n <ol class=\"fjr-how__steps\">\r\n <li class=\"fjr-how__step\">\r\n <span class=\"fjr-how__no\">01<\/span>\r\n <h3 class=\"fjr-how__title\">Join<\/h3>\r\n <p>You get everything right away: all videos, all projects, all bonuses.<\/p>\r\n <\/li>\r\n <li class=\"fjr-how__step\">\r\n <span class=\"fjr-how__no\">02<\/span>\r\n <h3 class=\"fjr-how__title\">Follow the 30 day plan<\/h3>\r\n <p>About 50 minutes a day. Build as you learn. Ask in WhatsApp the moment you're stuck.<\/p>\r\n <\/li>\r\n <li class=\"fjr-how__step\">\r\n <span class=\"fjr-how__no\">03<\/span>\r\n <h3 class=\"fjr-how__title\">Go live and apply<\/h3>\r\n <p>Put your website online, fix your resume with the kit, and start giving interviews with the crash sheet in hand.<\/p>\r\n <\/li>\r\n <\/ol>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-how__steps{\r\n list-style:none;\r\n margin:0;\r\n padding:0;\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:28px;\r\n position:relative;\r\n }\r\n .fjr-landing .fjr-how__step{\r\n position:relative;\r\n padding:24px;\r\n border:1px solid var(--line-dark);\r\n border-radius:var(--radius);\r\n background:rgba(255,255,255,.02);\r\n }\r\n .fjr-landing .fjr-how__no{\r\n font-family:var(--mono);\r\n font-size:14px;\r\n font-weight:700;\r\n color:var(--ink);\r\n background:var(--accent);\r\n width:40px; height:40px;\r\n border-radius:50%;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n margin-bottom:14px;\r\n }\r\n .fjr-landing .fjr-how__title{\r\n font-size:1.2rem;\r\n font-weight:700;\r\n margin:0 0 8px;\r\n }\r\n .fjr-landing .fjr-how__step p{\r\n margin:0;\r\n color:var(--muted-dark);\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-how__steps{ grid-template-columns:repeat(3,1fr); }\r\n \/* thin connecting accent hairline behind the steps (desktop only) *\/\r\n .fjr-landing .fjr-how__steps::before{\r\n content:\"\";\r\n position:absolute;\r\n top:44px; left:15%; right:15%;\r\n height:1px;\r\n background:var(--accent);\r\n opacity:.35;\r\n z-index:0;\r\n }\r\n .fjr-landing .fjr-how__step{ z-index:1; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-faq\" aria-labelledby=\"fjr-faq-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ questions<\/p>\r\n <h2 id=\"fjr-faq-h2\" class=\"fjr-h2\">Straight answers.<\/h2>\r\n\r\n <div class=\"fjr-faq__list\">\r\n <details>\r\n <summary>Will AI take this job before I even get it?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>No. AI is a helper, and it makes mistakes. Companies need people who can check and fix its work. This course teaches exactly that, so AI becomes your tool, not your replacement.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>Can't I just use AI to build without learning to code?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>You can build something that looks fine. But when it breaks, you won't know why, and you won't get hired. Companies pay you to understand the code, not just to prompt for it.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>I've never written one line of code. Can I really do this?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>Yes. This starts from zero, and the WhatsApp group is there when you're stuck.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>What if I get stuck?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>Post it in the WhatsApp group. A small error won't stop you for days.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>Will this guarantee me a job?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>No honest course can promise that. What we promise: you finish with a real website online, a ready resume, and interview practice. And if you finish everything and still don't feel ready, we coach you personally until you do.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>How is this different from free YouTube videos?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>YouTube is random videos, no order, no help. This is one clear path, with support, plus the resume and interview help YouTube skips.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>How is this different from a \u20b930,000 bootcamp?<\/summary>\r\n <div class=\"fjr-faq__a\"><p>Bootcamps cram Java, Python, React, Node and databases into 6 months. This is focused: frontend done properly in 30 days, for a fraction of the cost.<\/p><\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>What if I don't like it?<\/summary>\r\n <div class=\"fjr-faq__a\">\r\n <p>Join, watch the early lessons, and open the first projects.<\/p>\r\n <ul class=\"fjr-faq__ul\">\r\n <li>Not the right fit? Request a full refund within 7 days<\/li>\r\n <li>One condition: you have completed less than 20 percent of the course<\/li>\r\n <li>Meet that, and every rupee comes back<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-faq__list{\r\n max-width:70ch;\r\n }\r\n .fjr-landing .fjr-faq__a{ padding:0 40px 22px 0; }\r\n .fjr-landing .fjr-faq__a p{\r\n margin:0;\r\n color:var(--muted-light);\r\n font-size:1rem;\r\n line-height:1.6;\r\n }\r\n .fjr-landing .fjr-faq__ul{\r\n list-style:none;\r\n margin:12px 0 0;\r\n padding:0;\r\n display:grid;\r\n gap:10px;\r\n }\r\n .fjr-landing .fjr-faq__ul li{\r\n position:relative;\r\n padding-left:22px;\r\n color:var(--muted-light);\r\n font-size:1rem;\r\n line-height:1.55;\r\n }\r\n .fjr-landing .fjr-faq__ul li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0;\r\n top:.6em;\r\n width:7px;\r\n height:7px;\r\n border-radius:2px;\r\n background:var(--accent);\r\n }\r\n \/* FAQ summaries are single-line questions, not the two-line curriculum style *\/\r\n .fjr-landing .fjr-faq summary{ flex-direction:row; }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-dark fjr-final\" aria-labelledby=\"fjr-final-h2\">\r\n <div class=\"fjr-container fjr-final__inner\">\r\n <p class=\"fjr-eyebrow\">\/\/ thirty days from now<\/p>\r\n <h2 id=\"fjr-final-h2\" class=\"fjr-h2 fjr-final__h2\">Where do you want to be?<\/h2>\r\n\r\n <p class=\"fjr-final__lines\">\r\n Still watching random videos with no plan? Or holding your own website, a\r\n ready resume, and the skill that gets a fresher hired in the AI age?\r\n <\/p>\r\n\r\n <p class=\"fjr-final__offer\">\r\n <strong>Frontend Job Ready: The 30 Day AI Era Blueprint<\/strong><br>\r\n Only \u20b9497. All 5 bonuses included. 25+ hours of clear training.\r\n <\/p>\r\n\r\n <div class=\"fjr-final__guarantee\">\r\n \r\n <div class=\"fjr-final__gpart\">\r\n <span class=\"fjr-final__gno\">1<\/span>\r\n <p>Don't like the content? Full refund in 7 days. No questions.<\/p>\r\n <\/div>\r\n <div class=\"fjr-final__gpart\">\r\n <span class=\"fjr-final__gno\">2<\/span>\r\n <p>Finish the course and still don't feel ready to apply? We coach you personally until you do.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <a class=\"fjr-btn fjr-final__cta\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">Start my 30 day blueprint \u2014 <span class=\"fjr-price\">\u20b9497<\/span><\/a>\r\n\r\n <p class=\"fjr-final__scarcity\">WhatsApp support is capped at [X] members. These 5 bonuses are only for the current batch.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-final__inner{\r\n text-align:center;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n }\r\n .fjr-landing .fjr-final__h2{\r\n font-size:clamp(2rem,5vw,3.4rem);\r\n max-width:18ch;\r\n }\r\n .fjr-landing .fjr-final__lines{\r\n max-width:56ch;\r\n font-size:clamp(1.05rem,2.4vw,1.3rem);\r\n color:var(--muted-dark);\r\n margin:0 0 28px;\r\n }\r\n .fjr-landing .fjr-final__offer{\r\n font-size:1.1rem;\r\n line-height:1.6;\r\n margin:0 0 32px;\r\n }\r\n .fjr-landing .fjr-final__offer strong{ color:var(--accent); }\r\n .fjr-landing .fjr-final__guarantee{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:16px;\r\n max-width:640px;\r\n width:100%;\r\n margin:0 0 36px;\r\n text-align:left;\r\n border:1px solid var(--line-dark);\r\n border-radius:14px;\r\n padding:24px;\r\n background:rgba(255,255,255,.02);\r\n }\r\n .fjr-landing .fjr-final__gpart{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:14px;\r\n }\r\n .fjr-landing .fjr-final__gno{\r\n flex:0 0 auto;\r\n width:28px; height:28px;\r\n border-radius:50%;\r\n background:var(--accent);\r\n color:var(--ink);\r\n font-weight:700;\r\n font-size:14px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n }\r\n .fjr-landing .fjr-final__gpart p{ margin:0; font-size:1rem; }\r\n .fjr-landing .fjr-final__scarcity{\r\n font-family:var(--mono);\r\n font-size:12.5px;\r\n color:var(--muted-dark);\r\n max-width:52ch;\r\n margin:22px 0 0;\r\n }\r\n @media (min-width:768px){\r\n .fjr-landing .fjr-final__guarantee{ grid-template-columns:1fr 1fr; }\r\n }\r\n<\/style>\r\n\r\n\r\n<section class=\"fjr-section fjr-light fjr-notfor\" aria-labelledby=\"fjr-notfor-h2\">\r\n <div class=\"fjr-container\">\r\n <p class=\"fjr-eyebrow\">\/\/ this is not for you if<\/p>\r\n <h2 id=\"fjr-notfor-h2\" class=\"fjr-h2\">This is not for you if...<\/h2>\r\n\r\n <ul class=\"fjr-notfor__list\">\r\n <li>\r\n <span class=\"fjr-notfor__x\" aria-hidden=\"true\">×<\/span>\r\n You already know HTML, CSS and JavaScript and want an advanced or full stack course.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-notfor__x\" aria-hidden=\"true\">×<\/span>\r\n You want a \"job guaranteed\" placement scheme. We don't sell that. We sell real skills.\r\n <\/li>\r\n <li>\r\n <span class=\"fjr-notfor__x\" aria-hidden=\"true\">×<\/span>\r\n You are not willing to actually build the projects.\r\n <\/li>\r\n <\/ul>\r\n\r\n <p class=\"fjr-notfor__close\">\r\n If you're still reading, this course was made for you. Join the batch before the seats fill.\r\n <\/p>\r\n\r\n <div class=\"fjr-notfor__cta\">\r\n <a class=\"fjr-btn\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">Start my 30 day blueprint \u2014 <span class=\"fjr-price\">\u20b9497<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n .fjr-landing .fjr-notfor__list{\r\n list-style:none;\r\n margin:0 0 32px;\r\n padding:0;\r\n display:grid;\r\n gap:16px;\r\n max-width:64ch;\r\n }\r\n .fjr-landing .fjr-notfor__list li{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:14px;\r\n font-size:clamp(1rem,2vw,1.12rem);\r\n line-height:1.5;\r\n }\r\n .fjr-landing .fjr-notfor__x{\r\n flex:0 0 auto;\r\n width:28px; height:28px;\r\n border-radius:50%;\r\n background:var(--paper-2);\r\n border:1px solid var(--line-light);\r\n color:var(--muted-light);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-size:18px;\r\n line-height:1;\r\n margin-top:2px;\r\n }\r\n .fjr-landing .fjr-notfor__close{\r\n font-size:clamp(1.1rem,2.4vw,1.3rem);\r\n font-weight:700;\r\n max-width:56ch;\r\n margin:0 0 32px;\r\n }\r\n .fjr-landing .fjr-notfor__cta{ text-align:left; }\r\n<\/style>\r\n\r\n \r\n <div class=\"fjr-sticky\" id=\"fjr-sticky\" aria-hidden=\"true\">\r\n <a class=\"fjr-btn\" href=\"https:\/\/webdevarmy.com\/?wffn-next-link=yes\">Start \u2014 <span class=\"fjr-price\">\u20b9497<\/span><\/a>\r\n <a class=\"fjr-cta-note\" href=\"#what-you-get\">see what you get<\/a>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script defer>\r\n(function () {\r\n var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n \/* a) VSL facade \u2014 swap poster for the real player on click *\/\r\n var vsl = document.getElementById('fjr-vsl');\r\n if (vsl) {\r\n var facade = vsl.querySelector('.fjr-vsl__facade');\r\n if (facade) {\r\n facade.addEventListener('click', function () {\r\n var v = document.createElement('video');\r\n v.setAttribute('controls', '');\r\n v.setAttribute('autoplay', '');\r\n v.setAttribute('playsinline', '');\r\n v.setAttribute('preload', 'metadata');\r\n v.setAttribute('poster', 'assets\/vsl-poster.webp');\r\n v.style.width = '100%';\r\n v.style.height = '100%';\r\n v.style.objectFit = 'cover';\r\n var s = document.createElement('source');\r\n s.src = 'assets\/vsl.mp4';\r\n s.type = 'video\/mp4';\r\n v.appendChild(s);\r\n facade.replaceWith(v);\r\n if (v.play) { v.play().catch(function(){}); }\r\n });\r\n }\r\n }\r\n\r\n \/* b) Sticky bar \u2014 show after the hero scrolls out of view (mobile\/tablet only) *\/\r\n var hero = document.querySelector('.fjr-hero');\r\n var sticky = document.getElementById('fjr-sticky');\r\n if (hero && sticky && 'IntersectionObserver' in window) {\r\n var io = new IntersectionObserver(function (entries) {\r\n if (window.innerWidth > 1024) { sticky.classList.remove('is-visible'); sticky.setAttribute('aria-hidden','true'); return; }\r\n entries.forEach(function (e) {\r\n if (e.isIntersecting) { sticky.classList.remove('is-visible'); sticky.setAttribute('aria-hidden','true'); }\r\n else { sticky.classList.add('is-visible'); sticky.setAttribute('aria-hidden','false'); }\r\n });\r\n }, { threshold: 0 });\r\n io.observe(hero);\r\n }\r\n\r\n \/* c) Smooth-scroll fallback + offset so targets aren't hidden behind fixed bars *\/\r\n document.querySelectorAll('.fjr-landing a[href^=\"#\"]').forEach(function (a) {\r\n a.addEventListener('click', function (ev) {\r\n var id = a.getAttribute('href');\r\n if (!id || id === '#') return;\r\n var target = document.querySelector(id);\r\n if (!target) return;\r\n ev.preventDefault();\r\n var top = target.getBoundingClientRect().top + window.pageYOffset - 12;\r\n window.scrollTo({ top: top, behavior: reduce ? 'auto' : 'smooth' });\r\n });\r\n });\r\n})();\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"author":1,"featured_media":0,"template":"wflp-canvas.php","meta":{"footnotes":""},"class_list":["post-25","wffn_landing","type-wffn_landing","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/wffn_landing\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/wffn_landing"}],"about":[{"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/types\/wffn_landing"}],"author":[{"embeddable":true,"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"version-history":[{"count":10,"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/wffn_landing\/25\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/webdevarmy.com\/index.php?rest_route=\/wp\/v2\/wffn_landing\/25\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/webdevarmy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}