🌐

HOMEPAGE · 64 lessons

5-stage full-stack series: GitHub + Vercel → React/Next.js → Git → a11y → Security

Starting from a first page via GitHub + Vercel, this 5-stage full-stack series walks through HTML/CSS/JavaScript, Node.js/DB/TypeScript/React deep dives, Git collaboration, web a11y and web security.

Open source repo

🌱

Stage 1: First Page — HTML/CSS/JS

GitHub + Vercel로 첫 페이지 배포, 시맨틱 HTML, 모던 CSS, 바닐라 JS 기초

12 lessons

GitHub PagesVercelHTML 시맨틱CSS 레이아웃Vanilla JS폼 검증배포 자동화

View stage →

🎨

Stage 2: Frontend Deep Dive

모던 CSS, 컴포넌트 아키텍처, 클라이언트 사이드 라우팅, 성능

14 lessons

CSS Grid/Flexbox애니메이션반응형컴포넌트 패턴상태 관리라우팅성능 최적화

View stage →

⚙️

Stage 3: Backend — Node.js/DB/TypeScript/React

Node.js/Express, PostgreSQL/Prisma, TypeScript, React/Next.js, 인증, API 설계, 테스트

20 lessons

Node.jsExpressPostgreSQLPrismaTypeScriptReactNext.jsAPI 설계인증테스트

View stage →

🔀

Stage 4: Git Collaboration

Git 브랜치 전략, PR 기반 협업, GitHub Actions CI/CD, 모노레포 관리

10 lessons

브랜치 전략PR 워크플로우코드 리뷰CI/CDGitHub Actions릴리스모노레포

View stage →

🛡

Stage 5: Web Accessibility & Security

웹 접근성(WCAG 2.1/ARIA), 보안(CSP, XSS/CSRF 방지, 보안 헤더)

8 lessons

WCAG 2.1ARIA스크린 리더키보드 네비게이션CSPXSS/CSRFHTTPS보안 헤더

View stage →

Tech Stack Covered

HTML5CSS3JavaScript (ES6+)TypeScriptReactNext.jsNode.jsExpressPostgreSQLPrismaGitGitHub ActionsVercelWCAG 2.1ARIACSPJWTTesting Library