개발 · 프로그래밍 프론트엔드

바닐라 자바스크립트 10개 프로젝트 만들기(vanilla javascript - 10 projects) 대시보드

(4) 5개의 수강평 ∙ 34명의 수강생

CANES BLACK

JavaScript vanilla-javascript

77,000원

월 15,400원

5개월 할부 시

지식공유자: CANES BLACK

총 99개 수업 (7시간 13분)

수강기한:

수료증: 발급

난이도: --

지식공유자 답변: 미제공

폴더에 추가 45

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

바닐라 자바스크립트를 이용한 모든 기술 수준을 위해 실용적으로 구성한 재미있는 프로젝트 중심의 강의입니다. 이 강의에서 다루는 프로젝트는 프레임워크나 라이브러리 없이 HTML5, CSS 및 순수 JavaScript를 사용하여 웹앱을 만들 수 있도록 설계되었습니다. 모든 프로젝트는 처음부터 만들어지며, 회원가입 페이지 만들기부터 수능 시간 타이머까지 Vanilla JavaScript를 이용하여 만들어볼 수 있습니다.

✍️
이런 걸
배워요!

HTML/CSS로 레이아웃 및 UI 생성(CSS 프레임워크 없음)

CSS 애니메이션

자바스크립트 기초

DOM 선택 및 조작

JavaScript 이벤트(양식, 버튼, 스크롤 등)

API 및 JSON 가져오기

로컬 저장소 작업

setTimout, setInterval

화살표 기능

바닐라 자바스크립트 실력을 기르고 싶다면?
10개 실전 프로젝트에 도전해보세요!

‘왜 개념 강의는 온라인에 많은데
실습 강의, 클론코딩 강의는 드물까?’

👉 그래서 카네스블랙이 준비했습니다!

강의 자료 첨부(섹션10개)

실습 과정이 담긴 10개 프로젝트 클론코딩

_{섹션 1 - 회원가입창 만들기}

_{섹션 2 - 카네스블랙 계산기 만들기}

_{섹션 5 - 소개팅 앱 만들기}

_{섹션 9 - 대수능 시간타이머}

시간과 경험은 절약하고, 실력은 높이고! 💡

총 10개의 실습 과정이 담긴 프로젝트를 직접 만들어봅니다.
중간중간 개념에 대한 내용이 설명된 PPT 설명과 함께 수업이 이루어집니다.
라이브러리가 전혀 쓰이지 않은 순수 바닐라 자바스크립트로 클론 코딩을 진행합니다.
실습 과정에서 자연스럽게 HTML, CSS 그리고 Vanilla JavaScript의 중요 개념을 익혀보세요!

코딩 실력이 가장 빨리 느는 방법!
단언코, 클론코딩입니다.

안녕하세요, 카네스블랙입니다! 👨‍💻

저는 평범하게 K 계열사에서 웹 개발자로 직장생활을 하다가 많은 사람들, 그리고 저 자신이 배우면서 어려워했던 내용에 대해 지식을 공유하고 싶어 현재 CANES BLACK이라는 회사를 설립해 1인 개발자로 개발 사업을 준비하고 있습니다.

저, 카네스블랙은 문득 클론코딩을 하는 강의가 국내 온라인 강의 시장에 별로 없다고 직감하였습니다. 그래서, 제가 처음 코딩을 접했을 때 가장 빨리 실력이 늘 수 있었던 클론코딩을 여러분들이 하루 아메리카노 한 잔 (평균 2500원) 정도의 저렴한 가격으로 해보면서 실력이 늘기를 바라는 마음에 강의를 제작하게 되었네요!

제 강의, 이런 분들께 추천합니다
HTML, CSS, JavaScript 기본 지식만 있다면 OK!

자바스크립트를 실제로 사용해 볼 프로젝트 경험을 늘리고 싶은 분

재미있는 예제와 함께 자바스크립트 실력을 키우고 싶은 분

라이브러리에 의지하지 않은 순수 JS 코딩 실력을 기르고 싶은 분

단기간에 자바스크립트 코딩 실력을 빠르게 키우고 싶은 분

진짜 실력은 "순수 자바스크립트"에서 나옵니다!

언젠가 혼자서 보지 않고도 제가 만든 강의를 직접 제작할 수 있을 정도로 다양한 프로젝트를 경험해보신다면, 여러분은 분명 이미 프론트엔드 개발자의 세계로 진입하신 거라고 확신합니다.

바닐라 자바스크립트는 라이브러리나 프레임워크를 사용하지 않은 순수 자바스크립트를 의미합니다. 쉽게 말해 짜장면인데 짜장 소스 말고는 아무것도 첨가하지 않은 순수한 짜장면 정도로 보시면 될 듯해요!

라이브러리, 프레임워크는 계속해서 새롭게 등장하고 있습니다. 하지만 시간이 지나고, 어떤 라이브러리가 등장하더라도 기반 기술인 자바스크립트는 꼭 필요합니다. 그렇기 때문에 시간이 지날 수록 바닐라 자바스크립트의 중요성은 점점 더 커지고 있습니다.

실력있는 FE 개발자가 되고 싶으신가요? 그렇다면 지금 당장 바닐라 자바스크립트를 잡아보세요!

이 강의만의 특징을
확인해보세요.

1️⃣ 실습에 앞서 PPT로 섹션에서 다루게 될 HTML, CSS, JavaScript 주요 핵심 개념을 짚습니다.

2️⃣ 섹션당 약 1시간 이내로 구성되어, 하루에 섹션 하나씩 총 10섹션을 끝내고 한달에 3회독 끝낸다는 마음으로 도전하실 수 있습니다.

3️⃣ 대체로 쉬운 프로젝트로 구성되어 있어 어렵지 않게 따라할 수 있습니다. (물론 그렇다고 대충 넘어가지는 않습니다!)

4️⃣ 라이브러리 없이 HTML, CSS, JavaScript만으로 기본적인 웹 프론트를 개발할 수 있게 됩니다.

5️⃣ 실제로 개발 공부를 하면서 어려웠던 중요 개념은 PPT로 다시 짚고 넘어갑니다. 돈 워리! 여러분의 실력 Up을 도와드립니다.

💾 수강 전 확인해주세요!

수강 환경으로 Windows, macOS 등 인터넷이 되는 PC를 준비해주세요.
코드 에디터로는 Visual Studio Code를 이용합니다.
사양에 제한은 없지만, 가능하면 성능이 좋은 노트북/데스크톱이면 더욱 좋습니다!
선수 지식으로 HTML5, CSS, JavaScript에 대한 기본 개념을 숙지하셔야 합니다.

🎓
학습 대상은
누구일까요?

HTML, CSS 및 JavaScript에 대한 기본 지식을 가지고 있는 모든사람들

자바스크립트 개념은 아는데 실전 클론코딩 프로젝트가 경험이 적은 사람들

재미있고 중간에 쉬운 프로젝트를 만들고 싶은 사람

📚
선수 지식,
필요할까요?

HTML, CSS 및 JavaScript에 대한 기본 지식

Written by Canesblack who lives and works in Seoul, Korea building useful things.

이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. 소개 및 환경설정 3 강 ∙ 3분

소개 미리보기 01:12 환경설정 미리보기 02:24

강의자료

섹션 1. 회원가입페이지 20 강 ∙ 1시간 29분

1-intro 미리보기 00:26

1-html_1 01:48

1-html_2 07:07

1-html_3 00:47

1-css_1 04:05

1-css_2 01:58

1-css_3 05:53

1-css_4 06:21

1-css_5 04:26

1-css_6 03:39

1-css_7 03:07

1-css_8 01:45

1-css_9 06:13

1-css_10 04:15

1-js_1 01:03

1-js_2 05:08

1-js_3 05:50

1-js_4 04:12

1-js_5 12:48

1-js_6 08:43

섹션 2. 카네스블랙계산기 13 강 ∙ 1시간 6분

2-intro 미리보기 00:34

2-html_1 00:38

2-html_2 01:54

2-html_3 02:23

2-html_4 12:09

2-css_1 04:58

2-css_2 07:05

2-js_1 01:50

2-js_2 05:27

2-js_3 05:00

2-js_4 04:46

2-js_5 10:00

2-js_6 10:15

섹션 3. 트럼프의명언 10 강 ∙ 1시간 2분

3-intro 미리보기 00:34

3-html_1 05:48

3-html_2 04:24

3-css_1 10:28

3-js_1 02:41

3-js_2 05:08

3-js_3 09:22

3-js_4 09:15

3-js_5 10:47

3-js_6 03:36

섹션 4. 영화포스터(무한스크롤링) 8 강 ∙ 30분

4-intro 미리보기 00:20

4-html_1 02:49

4-html_2 01:47

4-html_3 04:46

4-html_4 01:49

4-css_1 04:48

4-js_1 01:54

4-js_2 12:15

섹션 5. 랜덤소개팅 8 강 ∙ 28분

5-intro 미리보기 00:20

5-html_1 00:48

5-html_2 03:56

5-css_1 02:48

5-css_2 04:17

5-js_1 01:52

5-js_2 03:03

5-js_3 11:29

섹션 6. 백엔드냐 프론트엔드냐 6 강 ∙ 26분

6-intro 미리보기 00:37

6-html_1 02:19

6-css_1 09:03

6-js_1 01:49

6-js_2 08:21

6-js_3 04:35

섹션 7. 워드타임어택 10 강 ∙ 30분

7-intro 미리보기 00:36

7-html_1 01:16

7-html_2 02:34

7-css_1 08:51

7-js_1 02:25

7-js_2 05:49

7-js_3 02:49

7-js_4 02:32

7-js_5 01:04

7-js_6 02:51

섹션 8. 음악을찾아줘 5 강 ∙ 26분

8-intro 미리보기 00:41

8-html_1 02:55

8-css_1 08:31

8-js_1 01:52

8-js_2 12:51

섹션 9. 대수능 시간타이머 6 강 ∙ 24분

9-intro 미리보기 00:24

9-html_1 01:44

9-css_1 11:12

9-js_1 01:15

9-js_2 04:04

9-js_3 06:19

섹션 10. 카네스블랙카페(TODO) 10 강 ∙ 43분

10-intro 미리보기 00:48

10-html_1 02:25

10-css_1 09:16

10-css_2 03:20

10-js_1 01:42

10-js_2 09:10

10-js_3 05:48

10-js_4 03:19

10-js_5 04:17

10-js_6 03:07

강의 게시일 : 2023년 02월 02일 (마지막 업데이트일 : 2023년 09월 02일)

수강생분들이 직접 작성하신 수강평입니다.

5개의 수강평

5점

4점

3점

2점

1점

VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

자세하고 이해쉬워요 계속 만들어주세요

2023-02-02

지식공유자 CANES BLACK

감사드립니다.

2023-02-11 0

입문자한테 완전 좋아요! 다만 타자 소리가 조금 큰게 약간 흠이기는 한데.. 입문자분들 문턱에 맞춰서 간단간단히 입문자가 어려워할 핵심개념설명도 해주시고 특히나 프론트엔드 개발자가 실습강좌가 단일 강좌치고는 너무 비싸서 조금 그랬는데., 10개의 프로젝트를 한번에 바닐라 자바스크립트라는 언어로 올린다는게 좋은거 같아요!

2023-02-02

지식공유자 CANES BLACK

감사합니다... 앞으로 리액트 관련 10개프로젝트와 실습과정 그리고 개념과정도 올릴예정입니다. 해당 강좌에서는 타자소리 염두에두고 더 질 좋은강의로 준비하겠습니다. 감사합니다.

2023-02-02 1

소스코드좀 부탁드리겠습니다..ㅎ

2023-08-16

지식공유자 CANES BLACK

jong960107@naver.com 으로 메일주시면 드리겠습니다

2023-08-18 0

강의 너무 좋아요 ㅎㅎ 다른 프로젝트도 만들어주셨으면 좋겠어요! 혹시 강의 코드제공은 안하시나요??!

2023-02-28

지식공유자 CANES BLACK

감사드립니다~!!!

2023-02-28 0

지식공유자 CANES BLACK

프로젝트 10개 코드 제공해드렸습니다. 감사합니다!

2023-05-20 0

약간 라이브 방송 좋아하시는 분에게는 같이 하면서 배우는 느낌이라 괜찮을 것 같은데 저랑은 안 맞는 것 같습니다. 5강 같은 경우는 중간에 아예 빠진 부분도 있네요 ----- 어머나, 댓글 이제 봤습니다. 치킨 먹었다고 생각할게요 :) 마음만으로도 감사합니다!

2023-02-14

지식공유자 CANES BLACK

안녕하세요! 새싹님, 해당 강좌 개발자입니다. 정말 댓글 감사드립니다.! 최초 해당영상 완강자 이시네요! 다시한번 감사드리며, 제가 감사의 의미로 치킨쿠폰 드리고 싶습니다.! 저또한 더욱더 발전된 모습으로 영상 찍도록 노력하겠습니다. 오른쪽에 제 닉네임 클릭하셔서 제 이메일 확인하셔서 새싹님인거 인증가능한 아이디 캡쳐하셔서 이메일로 해당 내용 보내주시면 치킨쿠폰 바로쏘겠습니다. 언제든지 이메일 주세요~!

2023-02-24 1

바닐라 자바스크립트 10개 프로젝트 만들기(vanilla javascript - 10 projects) 대시보드

초급자를 위해 준비한 [프론트엔드, 웹 개발] 강의입니다.

코딩 실력이 가장 빨리 느는 방법! 단언코, 클론코딩입니다.

안녕하세요, 카네스블랙입니다! 👨‍💻

제 강의, 이런 분들께 추천합니다HTML, CSS, JavaScript 기본 지식만 있다면 OK!

진짜 실력은 "순수 자바스크립트"에서 나옵니다!

이 강의만의 특징을 확인해보세요.

이런 분들께 추천드려요!

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

코딩 실력이 가장 빨리 느는 방법!
단언코, 클론코딩입니다.

제 강의, 이런 분들께 추천합니다
HTML, CSS, JavaScript 기본 지식만 있다면 OK!

이 강의만의 특징을
확인해보세요.