프로젝트 구조 | 짐코딩 클럽 온라인 강의

자동 재생
자동 완성

이전 강의 완료하고 계속하기

포트폴리오 사이트 만들고 배포까지!

강의소개, 오리엔테이션

오리엔테이션 (5:49)
강의소개 (0:56)

시작하기 전에

프로젝트 생성 (with Prettier) (5:20)
개발환경 구성 (5:14)
프로젝트 구조 (5:19)
Google Fonts, Font Awesome (6:36)

UI 마크업

전체 구조 마크업 (4:30)
Header 마크업 (5:19)
Home 마크업 : 웹 접근성 향상 (8:54)
About 마크업 (3:22)
Skills 마크업 (9:19)
Work 마크업 (6:16)
Contact 마크업 (2:43)
Footer 마크업 (2:34)

CSS Style

CSS BEM 명명 규칙 (8:56)
CSS 초기화 (4:03)
CSS 변수 (상용자 지정 속성) (6:44)
Header 스타일 (16:41)
Home 스타일 (11:11)
Section 공통, About 스타일 (11:15)
Skills 스타일 (15:35)
Work 스타일 (4:57)
Contact 스타일 (3:16)
Footer, Floating Button 스타일 (9:51)

반응형 웹

Breakpoint, Header 반응형 (18:02)
반응형 웹 적용 (6:34)

자바스크립트, 라이브러리

스크롤시 메뉴 Active 추가 : IntersectionObserver (16:11)
애니메이션 적용 : ScrollReveal (7:28)
부드러운 스트롤 (3:52)
텍스트 타이핑 효과 (7:31)

SEO, Github Pages 배포

SEO, SNS 공유 미리보기 (5:51)
Github Pages 활용 사이트 배포 (7:28)

마무리

축하드립니다 🎉 (꼭 시청해주세요 🔥) (3:05)

Teach online with

프로젝트 구조

완료하고 계속하기

Discussion

0 코멘트