WEB DEVELOPMENT · PROJECT20강 학습 가능
웹 프로젝트 기초집
HTML, CSS와 바닐라 JavaScript를 하나의 게임 개발자 포트폴리오로 연결합니다. 홈, 소개, 프로젝트 카드·필터·모달, 연락처 폼과 로컬 테마를 구현하고 GitHub Pages에 공개합니다.
강의 수20강
난이도입문 → 초급
최종 결과물반응형 게임 개발자 포트폴리오
진행률을 불러오는 중...
과정에서 해결하는 문제
문법 예제를 따로 실행하는 데서 끝나지 않고, 콘텐츠 구조·화면 표현·사용자 동작을 분리해 실제 정적 사이트를 완성합니다. 프레임워크와 백엔드는 후속 과정에서 다루며 이 과정에는 서버, 로그인, 데이터베이스와 실제 문의 전송이 없습니다.
선수지식
- 파일과 폴더를 만들고 브라우저에서 HTML을 여는 기초
- 변수, 함수, 배열과 조건문의 의미를 들어 본 경험
- Git 상세 흐름은 Git · GitHub 기초집에서 학습합니다.
개발 환경
- Windows 11, 일반 권한 PowerShell
- VS Code 또는 다른 텍스트 편집기
- Chrome, Edge 또는 Firefox 최신 안정 버전과 개발자 도구
- 선택 사항: Node.js LTS의 간단한 정적 서버. 패키지 없이도 파일을 직접 열어 기본 실습을 진행할 수 있습니다.
버전과 화면 차이
브라우저 메뉴, npm 패키지와 GitHub Pages 화면은 바뀔 수 있습니다. 설치·업데이트 전 MDN 웹 문서와 GitHub Pages 공식 문서를 현재 버전 기준으로 확인하세요.
최종 결과물
Unity 또는 Unreal 게임 3개 이상을 소개하는 정적 포트폴리오를 완성합니다. 프로젝트 필터, 키보드로 닫을 수 있는 상세 모달, 로컬 테마, 검증 전용 문의 폼, 누락 이미지 대체 처리와 모바일 레이아웃을 포함합니다.
20강 학습 순서
- 구조 만들기(1~4강): 역할, 폴더, 시맨틱 HTML, CSS 기초
- 화면 완성하기(5~8강): 레이아웃, 반응형, 색상·글꼴, 이미지
- 상호작용 구현하기(9~15강): 이벤트, 데이터 카드, 메뉴, 모달, 필터, 폼, 로컬 저장
- 품질과 공개(16~20강): 접근성, 디버깅, 성능, Pages 배포, 최종 통합
COURSE ORIENTATION
과정 선택 안내
- 학습 대상
- 웹 기초를 실제 반응형 포트폴리오 한 편으로 통합하려는 학습자
- 선수지식
- HTML, CSS, JavaScript 입문
- 최종 결과물
- 반응형 게임 개발자 포트폴리오
- 추천 다음 과정