HTML, CSS, JS

  • 프로 ‘디발자’출신 강사 직강

    개발자+디자이너 경력 10년
    저자+강의 경력 5년의노하우를 담은 강의

  • 코딩 입문자도 OK!

    코딩 전혀 몰라도 OK, 웹 모션 디자인을 쉽게 구현할 수 있도록 구성된 강의

  • 13개 실무예제 학습

    수 많은 취준생을 취업으로이끈
    13개 실무 예제로강의 진행

  • 평생소장
  • 웹 모션 디자인
  • 웹 코딩
  • 최성일 강사 직강

한번 구매로, 평생 소장하세요.
(자동 구성) 가격이 인상됩니다.

월말 가격이 인상될 예정입니다.
지금 구매하세요!

  • 정상가 (자동 구성)
  • 할인 금액 (자동 구성)
  • 최종 금액 (자동 구성)
  • 12개월 할부 시 (자동 구성)
오늘이 최저가!

런칭 기념 최저가 혜택이 곧 마감됩니다.

코딩 몰라도 배울 수 있습니다.
이런 웹 구현, 이 강의로 완성해보세요.

(본 강의는 사전지식 없이도 수강할 수 있습니다)

Fastcampus Only!












코딩 실력이 부족해서,
기존 강의는 코딩 지식을 필요로 해서,
국비 학원에서는 지원되지 않아서
웹 모션 디자인을 배우지도,
구현하지도 못했던 분들 주목하세요.


코딩 지식 없이도 배워서
인터랙티브한 웹 모션 디자인을 구현할 수 있는 강의니까요!

실습 예제로 쉽게 접근하는 문법으로
직접 인터랙션을 구현해 볼 수 있는 강의를
지금 패스트캠퍼스에서 수강하세요.

접근성이 중요한 공공기관 사이트부터 화려한 호텔 사이트까지!
다양한 난이도의 13가지 실습 예제로 구성했습니다.

Swipe 기능의 이미지 갤러리
자동 정렬 기능의 반응형 갤러리
인터랙티브 뮤직 플레이어
최신 Flex 레이아웃을 활용한 웹 모션
동화풍 마을 애니메이션 + 시간에 따라 자동으로 변하는 반응형 웹
SVG를 활용하여 마우스 움직임에 반응하는 인터랙티브 웹

*위 예시 이미지는 실제 강의 내용과 다소 다를 수 있습니다.

위 기능들을 활용한 실제 포트폴리오입니다.

*수강생의 작품이니 예시로만 참고해주세요.

이런 분들께 추천합니다.

현직 디자이너

코딩 기초는 없지만 인터랙션을 웹으로 표현하고 싶은 현직 디자이너

웹 디자인 취업/이직 준비생

코딩은 잘 모르지만 웹 디자인 분야에 관심 있는 취업/이직 준비생

개발 분야 입문자/비전공자

개발 지식은 없지만 IT/개발 분야에 입문하고 싶은 비전공자

프론트엔드 개발자

디자인 감각에 관계 없이 웹 모션 디자인을 배워서 직접 하고 싶은 현직 프론트엔드 개발자

이 강의는 이런 점이 달라요.

Point 01

타사 기본 실습 평균 2개 vs.
다양한 난이도의 실습 예제 13개

예제를 따라하기만 하면 머릿속으로 상상하던 웹을 구현해 볼 수 있어요! 난이도가 낮은 것부터 중상 레벨까지, 타사 콘텐츠 대비 더 다양한 웹 모션 실습 예제가 준비되어 있습니다.

Point 02

10년째 똑같은 커리큘럼 vs.
트렌드에 맞춘 최신 커리큘럼

HTML, CSS, JS를 기본으로 활용하여 여러가지 기능을 구현하는 법을 가르쳐 드립니다. 아무도 사용하지 않는 오래된 jQuery가 아닌 순수 JS 에크마 6를 사용할 거예요.

Point 03

진도 빼기 바쁜 강사 vs.
비전공자 입장에서 꼼꼼히 가르치는 강사

혹시 '코딩의 ㅋ도 모르는 비전공자에게 너무 어렵지 않을까?'라고 망설이고 계신가요? 걱정 마세요! 강사님도 비전공자 출신이랍니다. 개발자의 관점에서 강의하는 수업이 아닙니다. 비전공자가 어려워하는 부분을 이해하고, 초등학생도 이해할 수 있는 말로 쉽게 풀어서 가르쳐드립니다.

수강 후 겪게될 놀라운 변화를 상상해보세요.

첫 번째 변화

초보 코딩 3종 세트로 다양한 웹 모션 구현!

웹 디자이너라면 놓치고 갈 수 없는 HTML, CSS, JS!
꼭 필요한 문법만 쉽게 가르쳐드립니다. 한 끗 차이를 만드는 다양한 웹 모션을 구현할 수 있어요.

웹 코딩 배우기

두 번째 변화

아이디어를 현실로 만든 화려한 결과물!

기능을 배웠다면 연결해서 실제 사이트까지 만들어 봐야죠!
내 포트폴리오를 업그레이드해 주는 작업물까지 챙겨갈 수 있어요.

[약력]

현) 디코드랩 국비교육원장
전) 코발트식스 대표
전) 이파트 웹사업부팀 과장
전) 코너크리에이티브 웹디자인팀 대리
KT, 쌍용자동자, 외교부, NC소프트, DB손해보험, 예금보험공사,
안산예술의 전당, 한국의 빚 등

[인터렉티브 웹 UI계의 바이블]

◼︎ 저서
Do it 인터랙티브 UI모션 웹 프로그래밍(2021.8)
인터랙티브 웹디자인북(2015)
◼︎ 출강
한빛미디어 인터랙티브 웹 디자인북 출간 세미나
서울산업진흥원, 문화콘텐츠 사업을 위한 웹 기획 및 디자인 출강
세종시청, 비전공자를 위한 웹 페이지 기획 및 제작 특강
서울 성수 IT 센터, 청년 스타트업 CEO를 위한 웹 개발 특강
마포구청 청년나루, 청년 취업을 위한 웹포트폴리오 제작 특강

* 최성일 강사의 수강생의 후기입니다.



거듭 쉽게 가르친다고 말씀 드렸지만
당연히 힘들 거에요.
새로운 컴퓨터 언어를 배우는 건 어렵고 힘든 일이에요.
하지만 여러분이 포기하지 않도록 가르칠 겁니다.
어려운 내용을 최대한 쉽게 가르치려고 노력할 겁니다.

by 최성일

🙋질문있어요!

여러분이 궁금할 수 있는 질문들을 강사님께 해보았습니다.

Question 1.
디자인은 ‘감각’의 영역 아닌가요?
디자인 감각이 없어도 디자인을 배울 수 있나요?
사실 그것도 편견 중에 하나죠. 디자인이 감각 또는 재능의 영역일 순 있지만, 배워서 잘해낼 수도 있는 분야입니다. 클라이언트의 산업 카테고리에 따라, 클라이언트의 나잇대, 취향 등에 맞춰 웹 내 디자인적 요소들을 조합하는 걸 가르쳐드릴거에요. 그런식으로 따라 배우면 잘할 수 있어요. 가르치다보면 오히려 개발자들이 더 플랫디자인, 즉 구조적인 디자인 배치를 잘하기도 해요.

Question 2.
평생 개발, 디자인과 동 떨어진 경력을 쌓았어도
들을 수 있는 강의인가요?
물론이죠. 제가 가르쳤던 분 중에는 오랜 기간 국가고시를 준비하던 분, 예술을 하시던 분도 있으셨고, 많게는 40대 초반의 수강생도 있으셨답니다.
다양한 연령대의 다양한 배경을 가지신 분들이 찾아왔고 취업에 성공하셨어요.
그러니 누구나 할 수 있습니다. 정말로요.

Question 3.
정말 쉽게 배울 수 있나요?
비전공자로서 강의를 들으며 공부에 대한 벽을 느끼고 포기하지 않도록 쉽게 구성했지만 어쩔 수 없이 어렵고 힘들 거에요. 평생 몰랐던 분야를 새로 공부하는 건 개발이 아니더라도 어렵고 힘든 일이니까, 무엇보다 의지가 가장 중요한 일이죠.
(자동) (자동) (자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)

강의 목표.

HTML, CSS, Java Script 기초 문법을 예제와 함께 이해합니다.

화려한 인터랙티브 웹 UI를 구현해 포트폴리오를 발전시킵니다.

오늘 배워 내일 바로 개발 실무에 써먹을 수 있는 역량을 강화합니다.

추천 대상.

• 인터랙티브 디자인을 코딩을 통해 웹으로 표현하고 싶은 현직 디자이너
• 개발 지식은 없지만 IT/개발 직종에 입문하고 싶은 비전공자
• 웹디자인 분야에 관심 있는 취업/이직 준비생
• 인터랙티브 웹을 배우고 싶은 현직 프론트엔드 개발자

커리큘럼.

아래의 모든 강의를 올인원 패키지 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!

Part 1. 인터렉티브 UI 개발 소개

웹 모션

Part 2. 인터렉티브 UI 기획 & 디자인

웹 모션 강의

Part 3. HTML5, CSS3 기본 문법

웹 모션 배우기

Part 4. 효율적인 작업을 위한 확장 스킬

웹 모션 강의

Part 5. Java Script의 인터랙티브 UI 제어

웹 코딩 배우기

Part 6. 실전 인터랙티브 웹 UI 프로젝트

Ch1. 온라인 프로필

난이도| 하

Ch2. 풀스크린 배경영상 반응형 웹

난이도| 하

Ch3. 동화풍 마을 애니메이션

난이도| 하

Ch4. 3D 파노라마 회사소개 웹

난이도| 중

Ch5. swiper기능의 이미지 갤러리

난이도| 중

Ch6. 자동 정렬 기능의 반응형 갤러리

난이도| 중

Ch7. 마우스 움직임에 반응하는 인터랙티브 웹

난이도| 중

Ch8. 시간에 따라 자동으로 변하는 반응형 웹

난이도| 중

Ch9. 인터랙티브 동영상 소개 웹

난이도| 중상

Ch10. 인터랙티브 뮤직 플레이어

난이도| 중상

Ch11. 동영상 마스크 애니메이션 웹

난이도| 중상

Ch 12. SVG path모션을 활용한 인터랙티브 웹

난이도| 중상

  • 상세 커리큘럼.

    자세한 커리큘럼 및 내용은 여기서 확인하세요!

(자동)
한 번 구매로,
평생 소장하세요.

오늘이 최저가!
오늘이 최저가!

(자동)

(자동) (자동) (자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)

구매 안내.

결제 후, 언제 어디서나 하루 10분 공부 시작.

• 홈페이지 회원가입 및 로그인
• 원하는 강의 결제하기
• 마이페이지에서 강의 시청하기

해당 강의는 예약 구매 상품입니다.

영상 공개는 다음과 같이 4회에 걸쳐 공개됩니다.
(1회 구매 이후 모든 영상을 평생 소장가능합니다.)

-----

1차 공개 : 21년 10월 15일 (금)
2차 공개 : 21년 11월 15일 (월)
3차 공개 : 21년 12월 17일 (금)
4차 공개 : 22년 1월 14일 (금)

코딩 초급자를 위한
웹 모션 개발
온라인 강의 상세정보.

이 강의도 추천해요.
패스트캠퍼스

수강료.

  • 최성일의 코딩 초급자를 위한 웹 모션 디자인

    현재 정가 대비 65% 할인 중!
    9월 30일 목요일 자정 까지

    정가 459,000원
    현재 판매가 159,000원

    12개월 무이자 할부 시 월 13,250원

국내 9개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • 씨티카드
  • NH농협카드