JavaScript로 배우는 '인터랙티브 웹'

필수 선수과목: 프로그래밍 기초, 웹 퍼블리싱

코드잇의 ‘JavaScript로 배우는 인터랙티브 웹’은 인터랙티브한 웹사이트/웹 어플리케이션을 직접 개발하는 강좌입니다. 번뜩이는 아이디어로 나만의 웹사이트를 만들어보세요!

수강 기간

3개월 (93일)

평균 8시간/1주에 학습 권장

수업 구성

동영상 + 노트 + 과제

수강료

159,000원

99,000원

아이비리그 출신 강사

다트머스 대학교 컴퓨터 과학 전공 출신 강사님이 강의를 제작합니다.

효과적인 콘텐츠

핵심적인 내용을 담은 5분 내외의 간결한 영상 강의와 꿀팁 노트를 제공합니다.

재미있는 실습 과제

게임같은 과제를 통해 스스로 컴퓨터적 사고력과 문제 해결능력을 기릅니다.

동료와 함께하는 커뮤니티

동료 수강생 분들 간 질문과 답변을 주고 받으며 함께 성장합니다.

2% 부족함을 채워주는 JavaScript.

HTML/CSS로 웹사이트는 만들었지만 어딘가 허전하다면..? 버튼의 색상이 바뀌고 다양한 효과가 슉슉 나오는 재밌는 웹 사이트. 자바스크립트로 인터랙티브한 웹사이트를 만들 수 있어요. 10주 동안 실습을 하며, 직접 인터랙티브한 웹사이트를 만들어보세요!

이제는 JavaScript 전성 시대

모든 것을 JavaScript로 하자!라는 통합 운동이 일어나고 있대요. JavaScript는 어떤 기기, 어떤 환경에서든 동일하게 동작하게 하는 ‘크로스 플랫폼’의 대표 주자거든요. 이 강의에서 다루는 웹사이트뿐만 아니라, 모바일앱, 서버를 만들 때를 포함해서 모든 프로그래밍을 JavaScript로 하게 될 수도 있겠죠!?

실무에서 다루는 것만 쏙쏙! 쉽게 공부하세요.

음악 플레이리스트

웹사이트에서 스크롤을 했을 때 자연스럽게 내용들이 스르륵 생기는 효과, 어디서 많이 보셨죠? 음악 웹사이트를 이용해서 실전에 꼭 필요한 인터랙션을 배워보세요!

메신저 깨깨오톡

편리한 메신저, 매일 쓰면서도 어떻게 만드는지는 모르셨죠? 채팅창을 누르면 색상이 바뀌고 전송 버튼을 누르면 말풍선이 생기는 채팅의 기본 기능! 코드잇에서 배워보세요.

비트 메이커

요즘은 일렉트로닉한 음악이 대세죠! 음악을 몰라도 런치패드를 누르기만 하면 여러분도 집에서만큼은 디제이가 될 수 있답니다. 간단한 런치패드를 자바스크립트로 직접 만들어보세요.

코드잇 자바스크립트 수업이 특별한 이유

10개의
실전 프로젝트

평균 4.9점의
완벽 수강 후기

나만의 웹사이트와
포트폴리오

159,000원 99,000원

고품질의 강의를 합리적인 가격으로
배울 수 있는 기회 놓치지 마세요!

아이비리그 출신 강사의
쉽고 명확한 강의!

“아이폰에서만 되는 앱? Windows에서만 동작하는 결제? 이제 그런 건 없어질 겁니다. 어떤 디바이스, 어떤 환경에서도 동일하게 동작하길 바라는 시대에 살고 있으니까요. 그 중심에는 ‘웹’, 그리고 ‘JavaScript’가 있습니다.

‘웹’과 ‘JavaScript’가 이끌어가는
무한한 가능성의 세계로 여러분을 초대합니다.”

강영훈 강사

코드잇 공동 설립 / 대표
Dartmouth College Computer Science 전공
TheVentures Software Engineer
Swift School Python 마스터 클래스 강사
Dartmouth College Introduction to Programming 조교
Samsung HumanTech Paper Award 인공지능 연구를 통해 수학/전산 부문 동상
CISSE International Conference 논문 발표 및 출판

손동욱 강사

고려대학교 전기전자 공학부/심화 전공
상명대학교 뮤직테크놀로지학과 석사 과정
코드잇 Contents Director
LG전자 Software Engineer

커리큘럼

JavaScript로 배우는 '인터랙티브 웹'

전체 커리큘럼 보기

수업 목표

JavaScript와 jQuery를 통해 인터랙티브한 웹사이트/웹 어플리케이션을 직접 개발할 수 있는 역량을 기릅니다. 또한 최근 서비스와 기술의 기반이 되는 웹에 대한 심층적인 이해를 다집니다.

수업 대상

- 프로그래밍 기초 강의와 웹 퍼블리싱 강의를 들었거나, 이에 상응하는 지식이 있는 분
- JavaScript를 배워 웹 프론트엔드 개발자가 되고 싶은 분
- 나만의 인터랙티브한 웹사이트를 개발하고 싶은 분

전체 강의 구성

영상

노트

실습

필수 선수과목

프로그래밍 기초 , 웹 퍼블리싱 기초

JavaScript 기본 문법 배우기

웹 언어가 각광받고 있는 이유에 대해 알아봅니다. 마음의 준비를 마친 후, 자바스크립트의 기본 문법을 배웁니다. 처음으로 자바스크립트 코드를 짜보세요.

#프론트엔드란 #자료형 #배열 #객체 #함수 #if문 #switch문 #for문 #while문
HTML, CSS와의 콜라보레이션

자바스크립트는 HTML, CSS와 함께 사용될 때 빛을 발합니다. HTML, CSS에 자바스크립트를 적용하는 방법을 배워보고, 로그인 페이지 등 인터랙티브한 사이트를 직접 만들어봅시다.

#HTML의해결사 #jQuery #이벤트 #이벤트핸드링 #키보드이벤트

프로젝트
JavaScript 코드를 더 멋지게

좋은 개발자는 에러가 나지 않는 '믿을 수 있는' 코드를 작성합니다. 그리고 코드를 난해하지 않고 '아름답게' 작성합니다. 어떻게 하면 퀄리티 높은 코드를 만들 수 있는지 배워봅시다.

#개발자엿보기 #스타일가이드 #좋은이름짓기 #Math #String #Array #Date

프로젝트
jQuery 기초 배우기

jQuery는 자바스크립트의 기능을 보다 간편하게 사용할 수 있게 해주는 라이브러리입니다. jQuery의 기능에 대해 알아보고, 직접 ‘청기백기’ 등의 웹 어플리케이션을 직접 만들어봅시다.

#DOM #jQuery기초 #CSS선택자 #요소추가하기 #요소이동과삭제

프로젝트
이벤트로 역동적인 웹사이트 만들기

이벤트를 사용하면 실시간으로 사용자의 동작에 반응하는 인터랙티브 사이트를 만들 수 있습니다. 이벤트의 구조와 사용법을 살펴봅니다.

#이벤트 #이벤트객체 #코드줄이기 #$(document).ready #익명함수

프로젝트
애니메이션으로 매력있는 웹사이트 만들기

jQuery를 활용하면 더 예쁘고 감성적인 애니메이션 효과를 적용할 수 있습니다. 작은 애니메이션이 결과물의 퀄리티를 얼마나 바꿀 수 있는지 직접 과제를 통해 경험해보세요.

#요소숨기기 #요소보여주기 #스크롤 #each #애니메이션

프로젝트
나만의 포트폴리오 만들기

HTML/CSS에 자바스크립트를 적용하면 웹 사이트뿐 아니라 웹 어플리케이션도 얼마든지 구현할 수 있습니다. 키보드와 마우스를 통해 드럼 소리를 나게 하는 드럼 시퀀서를 직접 만들어봅시다. 나만의 포트폴리오도 만들어보세요.

프로젝트

수업 평가 4.9!

진솔한 수강후기가 수업의 질을 증명합니다!

Jeong Tae Bang

코딩 대회에서 준우승한 비전공자

역사학을 전공한 비전공자인데, 4개월 만에 해커톤 대회에서 2등을 했습니다. 코드잇으로 처음 프로그래밍을 배웠는데 지금 와서 돌아보면 다른 어떤 온라인 강좌보다 개념과 프로그래밍의 기본에 충실한 강좌였던 것 같습니다.

Hyun Kyo Jung

컴퓨터과학과로 전과한 대학생

제가 처음으로 군대에서 컴공에 관심을 갖고 군대 선임의 추천에 코드잇에서 파이썬 강의를 듣고 이젠 복학하여 아예 전공을 바꿨습니다. 짧은 동영상 강의랑 이어지는 관련 과제를 통해 학습하는 것이 정말 효율적이였던거 같습니다~

최광준

밤마다 프로그래밍 공부하는 군인

알기 쉽게 잘 풀어 가르쳐주어서 프로그래밍에 대한 공포심도 사라졌고, 진심으로 게임보다 재밌게 해나가고 있습니다. 의경으로 군 복무 중인 상태인데, 너무 재미있어서 군대에서 밤마다 연등 시간에 프로그래밍을 공부하고 있습니다.

FAQ

코드잇의 강좌는 어떤 형식으로 구성되어있나요?

코드잇의 강좌는 어떤 형식으로 구성되어있나요?
첫째, 동영상 강의와 핵심 노트로 개념을 정리할 수 있습니다.
둘째, 배운 개념을 실습할 수 있는 과제와 프로젝트가 주어집니다.
셋째, 이를 제출하면 자동/수동으로 채점과 피드백을 받으실 수 있습니다.
넷째, 궁금하신 점은 언제든 커뮤니티에 질문을 올려, 동료 수강생 분들끼리 질문과 답변을 주고 받으실 수 있습니다.
마지막으로, 강의를 모두 마친 후 배운 내용을 응용하여 스스로 포트폴리오를 만들어보시는 것을 권장드리며, 이를 커뮤니티에 공유할 수 있습니다.
진도의 70% 이상을 이수하시면, 코드잇의 공식 ‘수료증’을 발급해드립니다.

코드잇 강의의 목표는 무엇인가요?

고액의 학원을 다니고 몇년째 개발자로 일하고 계신 분들이 아주 기본적인 알고리즘 문제도 못 푸는 모습을 보고 충격을 받았습니다. 현재 한국의 프로그래밍 교육은 자격증이나 문법을 위주로 다루고, 사실상 가장 중요한 문제 해결 능력은 가르쳐주지 않기 때문에 이런 상황을 흔히 볼 수 있었던 거죠.
코드잇 수업의 목표는, 이 시대에 꼭 필요한 프로그래밍과 컴퓨터적인 사고력을 기르는 것입니다. 코드잇이 추천하는 과정을 따라 수업을 이수하면, 풀스텍 웹 개발, 모바일 어플 개발, 데이터 분석, 업무자동화 등 어떠한 분야로도 나아가실 수 있습니다.