25%
41,250원
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
[프론트엔드, 웹 개발] 강의입니다.
크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
눈에 띄는 포트폴리오 웹사이트 제작
독특한 UI의 웹사이트 개발
CSS 3D를 자유자재로 다루기
자바스크립트 기본기를 확실히 다지기
첫 시작부터 라이브러리 없이 하나하나
직접 구현해서 만드는 인터랙티브 웹 강의입니다. 🧩
라이브러리 없이
바닥부터 만들어나가요 ✨
본 강의는 처음부터 끝까지 라이브러리없이 바닥부터 구현합니다. 실무에서는 생산성이 중요하기에 좋은 라이브러리를 찾아 잘 쓰는 것 또한 중요하지만, 잘 하는 개발자가 되기 위해서는 원천 기술과 구현 원리에 대한 이해가 중요합니다.
첫 시작부터 하나하나 직접 구현하는 방식으로 공부하면 남들과 차별화된 고급 인터랙티브 엔지니어로 성장할 수 있습니다. 눈에 보이는 동작은 같아도, 바닥부터 직접 만드는 법을 훈련한 개발자는 숙련도부터 다릅니다.
이런 고민을 갖고계시나요?
"해외 웹 어워드 사이트에서 자주 볼 수 있는 화려한 웹사이트들처럼,
창의적인 UI 인터랙션을 구현하는 과정을 직접 보고 배우고 싶어요."
"창의력이 넘치는 디자이너인데, 코딩 스킬이 따라가질 못해요.
몸값 높고 귀한 진정한 개자이너가 되고싶어요."
"CSS, JS 열심히 공부했지만 항상 비슷한 내용과 예제만 만들어봤어요.
라이브러리를 활용하는 법 말고 동작 원리를 이해하고 싶어요."
2023 업데이트 안내✅
2023년 6월, 추가 보강 영상들이 업데이트 되었습니다. 처음 강의를 출시하고 시간이 꽤 흘렀기 때문에, 현재 시점에서 업데이트나 보강이 필요하다고 판단되는 내용을 추가했습니다. 추가된 영상들은 아래 그림처럼 제목에 [2023] 이라는 말머리가 붙어있어요😊
이 강의만의 특징은? 🔎
👌 기초부터 진행하는 수업은 아닙니다. CSS와 JS의 기초는 알고 있어야 학습을 원활하게 진행하실 수 있습니다.
👌 기초 정리가 필요하시다면, 제 유튜브의 CSS 레이아웃 / 자바스크립트 기초 정리 영상으로 공부하신 후 이어서 본 강의를 학습하시면 좋습니다.
👌 최종적으로 만드는 3D 스크롤 웹사이트의 소스코드를 제공합니다.
연관 로드맵 🚎
"Oh!" 감탄사가 나오는 역동적인 인터랙티브 웹사이트를 만들어요.
1분코딩님의 인터랙티브 웹 사이트를 만들어보는
강의들로 구성된 로드맵입니다.이 강의 포함
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분들
남들과 다른 독특한 포트폴리오 웹사이트를 만들고 싶은 분들
개자이너, 디발자에 대한 로망을 갖고 계신 분들
평소 1분코딩과 스튜디오밀의 강의가 좋았던 분들
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
CSS 기초
자바스크립트 기초
안녕하세요
1분코딩 입니다.
1분코딩 입니다.
서울에서 웹 개발자/디자이너로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다 :)
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.
개발자/디자이너/컨텐츠크리에이터
커리큘럼
총 70 개
˙ 11시간 14분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 시작하기
1 강
∙ 8분
준비 하기
08:56
섹션 1. CSS 변환과 애니메이션
5 강
∙ 56분
섹션 2. CSS 3D
3 강
∙ 47분
CSS 3D 1
14:01
CSS 3D 2
15:28
CSS 3D 3
17:49
섹션 3. CSS Flex
1 강
∙ 28분
CSS Flex
28:26
섹션 4. 인터랙티브 웹 개발을 위한 자바스크립트 시작하기
5 강
∙ 39분
자바스크립트 워밍업
12:01
DOM 스크립트 1
10:41
DOM 스크립트 2
02:12
[2023] dataset 객체
04:05
DOM 스크립트 3
10:55
섹션 5. 자바스크립트 이벤트 다루기
7 강
∙ 1시간 36분
이벤트의 기본 동작
23:41
[2023] defer와 async
06:07
this와 이벤트 객체
미리보기
07:00
움직이는 캐릭터 예제로 클릭 이벤트 익혀보기
17:26
이벤트 위임
14:03
이벤트 위임 보강 영상
22:56
[2023] .closest()
05:10
섹션 6. 예제) 3개의 문
5 강
∙ 59분
3개의 문 1
11:16
3개의 문 2
16:43
3개의 문 3
11:21
3개의 문 4
11:45
3개의 문 5
08:16
섹션 7. 객체(Object)
6 강
∙ 47분
객체 1
08:14
객체 2
08:02
[2023] 템플릿 문자열
04:26
객체 3
07:13
객체 4
15:43
[2023] Class 사용하기
03:47
섹션 8. 스크롤 다루기
3 강
∙ 20분
스크롤 이벤트 다루기
08:44
[2023] window.scrollY
01:39
스크롤 위치에 따라 오브젝트 조작하기
09:52
섹션 9. Transition/Animation 이벤트
2 강
∙ 19분
Transition 이벤트
미리보기
10:13
Animation 이벤트
08:53
섹션 10. 타이밍 제어하기
3 강
∙ 14분
setTimeout
05:18
setInterval
01:57
requestAnimationFrame
06:50
섹션 11. 종합예제) 전진! 3D 스크롤
28 강
∙ 3시간 55분
전진! 3D 스크롤 1
03:19
전진! 3D 스크롤 2
05:56
전진! 3D 스크롤 3
09:36
전진! 3D 스크롤 4
08:20
전진! 3D 스크롤 5
09:56
전진! 3D 스크롤 6
03:13
전진! 3D 스크롤 7
07:06
전진! 3D 스크롤 8
10:07
전진! 3D 스크롤 9
06:19
전진! 3D 스크롤 10
06:11
전진! 3D 스크롤 11
15:16
3D 캐릭터 구현 컨셉
07:20
전진! 3D 스크롤 12
06:18
전진! 3D 스크롤 13
11:02
전진! 3D 스크롤 14
08:37
전진! 3D 스크롤 15
미리보기
05:40
전진! 3D 스크롤 16
미리보기
06:21
전진! 3D 스크롤 17
07:06
전진! 3D 스크롤 18
11:25
전진! 3D 스크롤 19
06:11
전진! 3D 스크롤 20
15:47
전진! 3D 스크롤 21
10:11
전진! 3D 스크롤 22
10:59
전진! 3D 스크롤 23
13:13
전진! 3D 스크롤 24
07:00
전진! 3D 스크롤 25
07:18
전진! 3D 스크롤 26
05:10
전진! 3D 스크롤 27
10:46
섹션 12. 마치며
1 강
∙ 1분
마무리 인사말
01:20
강의 게시일 : 2019년 05월 11일
(마지막 업데이트일 : 2023년 06월 20일)
수강평
총 287개
수강생분들이 직접 작성하신 수강평입니다.
4.9
287개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
역시는 역시입니다...
라이브 자바스크립트 강의를 듣고 알게되어 인프런까지 따라왔네요. 라이브강의 때 느꼈지만, 선생님께서는 입문자들도 알아듣기 쉽게끔 설명을 참 잘 해주시고, 무엇보다 수강생들 이해를 돕기위해 노력하시는 세세한 모습들이 보여서 너무 좋습니다ㅎㅎ 인터렉티브웹은 쌤만 믿고 따라가겠습니다 :) 인터렉티브웹 장인 한번 되어보겠습니다 후후
2019-05-17
프론트/백엔드가 아닌 인터렉션을 위한 최고의 강의입니다!!
학원에서는 js는 건너뛰고 오직 jquery 사용법만 알려주는 경우가 많은데
이 강의는 순수한 js의 구동방식을 자세히 알려주셔서 원천기술에 대한 지식이 차곡차곡 쌓이는 느낌입니다!!
강사님 목소리도 너무 좋으시고 예제도 재밌어서 시간가는줄 모르고 들었네요!!
강의 듣고 실무에서도 라이브러리 없이 작업하는중입니다!!
2019-05-19
아 너무 좋아요! 이해도 쏙쏙되고 자바스크립트 기초수업 듣고 이 수업을 들으니 유레카라는 소리가 절로 나옵니다!
2019-05-23
타 기관에서 ui관련 강의를 수강한 적이 있습니다. 당시에는 자바스크립트 보다는 제이쿼리에 집중하여 수업을 들었어서 자바스크립트는 힘들겠지 라는 인식이었습니다만, 수업을 접하고 자바스크립트만으로도 충분히 가능하다는 사실이 놀라웠습니다 . 또한 css3의 기능, 속성에 대해 보다 체계적으로 정리가 되어 매우 만족스러웠습니다. 강의 중간중간 마다도 까먹지 않도록 그건것을 되새김 해주신것도 너무 좋았고.. 정말 만족스러웠습니다. 또 수업을 출시하신다면 바로 수강할꺼 같아요! ㅎㅎ
2019-05-27
강의 너무 재미있고 알찼습니다 ^.^~
자바스크립트로 여러 예제를 만들면서 실제로 이런 문법을(css에서 속성선택자, 객체 등)어떻게 사용해야 하는지 알 수 있어서 좋았습니다.
특히나 그냥 코드만 보고 설명해주는 게 아니라 직접 그림도 그려주시고(perspective 쪽) 캠으로 종이 등으로 3D쪽(카드뒤집기, 마지막예제) 설명해주셔서 확실히 이해하는데 훨씬 수월하고 좋았습니다~
그리고 flex에 대해 배울때 오뎅꼬치와 오뎅... 기억에 각인돼서 절대 잊어버리지 않을 거같아요 ㅎㅎ
이제 막 자바스크립트를 끝내고 인터렉티브웹이나 혹은 자바스크립트로 뭘 할 수 있을까 생각하시는 분 들에게 강추 드립니다!
앞으로도 인터렉트웹이나 혹은 백엔드까지 연계해서 다양한 수업들이 나오면 정말 좋을 거 같습니다.
좋은 강의 정말 잘 봤습니다 감사합니다!!
2019-05-31
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
