설치 → 시작하기 → 빠른 시작 → 랜딩페이지 → 복잡한 웹사이트 만들기
본 강의의 비주얼 가이드들을 순서대로 확인하세요
처음 시작하는 분이라면 위에서 아래로 순서대로 따라가시면 됩니다.
Claude.ai 회원가입·요금제 안내부터 Windows(PowerShell)·macOS(iTerm2) 환경별 설치 명령어, 첫 실행과 로그인까지. iTerm2 첫 셋업 팁 포함.
"폴더 = 프로젝트" 개념과 IT 기본 용어(권한·맥락·토큰·경로 등). 작업 폴더 만들기 → cd → claude 실행 흐름 + Shift+Enter 편의 설정 (VSCode·iTerm2).
실습 전 핵심 3가지: 요청→확인→수정 워크플로우, --dangerously-skip-permissions · --resume 옵션, 프롬프트 작성 3원칙.
HTML/CSS/JS 기본 → 텍스트·워드 파일 활용 → 웹 용어 → 상세 프롬프트 → 잔재미코딩 학습자 서베이 이벤트 랜딩페이지 실전 예제.
정적 페이지를 넘어 회원가입 · 결제 · 관리자까지 갖춘 실전 웹사이트 만들기. Supabase × 토스페이먼츠 연동 — 실전에서 쓴 프롬프트 그대로 공개.
랜딩페이지 실습 중 용어가 헷갈리거나, 다 만든 페이지를 웹에 배포할 때 활용하세요.
헤더·히어로·CTA·모달·아코디언·플로팅 버튼 등 주요 웹 용어를 실제 동작 데모로 보여주는 인터랙티브 페이지. 랜딩페이지 가이드와 함께 띄워두고 비교하면 빠르게 이해됩니다.
만든 랜딩페이지를 누구나 접속할 수 있는 URL로 공개하는 방법. GitHub 가입 → Personal Access Token 발급 → 클로드코드에 한 줄 요청. 실제 화면 캡처 포함 + 프롬프트 빌더 제공.
처음하는 클로드코드 (바이브코딩편·코덱스까지) · 강의 자료 모음
잔재미코딩 fun-coding.org · school.fun-coding.org