웹스토리보이 유튜브 | Webs Youtube

검색

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

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)로 나만의 유튜브 사이트 만들기 프로젝트 : 빌드 및 배포하기