PageSourceSearch

https://openhyperstep.com/guide/beginner

html openhyperstep.com collected 2026-10-02 01:38:25 UTC 48,368 bytes, 19 lines download raw bytes

1<!DOCTYPE html><html lang="ko" class="h-full antialiased"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/3fb105a89b184db1.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-e05baeb5bb66a737.js"/>
1<script src="/_next/static/chunks/4bd1b696-c2f6e0877b6c10aa.js" async=""></script>
1<script src="/_next/static/chunks/3794-cd826fc25a17dd0e.js" async=""></script>
1<script src="/_next/static/chunks/main-app-d4b7f8551ba95e13.js" async=""></script>
1<script src="/_next/static/chunks/44530001-37743725acffb95d.js" async=""></script>
1<script src="/_next/static/chunks/8500-3953cc33eeceb44e.js" async=""></script>
1<script src="/_next/static/chunks/2729-580ec861a207bf15.js" async=""></script>
1<script src="/_next/static/chunks/131-f2c79c4356e488ae.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-e369cc359ea1521d.js" async=""></script>
1<script src="/_next/static/chunks/app/not-found-299f445d6f41dff8.js" async=""></script>
1<script src="/_next/static/chunks/6476-641ae5f9f7cfe0ea.js" async=""></script>
1<script src="/_next/static/chunks/app/guide/beginner/page-373d78baa620d700.js" async=""></script>
1<link rel="preload" href="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1761896090723833" as="script" crossorigin=""/><link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-H3B92CRD17" as="script"/><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous"/><title>Web Development Beginner Guide — How to Start | OPEN HYPER STEP</title><meta name="description" content="A roadmap for first-time web developers. What to learn, in what order — from HTML5 to React, step by step."/><meta name="author" content="OPEN HYPER STEP"/><meta name="keywords" content="free coding bootcamp,learn web development,AI orchestration tutorial,free programming course,HTML CSS JavaScript,React Next.js TypeScript,AI product manager,solo founder coding,interactive coding course,learn to code free,AI for developers,prompt engineering,frontend backend full stack,AI automation,indie hacker,Vue,Node.js,Express,MongoDB,PostgreSQL,Supabase,Docker,Python,Java Spring Boot,LangChain RAG agents,code deletion learning,learn by breaking code,AI directing language,solopreneur tech stack,AI workflow tutorial,monetization course,product manager bootcamp,whitehat security course,devops for solo founders"/><meta name="creator" content="OPEN HYPER STEP"/><meta name="publisher" content="OPEN HYPER STEP"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><meta name="google-adsense-account" content="ca-pub-1761896090723833"/><link rel="canonical" href="https://openhyperstep.com/guide/beginner"/><meta name="google-site-verification" content="BEw67_Qycb8_auW8WJWHQjNfR7deGCHToChXKKm38xc"/><meta name="google-site-verification" content="2o6aGcjmRiYs-oqM8099fsbu44nGgsMQD1eFvojlVkw"/><meta property="og:title" content="Web Development Beginner Guide — How to Start"/><meta property="og:description" content="A roadmap for first-time web developers — from HTML5 to React, step by step."/><meta property="og:url" content="https://openhyperstep.com/guide/beginner"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="OPEN HYPER STEP — Free Coding Bootcamp"/><meta name="twitter:description" content="1,258 free chapters · HTML5 to AI Orchestration · Don&#x27;t memorize coding, learn to direct AI."/><meta name="twitter:image" content="https://openhyperstep.com/og-image.png"/><link rel="icon" href="/favicon.ico?603d046c9a6fdfbb" type="image/x-icon" sizes="16x16"/>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body class="min-h-full flex flex-col"><div hidden=""><!--$--><!--/$--></div>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"EducationalOrganization","name":"OPEN HYPER STEP","url":"https://openhyperstep.com","description":"Free coding bootcamp with 1,258 chapters from HTML5 to AI Orchestration.","inLanguage":["en","ko"],"educationalCredentialAwarded":"Self-paced learning","courseMode":"online"}</script>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("data-theme","theme","light",null,["light","dark"],null,false,true)</script>
1<div style="display:flex;max-width:1400px;margin:0 auto;padding:0 16px;gap:32px"><main style="flex:1;min-width:0"><header data-nav-root="true" style="position:sticky;top:0;z-index:50;height:52px;background:var(--color-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(99,102,241,0.15);box-shadow:none;transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;gap:8px"><a style="text-decoration:none;flex-shrink:0" href="/"><span style="font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:0.02em"><span style="color:#6366f1">OPEN</span> <span style="color:var(--color-text)">HYPER</span> <span style="color:#f59e0b">STEP</span></span></a><nav class="header-nav-desktop" style="align-items:center;gap:0px;flex:1;justify-content:center"><a style="font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);text-decoration:none;letter-spacing:0.12em;padding:6px 10px;transition:color 0.2s;white-space:nowrap" href="/about">사이트소개</a><div style="position:relative"><button style="background:transparent;border:none;font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);letter-spacing:0.12em;padding:6px 10px;cursor:pointer;transition:color 0.2s;white-space:nowrap">학습하기<!-- --> ▾</button></div><a style="font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);text-decoration:none;letter-spacing:0.12em;padding:6px 10px;transition:color 0.2s;white-space:nowrap" href="/feedback">사이트 피드백</a></nav><div style="display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:nowrap"><span style="width:6px;height:6px;border-radius:50%;background:#10b981;display:inline-block;animation:blink 1.2s infinite;flex-shrink:0"></span><div style="position:relative"><button aria-label="최신 업데이트" aria-expanded="false" style="position:relative;background:transparent;border:1px solid var(--color-border);color:var(--text-secondary);padding:4px 8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s;line-height:0"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 15 14" stroke-linecap="round" stroke-linejoin="round"></polyline></svg><span style="position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:#ef4444;animation:blink 1.2s infinite"></span></button></div><button style="background:transparent;border:1px solid var(--color-border);color:var(--text-secondary);font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;padding:4px 10px;cursor:pointer;transition:all 0.2s;white-space:nowrap">☀️ 라이트</button><div style="position:relative;z-index:2;flex-shrink:0"><button style="background:transparent;border:1px solid rgba(99,102,241,0.2);color:rgba(99,102,241,0.6);font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;padding:4px 8px;cursor:pointer;transition:all 0.2s;white-space:nowrap">🇰🇷<!-- --> <!-- -->KO</button></div><button class="header-search-btn" style="background:transparent;border:1px solid var(--color-border);color:var(--text-muted);font-family:var(--font-mono);font-size:11px;padding:4px 10px;cursor:pointer;letter-spacing:0.08em;display:flex;align-items:center;gap:5px;transition:all 0.2s">🔍 <span class="search-label">검색</span></button><button class="header-hamburger" style="background:transparent;border:1px solid rgba(99,102,241,0.2);color:#6366f1;font-size:14px;width:32px;height:32px;cursor:pointer;align-items:center;justify-content:center">☰</button></div></header><div style="min-height:calc(100vh - 52px);background:var(--bg-primary);color:var(--text-primary)"><div style="max-width:760px;margin:0 auto;padding:2rem 1.5rem 4rem"><a style="display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);border:1px solid var(--color-border);border-radius:6px;padding:5px 12px;text-decoration:none;margin-bottom:2.5rem;transition:all 0.2s" href="/">← 홈으로</a><div style="margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--color-border)"><div style="font-family:var(--font-mono);font-size:9px;color:#f59e0b;letter-spacing:0.3em;margin-bottom:1rem;text-transform:uppercase">🔰 BEGINNER GUIDE</div><h1 style="font-family:var(--font-display);font-weight:700;font-size:clamp(28px, 5vw, 44px);color:var(--text-primary);line-height:1.15;margin-bottom:1rem;letter-spacing:-0.01em">처음 시작하는 분을<br/>위한 6주 로드맵</h1><p style="font-family:var(--font-mono);font-size:15px;color:#6366f1;letter-spacing:0.05em">&quot;외우지 말고, 이해하고, 바로 만드세요&quot;</p></div><section style="margin-bottom:3.5rem"><div style="font-family:var(--font-mono);font-size:9px;color:rgba(99,102,241,0.4);letter-spacing:0.25em;margin-bottom:1rem;text-transform:uppercase">── SECTION 01 ──</div><h2 style="font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--text-primary);margin-bottom:1.5rem">코딩은 외우는 게 아닙니다</h2><div style="border-left:3px solid #f59e0b;padding-left:1.5rem;margin-bottom:1.5rem"><p style="font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);line-height:2.2">많은 분들이 코딩을 시작할 때 모든 문법을 다 외우려고 합니다.<br/>HTML 태그 외우고, CSS 속성 외우고, JavaScript 메서드 외우고...</p><p style="font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);line-height:2.2;margin-top:1rem">그러다 6개월이 지나도 아무것도 못 만들고 포기합니다.</p></div><div style="background:rgba(99,102,241,0.04);border:1px solid rgba(99,102,241,0.15);border-left:3px solid #6366f1;padding:1.25rem 1.5rem;margin-bottom:1.5rem"><div style="font-family:var(--font-display);font-weight:700;font-size:14px;color:#6366f1;margin-bottom:0.75rem">OPEN HYPER STEP의 방식은 다릅니다</div><div style="font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);line-height:1.9;display:flex;gap:8px"><span style="color:#10b981;flex-shrink:0">✅</span><span>이론은 &quot;이런 게 있구나&quot; 수준으로만</span></div><div style="font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);line-height:1.9;display:flex;gap:8px"><span style="color:#10b981;flex-shrink:0">✅</span><span>막히면 그때 찾아보면 됩니다</span></div><div style="font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);line-height:1.9;display:flex;gap:8px"><span style="color:#10b981;flex-shrink:0">✅</span><span>프로젝트를 만들면서 자연스럽게 익힙니다</span></div></div><p style="font-family:var(--font-mono);font-size:13px;color:var(--text-muted);line-height:2;font-style:italic">의사도 의학책을 다 외우지 않습니다. 필요할 때 찾아보면서 치료합니다. 개발도 마찬가지입니다.</p></section><section style="margin-bottom:3.5rem"><div style="font-family:var(--font-mono);font-size:9px;color:rgba(99,102,241,0.4);letter-spacing:0.25em;margin-bottom:1rem;text-transform:uppercase">── SECTION 02 ──</div><h2 style="font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--text-primary);margin-bottom:2rem">이 순서로 따라오세요</h2><div style="display:flex;flex-direction:column;gap:12px"><div style="padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-left:4px solid #f59e0b"><div style="display:flex;align-items:center;gap:12px;margin-bottom:10px"><span style="font-family:var(--font-mono);font-size:10px;color:#f59e0b;letter-spacing:0.15em;flex-shrink:0">1주차</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">HTML5 기초</span></div><div style="display:flex;gap:24px;flex-wrap:wrap"><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">할 것</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);line-height:1.9">→ <!-- -->HTML5 Ch.1~8 — DOCTYPE, 시맨틱 태그, 텍스트 요소, 폼 기초</div></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">핵심</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->웹 페이지의 뼈대를 이해한다</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->태그는 의미를 담는 그릇이다</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->외울 필요 없음, 흐름만</div></div></div></div><div style="padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-left:4px solid #f59e0b"><div style="display:flex;align-items:center;gap:12px;margin-bottom:10px"><span style="font-family:var(--font-mono);font-size:10px;color:#f59e0b;letter-spacing:0.15em;flex-shrink:0">2주차</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">HTML5 완성 + CSS3 시작</span></div><div style="display:flex;gap:24px;flex-wrap:wrap"><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">할 것</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);line-height:1.9">→ <!-- -->HTML5 Ch.9~15 — 멀티미디어, 폼 검증, 로컬스토리지</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);line-height:1.9">→ <!-- -->CSS3 Ch.1~5 — 박스모델, 선택자</div></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">핵심</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->HTML 전 챕터 완료 체크</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->CSS 레이아웃 원리 첫 접촉</div></div></div></div><div style="padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-left:4px solid #3b82f6"><div style="display:flex;align-items:center;gap:12px;margin-bottom:10px"><span style="font-family:var(--font-mono);font-size:10px;color:#3b82f6;letter-spacing:0.15em;flex-shrink:0">3주차</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">CSS3 완성</span></div><div style="display:flex;gap:24px;flex-wrap:wrap"><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">할 것</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);line-height:1.9">→ <!-- -->CSS3 Ch.6~30 — Flexbox, Grid, 애니메이션, 반응형</div></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">핵심</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->레이아웃을 자유롭게 구성한다</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->모바일/데스크탑 양쪽 대응</div></div></div></div><div style="padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-left:4px solid #eab308"><div style="display:flex;align-items:center;gap:12px;margin-bottom:10px"><span style="font-family:var(--font-mono);font-size:10px;color:#eab308;letter-spacing:0.15em;flex-shrink:0">4주차</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">JavaScript 기초</span></div><div style="display:flex;gap:24px;flex-wrap:wrap"><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">할 것</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);line-height:1.9">→ <!-- -->JS Ch.1~12 — 변수, 함수, 조건문, 반복문, DOM 조작</div></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">핵심</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->버튼 클릭에 반응하는 페이지</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);line-height:1.9">→ <!-- -->데이터를 저장하고 꺼낸다</div></div></div></div><div style="padding:1.25rem 1.5rem;background:rgba(16,185,129,0.05);border:1px solid rgba(16,185,129,0.3);border-left:4px solid #10b981"><div style="display:flex;align-items:center;gap:12px;margin-bottom:10px"><span style="font-family:var(--font-mono);font-size:10px;color:#10b981;letter-spacing:0.15em;flex-shrink:0">5~6주차</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">JavaScript 완성 + React 입문</span></div><div style="display:flex;gap:24px;flex-wrap:wrap"><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">할 것</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);line-height:1.9">→ <!-- -->JS Ch.13~30 — 비동기, API, ES6+</div><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);line-height:1.9">→ <!-- -->React Ch.1~5 — 컴포넌트, props, state</div></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:5px">핵심</div><div style="font-family:var(--font-mono);font-size:12px;color:#10b981;line-height:1.9">→ <!-- -->
1외부 데이터(날씨, 뉴스) 불러오기</div><div style="font-family:var(--font-mono);font-size:12px;color:#10b981;line-height:1.9">→ <!-- -->React의 왜 필요한지 체감</div></div></div></div></div></section><section style="margin-bottom:3.5rem"><div style="font-family:var(--font-mono);font-size:9px;color:rgba(99,102,241,0.4);letter-spacing:0.25em;margin-bottom:1rem;text-transform:uppercase">── SECTION 03 ──</div><h2 style="font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--text-primary);margin-bottom:0.5rem">지금 바로 시작하는 Todo 앱</h2><p style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-bottom:2rem;line-height:1.8">아래 순서대로 따라하면 오늘 안에 첫 앱 완성 가능합니다.</p><div style="margin-bottom:1.5rem;padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-top:3px solid #10b981"><div style="display:flex;align-items:center;gap:10px;margin-bottom:8px"><span style="font-family:var(--font-mono);font-size:10px;color:#10b981;letter-spacing:0.15em">Step 1</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">환경 준비 (5분)</span></div><p style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.7">GitHub Codespaces — 로컬 설치 없이 브라우저에서 바로 시작</p><div style="position:relative;margin-top:12px"><pre style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--color-border);border-left:3px solid #6366f1;padding:14px 50px 14px 16px;margin:0;overflow-x:auto;line-height:1.8;white-space:pre-wrap"># Next.js 프로젝트 생성
2npx create-next-app@latest my-todo-app
3cd my-todo-app
4npm run dev</pre><button style="position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:8px;color:#6366f1;background:transparent;border:1px solid rgba(99,102,241,0.2);padding:3px 8px;cursor:pointer;letter-spacing:0.1em;transition:all 0.2s">COPY</button></div></div><div style="margin-bottom:1.5rem;padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-top:3px solid #6366f1"><div style="display:flex;align-items:center;gap:10px;margin-bottom:8px"><span style="font-family:var(--font-mono);font-size:10px;color:#6366f1;letter-spacing:0.15em">Step 2</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">AI에게 시작 요청 (1분)</span></div><p style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.7">Gemini 또는 Claude에 아래 프롬프트 붙여넣기</p><div style="position:relative;margin-top:12px"><pre style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--color-border);border-left:3px solid #6366f1;padding:14px 50px 14px 16px;margin:0;overflow-x:auto;line-height:1.8;white-space:pre-wrap">나는 코딩을 처음 배우는 초보자야.
5Next.js 14로 Todo 앱을 만들고 싶어.
6
7기능:
8- 할일 추가
9- 완료 체크
10- 삭제
11
12Tailwind CSS로 깔끔하게
13초보자도 이해할 수 있게 주석 달아서
14코드 작성해줘.</pre><button style="position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:8px;color:#6366f1;background:transparent;border:1px solid rgba(99,102,241,0.2);padding:3px 8px;cursor:pointer;letter-spacing:0.1em;transition:all 0.2s">COPY</button></div></div><div style="margin-bottom:1.5rem;padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-top:3px solid #f59e0b"><div style="display:flex;align-items:center;gap:10px;margin-bottom:8px"><span style="font-family:var(--font-mono);font-size:10px;color:#f59e0b;letter-spacing:0.15em">Step 3</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">코드 적용 &amp; 실행</span></div><p style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.7">AI가 만든 코드를 복붙 → 실행 확인</p><div style="position:relative;margin-top:12px"><pre style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--color-border);border-left:3px solid #6366f1;padding:14px 50px 14px 16px;margin:0;overflow-x:auto;line-height:1.8;white-space:pre-wrap">npm run dev
15# → http://localhost:3000 에서 확인</pre><button style="position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:8px;color:#6366f1;background:transparent;border:1px solid rgba(99,102,241,0.2);padding:3px 8px;cursor:pointer;letter-spacing:0.1em;transition:all 0.2s">COPY</button></div></div><div style="margin-bottom:1.5rem;padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-top:3px solid #8b5cf6"><div style="display:flex;align-items:center;gap:10px;margin-bottom:8px"><span style="font-family:var(--font-mono);font-size:10px;color:#8b5cf6;letter-spacing:0.15em">Step 4</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">기능 추가해보기</span></div><p style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.7">여기서 실력이 성장합니다</p><div style="position:relative;margin-top:12px"><pre style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--color-border);border-left:3px solid #6366f1;padding:14px 50px 14px 16px;margin:0;overflow-x:auto;line-height:1.8;white-space:pre-wrap">&quot;마감일 추가 기능 넣어줘&quot;
16&quot;완료된 항목 숨기기 버튼 추가해줘&quot;
17&quot;로컬스토리지에 저장하게 해줘&quot;</pre><button style="position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:8px;color:#6366f1;background:transparent;border:1px solid rgba(99,102,241,0.2);padding:3px 8px;cursor:pointer;letter-spacing:0.1em;transition:all 0.2s">COPY</button></div></div><div style="margin-bottom:1.5rem;padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-top:3px solid #3b82f6"><div style="display:flex;align-items:center;gap:10px;margin-bottom:8px"><span style="font-family:var(--font-mono);font-size:10px;color:#3b82f6;letter-spacing:0.15em">Step 5</span><span style="font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)">Vercel 배포 (5분)</span></div><p style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.7">전 세계 접속 가능한 나만의 앱 완성</p><div style="position:relative;margin-top:12px"><pre style="font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--color-border);border-left:3px solid #6366f1;padding:14px 50px 14px 16px;margin:0;overflow-x:auto;line-height:1.8;white-space:pre-wrap">npm install -g vercel
18vercel
19# → https://my-todo-app-xxxx.vercel.app</pre><button style="position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:8px;color:#6366f1;background:transparent;border:1px solid rgba(99,102,241,0.2);padding:3px 8px;cursor:pointer;letter-spacing:0.1em;transition:all 0.2s">COPY</button></div></div></section><section style="margin-bottom:3.5rem"><div style="font-family:var(--font-mono);font-size:9px;color:rgba(99,102,241,0.4);letter-spacing:0.25em;margin-bottom:1rem;text-transform:uppercase">── SECTION 04 ──</div><h2 style="font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--text-primary);margin-bottom:1.5rem">자주 하는 실수 3가지</h2><div style="display:flex;flex-direction:column;gap:12px"><div style="padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-left:3px solid #ef4444"><div style="font-family:var(--font-mono);font-size:13px;color:var(--text-primary);margin-bottom:8px;font-weight:700">❌<!-- -->  <!-- -->다 외우려 한다</div><div style="font-family:var(--font-mono);font-size:12px;color:#10b981;line-height:1.8;display:flex;gap:8px"><span style="flex-shrink:0">→</span><span>나중에 필요할 때 찾으면 됩니다. HTML 속성 300개 외우는 사람은 없어요.</span></div></div><div style="padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-left:3px solid #ef4444"><div style="font-family:var(--font-mono);font-size:13px;color:var(--text-primary);margin-bottom:8px;font-weight:700">❌<!-- -->  <!-- -->완벽한 코드를 쓰려 한다</div><div style="font-family:var(--font-mono);font-size:12px;color:#10b981;line-height:1.8;display:flex;gap:8px"><span style="flex-shrink:0">→</span><span>일단 작동하면 됩니다. 완벽은 나중에 — 동작하는 코드가 항상 우선입니다.</span></div></div><div style="padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--color-border);border-left:3px solid #ef4444"><div style="font-family:var(--font-mono);font-size:13px;color:var(--text-primary);margin-bottom:8px;font-weight:700">❌<!-- -->  <!-- -->혼자 너무 오래 고민한다</div><div style="font-family:var(--font-mono);font-size:12px;color:#10b981;line-height:1.8;display:flex;gap:8px"><span style="flex-shrink:0">→</span><span>30분 막히면 AI에게 물어보세요. 검색과 질문이 개발자의 핵심 역량입니다.</span></div></div></div></section><div style="display:flex;gap:12px;flex-wrap:wrap"><a style="flex:1;
19min-width:200px;display:block;text-align:center;padding:14px 24px;background:#f59e0b;color:#000;font-family:var(--font-display);font-weight:700;font-size:13px;text-decoration:none;letter-spacing:0.05em;transition:opacity 0.2s" href="/theory/html5/1">HTML5 챕터 1 시작하기 →</a><button style="flex:1;min-width:200px;padding:14px 24px;background:transparent;border:1px solid #6366f1;color:#6366f1;font-family:var(--font-mono);font-size:13px;cursor:pointer;letter-spacing:0.05em;transition:all 0.2s">Todo 앱 프롬프트 복사하기</button></div></div></div><!--$--><!--/$--></main></div><footer style="border-top:1px solid var(--color-border);margin-top:4rem"><div style="max-width:1400px;margin:0 auto;padding:3rem 16px 0"><div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));gap:2rem;margin-bottom:3rem"><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px">프론트엔드</div><ul style="list-style:none;margin:0;padding:0"><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/html5/1">HTML5</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/css3/1">CSS3</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/js/1">JavaScript</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/react/1">React</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/vue/1">Vue</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/ts/1">TypeScript</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/nextjs/1">Next.js</a></li></ul></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px">백엔드</div><ul style="list-style:none;margin:0;padding:0"><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/nodejs/1">Node.js</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/express/1">Express</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/java/1">Java</a></li></ul></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px">DB · 인프라</div><ul style="list-style:none;margin:0;padding:0"><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/mongodb/1">MongoDB</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/postgresql/1">PostgreSQL</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/mysql/1">MySQL</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/redis/1">Redis</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/supabase/1">Supabase</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/docker/1">Docker</a></li></ul></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px">AI · 보안</div><ul style="list-style:none;margin:0;padding:0"><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/ai-intro/1">AI 입문</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/ai-orchestration/1">AI Orchestration</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/security/1">보안</a></li></ul></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px">기획 · 수익</div><ul style="list-style:none;margin:0;padding:0"><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/project-plan/1">프로젝트 기획</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/real-project/1">실전 프로젝트</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/theory/monetization/1">수익화</a></li></ul></div><div><div style="font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px">가이드</div><ul style="list-style:none;margin:0;padding:0"><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/guide/beginner">처음 시작하는 분</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/guide/employment">취업 준비 중인 분</a></li><li style="margin-bottom:7px"><a style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/guide/ai-service">AI 서비스 만들기</a></li></ul></div></div><div style="border-top:1px solid var(--color-border);padding-top:1.25rem;padding-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px"><span style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:0.1em">© <!-- -->2026<!-- --> OPEN HYPER STEP. All rights reserved.</span><div style="display:flex;gap:16px;flex-wrap:wrap"><a style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/extension">확장 프로그램</a><a style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/refund">환불 정책</a><a style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/privacy">개인정보처리방침</a><a style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/terms">이용약관</a><a style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/copyright">저작권</a><a style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-decoration:none;letter-spacing:0.05em;transition:color 0.15s" href="/contact">문의</a></div></div></div></footer>
19<script src="/_next/static/chunks/webpack-e05baeb5bb66a737.js" id="_R_" async=""></script>
19<script>(self.__next_f=self.__next_f||[]).push([0])</script>
19<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[2593,[\"5730\",\"static/chunks/44530001-37743725acffb95d.js\",\"8500\",\"static/chunks/8500-3953cc33eeceb44e.js\",\"2729\",\"static/chunks/2729-580ec861a207bf15.js\",\"131\",\"static/chunks/131-f2c79c4356e488ae.js\",\"7177\",\"static/chunks/app/layout-e369cc359ea1521d.js\"],\"\"]\n3:I[9512,[\"5730\",\"static/chunks/44530001-37743725acffb95d.js\",\"8500\",\"static/chunks/8500-3953cc33eeceb44e.js\",\"2729\",\"static/chunks/2729-580ec861a207bf15.js\",\"131\",\"static/chunks/131-f2c79c4356e488ae.js\",\"7177\",\"static/chunks/app/layout-e369cc359ea1521d.js\"],\"default\"]\n4:I[7141,[\"5730\",\"static/chunks/44530001-37743725acffb95d.js\",\"8500\",\"static/chunks/8500-3953cc33eeceb44e.js\",\"2729\",\"static/chunks/2729-580ec861a207bf15.js\",\"131\",\"static/chunks/131-f2c79c4356e488ae.js\",\"7177\",\"static/chunks/app/layout-e369cc359ea1521d.js\"],\"ThemeProvider\"]\n5:I[7121,[],\"\"]\n6:I[4581,[],\"\"]\n7:I[3764,[\"8500\",\"static/chunks/8500-3953cc33eeceb44e.js\",\"4345\",\"static/chunks/app/not-found-299f445d6f41dff8.js\"],\"default\"]\n8:I[2539,[\"5730\",\"static/chunks/44530001-37743725acffb95d.js\",\"8500\",\"static/chunks/8500-3953cc33eeceb44e.js\",\"2729\",\"static/chunks/2729-580ec861a207bf15.js\",\"131\",\"static/chunks/131-f2c79c4356e488ae.js\",\"7177\",\"static/chunks/app/layout-e369cc359ea1521d.js\"],\"default\"]\n9:I[1304,[],\"ClientPageRoot\"]\na:I[5896,[\"5730\",\"static/chunks/44530001-37743725acffb95d.js\",\"8500\",\"static/chunks/8500-3953cc33eeceb44e.js\",\"2729\",\"static/chunks/2729-580ec861a207bf15.js\",\"131\",\"static/chunks/131-f2c79c4356e488ae.js\",\"6476\",\"static/chunks/6476-641ae5f9f7cfe0ea.js\",\"5524\",\"static/chunks/app/guide/beginner/page-373d78baa620d700.js\"],\"default\"]\nd:I[484,[],\"OutletBoundary\"]\ne:\"$Sreact.suspense\"\n11:I[484,[],\"ViewportBoundary\"]\n13:I[484,[],\"MetadataBoundary\"]\n15:I[7123,[],\"default\",1]\n:HL[\"/_next/static/css/3fb105a89b184db1.css\",\"style\"]\n"])</script>
19<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"guide\",\"beginner\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"guide\",{\"children\":[\"beginner\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3fb105a89b184db1.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"ko\",\"className\":\"h-full antialiased\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-full flex flex-col\",\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://cdn.jsdelivr.net\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"$L2\",null,{\"id\":\"google-adsense\",\"src\":\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1761896090723833\",\"strategy\":\"afterInteractive\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"EducationalOrganization\\\",\\\"name\\\":\\\"OPEN HYPER STEP\\\",\\\"url\\\":\\\"https://openhyperstep.com\\\",\\\"description\\\":\\\"Free coding bootcamp with 1,258 chapters from HTML5 to AI Orchestration.\\\",\\\"inLanguage\\\":[\\\"en\\\",\\\"ko\\\"],\\\"educationalCredentialAwarded\\\":\\\"Self-paced learning\\\",\\\"courseMode\\\":\\\"online\\\"}\"}}],[\"$\",\"$L3\",null,{}],[\"$\",\"$L2\",null,{\"id\":\"ms-clarity\",\"strategy\":\"afterInteractive\",\"children\":\"(function(c,l,a,r,i,t,y){\\n            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n            t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n          })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"waa0hyw70h\\\");\"}],[\"$\",\"$L4\",null,{\"children\":[[\"$\",\"div\",null,{\"style\":{\"display\":\"flex\",\"maxWidth\":\"1400px\",\"margin\":\"0 auto\",\"padding\":\"0 16px\",\"gap\":\"32px\"},\"children\":[\"$\",\"main\",null,{\"style\":{\"flex\":1,\"minWidth\":0},\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L7\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}],[\"$\",\"$L8\",null,{}]]}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L9\",null,{\"Component\":\"$a\",\"serverProvidedParams\":{\"searchParams\":{},\"params\":{},\"promises\":[\"$@b\",\"$@c\"]}}],null,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$e\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@f\"}]}]]}],{},null,false,null]},null,false,null]},null,false,\"$@10\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L11\",null,{\"children\":\"$L12\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L13\",null,{\"children\":[\"$\",\"$e\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L14\"}]}]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$15\",[]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"8ke1n7ZbzZ6GLdjFswW3P\"}\n"])</script>
19<script>self.__next_f.push([1,"16:[]\n10:\"$W16\"\nb:{}\nc:\"$0:f:0:1:1:children:1:children:1:children:0:props:children:0:props:serverProvidedParams:params\"\n"])</script>
19<script>self.__next_f.push([1,"12:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
19<script>self.__next_f.push([1,"17:I[6869,[],\"IconMark\"]\nf:null\n"])</script>
19<script>self.__next_f.push([1,"14:[[\"$\",\"title\",\"0\",{\"children\":\"Web Development Beginner Guide — How to Start | OPEN HYPER STEP\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A roadmap for first-time web developers. What to learn, in what order — from HTML5 to React, step by step.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"OPEN HYPER STEP\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"free coding bootcamp,learn web development,AI orchestration tutorial,free programming course,HTML CSS JavaScript,React Next.js TypeScript,AI product manager,solo founder coding,interactive coding course,learn to code free,AI for developers,prompt engineering,frontend backend full stack,AI automation,indie hacker,Vue,Node.js,Express,MongoDB,PostgreSQL,Supabase,Docker,Python,Java Spring Boot,LangChain RAG agents,code deletion learning,learn by breaking code,AI directing language,solopreneur tech stack,AI workflow tutorial,monetization course,product manager bootcamp,whitehat security course,devops for solo founders\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"OPEN HYPER STEP\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"OPEN HYPER STEP\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"8\",{\"name\":\"google-adsense-account\",\"content\":\"ca-pub-1761896090723833\"}],[\"$\",\"link\",\"9\",{\"rel\":\"canonical\",\"href\":\"https://openhyperstep.com/guide/beginner\"}],[\"$\",\"meta\",\"10\",{\"name\":\"google-site-verification\",\"content\":\"BEw67_Qycb8_auW8WJWHQjNfR7deGCHToChXKKm38xc\"}],[\"$\",\"meta\",\"11\",{\"name\":\"google-site-verification\",\"content\":\"2o6aGcjmRiYs-oqM8099fsbu44nGgsMQD1eFvojlVkw\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:title\",\"content\":\"Web Development Beginner Guide — How to Start\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:description\",\"content\":\"A roadmap for first-time web developers — from HTML5 to React, step by step.\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:url\",\"content\":\"https://openhyperstep.com/guide/beginner\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:title\",\"content\":\"OPEN HYPER STEP — Free Coding Bootcamp\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:description\",\"content\":\"1,258 free chapters · HTML5 to AI Orchestration · Don't memorize coding, learn to direct AI.\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:image\",\"content\":\"https://openhyperstep.com/og-image.png\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?603d046c9a6fdfbb\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"$L17\",\"20\",{}]]\n"])</script>
19</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.