나만의 코딩 유튜브 사이트 만들기 프로젝트
today!

나만의 코딩 유튜브 사이트 만들기 프로젝트

안녕하세요, 여러분! 오늘은 특별한 프로젝트를 소개해드리려고 합니다. 제가 '나만의 코딩 유튜브 사이트 만들기'라는 주제로 프로젝트를 진행하게 되었는데요, 이 프로젝트는 저의 열정인 코딩과 온라인 교육을 결합한 결과물입니다. 이 프로젝트의 주요 목표는 누구나 쉽게 접근하고 배울 수 있는 공간을 만드는 것입니다. 제가 여러 해 동안 프로그래밍을 공부하면서 느낀 점은 양질의 학습 자료와 개인의 진도에 맞는 커리큘럼이 얼마나 중요한지입니다. 그래서 이 사이트에서는 초보자부터 고급 수준까지 다양한 난이도와 주제의 온라인 강의를 제공할 계획입니다.

webstoryboy2023.07.07

😪 추천 개발자를 소개합니다.

😮 웹디자인기능사 준비는 이걸로!

웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(A-1) | 웹스토리보이 | 2023 웹디기
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(A-2) | 웹스토리보이 | 웹디자인기능사
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(A-3) | 웹스토리보이 | 웹디자인기능사 실기
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(A-4) | 웹스토리보이 | 웹디기 독학
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(B-1) | 웹스토리보이 | 웹디자인기능사 무료로 합격하기
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(B-2) | 웹스토리보이 | 웹디자인기능사 실기 독학
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(B-3) | 웹스토리보이 | 웹디자인기능사 실기 just 쇼핑몰
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(B-4) | 웹스토리보이 | 웹디자인기능사 실기 슬라이드
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(C-1) | 웹스토리보이 | 웹디자인기능사 실기
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(C-2) | 웹스토리보이 | 웹디기 독학
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(C-3) | 웹스토리보이 | 웹디자인 | 웹퍼블리셔
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(C-4) | 웹스토리보이 | 웹디자인기능사 레이아웃
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-1) | 웹스토리보이 | 웹디자인기능사 실기 포토샵
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-2) | 웹스토리보이 | 웹디자인기능사 실기 기출문제
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-3) | 웹스토리보이 | 웹웹디자인기능사 실기 2023
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-4) | 웹스토리보이 | 웹디자인기능사 실기 후기
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(E-1) | 웹스토리보이 | 웹디자인기능사 실기 d유형
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(E-2) | 웹스토리보이 | 웹디자인기능사 실기 비주얼스튜디오
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(E-3) | 웹스토리보이 | 웹디자인기능사 실기 기출문제
웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(E-4) | 웹스토리보이 | 웹디기 레이아웃
웹디자인기능사 2023년 실기 강의 : 메뉴 가로 유형(M-1) | 웹스토리보이 | 메뉴 제이쿼리
웹디자인기능사 2023년 실기 강의 : 메뉴 가로 유형(M-2) | 웹스토리보이 | 자바스크립트
웹디자인기능사 2023년 실기 강의 : 메뉴 가로 유형(M-3) | 웹스토리보이 | 메뉴 가로 스크립트
웹디자인기능사 2023년 실기 강의 : 메뉴 세로 유형(M-4) | 웹스토리보이 | 메뉴 스크립트
웹디자인기능사 2023년 실기 강의 : 메뉴 세로 유형(M-5) | 웹스토리보이 | 메뉴 제이쿼리
웹디자인기능사 2023년 실기 강의 : 메뉴 세로 유형(M-6) | 웹스토리보이 | 메뉴 자바스크립트
웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-1) | 웹스토리보이 | 이미지 슬라이드
웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-2) | 웹스토리보이 | 이미지 슬라이드 자바스크립트
웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-3) | 웹스토리보이 | 이미지 슬라이드 제이쿼리
웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-4) | 웹스토리보이 | 이미지 슬라이드 페이드 효과 반응형
웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-5) | 웹스토리보이 | 이미지 슬라이드 좌우 반응형
웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-6) | 웹스토리보이 | 이미지 슬라이드 위아래 반응형
웹디자인기능사 2023년 실기 강의 : 탭메뉴 유형(T-1) | 웹스토리보이 | 탭 메뉴 스크립트
웹디자인기능사 2023년 실기 강의 : 팝업 유형(P-1) | 웹스토리보이 | 팝업 | 레이어 팝업
웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : A유형
웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : B유형
웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : C유형
웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : D유형
웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : E유형

😛 웹표준 사이트 만들기 기초 다지기

01. 웹표준 사이트 만들기 : 디자인 : 헤더 유형01 / 피그마(Figma)로 작업하기 / 웹스토리보이
02. 웹표준 사이트 만들기 : 디자인 : 슬라이드 유형01 / 피그마(Figma)로 작업하기 / 웹스토리보이
03. 웹표준 사이트 만들기 : 디자인 : 이미지 유형01 / 피그마(Figma)로 작업하기 / 웹사이트 만들기
04. 웹표준 사이트 만들기 : 디자인 : 이미지/텍스트 유형01 / 피그마(Figma)로 작업하기 / 사이트 만들기
05. 웹표준 사이트 만들기 : 디자인 : 카드 유형01 / 피그마(Figma)로 작업하기 / 나도코딩
06. 웹표준 사이트 만들기 : 디자인 : 배너 유형01 / 피그마(Figma)로 작업하기 / 코딩 기초
07. 웹표준 사이트 만들기 : 디자인 : 텍스트 유형01 / 피그마(Figma)로 작업하기 / 코딩 독학
08. 웹표준 사이트 만들기 : 디자인 : 푸터 유형01  / 피그마(Figma)로 작업하기 / 피그마 강의
09. 웹표준 사이트 만들기 : 디자인 : 완성 / 피그마(Figma)로 작업하기 / 피그마 기초
10. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형01 / 홈페이지 만들기 / 웹스토리보이
11. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형02 / 웹사이트 만들기 / HTML / CSS
12. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형03 / 웹사이트 만들기 / JavaScript / CSS
13. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형04 / 웹사이트 만들기 / JavaScript / CSS
14. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형05 / 웹사이트 만들기 / Grid / Flex / Float
15. 웹표준 사이트 만들기 : 코딩 : 헤더 유형01 / 웹사이트 만들기 / 웹퍼블리셔 / 포트폴리오
16. 웹표준 사이트 만들기 : 코딩 : 슬라이드 유형01 / 웹사이트 만들기 / 웹 퍼블리셔 / 포트폴리오
17. 웹표준 사이트 만들기 : 코딩 : 이미지 유형01 / 웹사이트 만들기 / HTML 기초
18. 웹표준 사이트 만들기 : 코딩 : 이미지/텍스트 유형01 / 웹사이트 만들기 / CSS 기초
19. 웹표준 사이트 만들기 : 코딩 : 카드 유형01 / 웹사이트 만들기 / CSS 강의 / HTML 강의
20. 웹표준 사이트 만들기 : 코딩 : 배너 유형01 / 웹사이트 만들기 / CSS 강의 / HTML 강의
21. 웹표준 사이트 만들기 : 코딩 : 텍스트 유형01 / 웹사이트 만들기 / HTML / CSS / JAVASCRIPT
22. 웹표준 사이트 만들기 : 코딩 : 푸터 유형01  / 웹사이트 만들기 / HTML 웹사이트 만들기
22. 웹표준 사이트 만들기 : 코딩 : 푸터 유형01  / 웹사이트 만들기 / HTML 웹사이트 만들기

🤓 GSAP 패럴랙스 효과를 하고 싶다면!

01. GSAP Parallax Effect : 기본 애니메이션(feat. scrollTrigger) |  웹스토리보이
02. GSAP Parallax Effect : PIN 애니메이션(feat. scrollTrigger) | 웹스토리보이 |  포트폴리오
03. GSAP Parallax Effect : PIN 배경 고정하기(feat. scrollTrigger) | 웹스토리보이 |  스크롤 효과
04. GSAP Parallax Effect : 이질감 효과(feat. scrollTrigger) | 웹스토리보이 |  스크롤 효과
05. GSAP Parallax Effect : 나타나기 효과(feat. scrollTrigger) | 웹스토리보이 | 포폴 이펙트
06. GSAP Parallax Effect : 텍스트 효과(feat. scrollTrigger) | 웹스토리보이 | 텍스트 이펙트
07. GSAP Parallax Effect : 배경색 효과(feat. scrollTrigger) | 웹스토리보이 | 배경 바꾸기
08. GSAP Parallax Effect : 진행바 효과(feat. scrollTrigger) | 웹스토리보이 | progress
09. GSAP Parallax Effect : 메뉴 이동 효과 (feat. scrollTrigger) | 웹스토리보이 | 메뉴 클릭하기
10. GSAP Parallax Effect : 메뉴 축소 효과 (feat. scrollTrigger) | 웹스토리보이 | 메뉴 바꾸기
11. GSAP Parallax Effect : 메뉴 숨기기 효과 (feat. scrollTrigger) | 웹스토리보이 | 메뉴 바꾸기
12. GSAP Parallax Effect : 가로 효과 (feat. scrollTrigger) | 웹스토리보이 | 가로 사이트
13. GSAP Parallax Effect : 가로/세로 효과 (feat. scrollTrigger) | 웹스토리보이 | 가로세로 사이트
14. GSAP Parallax Effect : 가로/세로 나타나기 효과 (feat. scrollTrigger) | 웹스토리보이 | 포폴사이트
15. GSAP Parallax Effect : 스무스 효과 (feat. scrollTrigger) | 웹스토리보이 | 포폴은 스무스지

🤗 포트폴리오 만드는 방법을 공유합니다.

01. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 셋팅하기 | 웹스토리보이 | 포트폴리오
02. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 레이아웃 | 프론트앤드 | 포트폴리오
03. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 헤더 영역 | 웹스토리보이 | 포트폴리오
04. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 인트로 영역 | 웹스토리보이 | 리액트
05. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 스킬 영역 | 웹스토리보이 | 비트
06. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 사이트 영역 | 웹스토리보이 | 포폴
07. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 포트폴리오 영역 | 웹스토리보이 | 자바스크립트
08. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 연락처 영역 | 웹스토리보이 | 퍼블리셔
09. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 푸터 영역 | 웹스토리보이 | 사이트제작
10. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 스킬 영역 | 웹스토리보이 | 비트
11. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 셋팅하기 | 프레임워크 | 리액트
12. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 컨퍼넌트 | 프레임워크 | 리액트
13. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 헤더영역 | 포트폴리오 | 리액트
14. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 인트로 영역 | 포트폴리오 | 리액트
15. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 스킬 영역 | 포트폴리오 | 리액트
16. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 사이트 영역 | 포트폴리오 | 리액트
17. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 포트폴리오 영역 | 포트폴리오 | 리액트
18. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 연락처 영역 | 포트폴리오 | 리액트
19. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 푸터 영역 | 포트폴리오 | 리액트
20. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 마무리 영역 | 포트폴리오 | 리액트
21. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 셋팅하기 | 포트폴리오 | vue.js
22. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 컨퍼넌트 | 포트폴리오 | 프레임워크
23. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 헤더영역 | 포트폴리오 | vue.js
24. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 인트로 영역 | 포트폴리오 | 취업
25. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 스킬 영역 | 포트폴리오 | 사이트 제작
26. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 사이트 영역 | 포트폴리오 | 사이트 제작
27. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 포트폴리오 영역 | 포트폴리오 | 웹쓰
28. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 연락처 영역 | 포트폴리오 | 웹스토리보이
29. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 푸터 영역 | 포트폴리오 | 웹스토리보이
30. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 마무리 | 포트폴리오 | 웹스토리보이
31. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 셋팅하기 | 포트폴리오 | Next.js
32. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 컨퍼넌트 | 포트폴리오 | Next.js
33. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 헤더 영역 | 포트폴리오 | 웹스토리보이
34. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 인트로 영역 | 포트폴리오 | 웹스토리보이
35. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 스킬 영역 | 포트폴리오 | 웹스토리보이
36. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 사이트 영역 | 포트폴리오 | 웹스토리보이
37. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 포트폴리오 영역 | 포트폴리오 | 웹스토리보이
38. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 연락처 영역 | 포트폴리오 | 웹스토리보이
39. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 푸터 영역 | 포트폴리오 | webstoryboy
40. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 마무리 | 포트폴리오 | webstoryboy

😱 지금 이 코딩을 영상으로

01 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 소개 및 셋팅하기
02 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 라이브러리 설치하기
03 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : Git 연동하기
04 리액트(React.js)로 나만의 유튜브 사이트 만들기 : SCSS 셋팅하기
05 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 페이지 만들기
06 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 섹션 컴퍼넌트 구조화하기
07 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 헤더 영역 완성하기
08 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 헤더 영역 데이터 작업
09 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 컴퍼넌트 비동기 작업
10 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 페이지 SEO 작업
11 리액트(React.js)로 나만의 유튜브 사이트 만들기 : 메인 콘텐츠 작업
12 리액트(React.js)로 나만의 유튜브 사이트 만들기 : 추천 영상 작업
13 리액트(React.js)로 나만의 유튜브 사이트 만들기 : 추천 개발자 작업
14 리액트(React.js)로 나만의 유튜브 사이트 만들기 : 메인 섹션 나머지 콘텐츠 작업
15 리액트(React.js)로 나만의 유튜브 사이트 만들기 : 비디오 컴퍼넌트 통합 작업
16 리액트(React.js)로 나만의 유튜브 사이트 만들기 : Swiper 이미지 슬라이드 작업
17 리액트(React.js)로 나만의 유튜브 사이트 만들기 : 나머지 페이지 작업
18 리액트(React.js)로 나만의 유튜브 사이트 만들기 : 검색 및 유튜브 API 설정하기
19 리액트(React.js)로 나만의 유튜브 사이트 만들기 : Rapid API 및 더보기 설정하기
20 리액트(React.js)로 나만의 유튜브 사이트 만들기 : 비디오 상세 페이지 만들기
21 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 채널 상세 페이지 만들기
22 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 버그 고치기
23 리액트(React.js)로 나만의 유튜브 사이트 만들기 프로젝트 : 빌드 및 배포하기