강의

멘토링

로드맵

BEST
Programming

/

Front-end

Interactive Web Development Know-How in a Few Lines [Beginner's Edition]

We'll teach you the most used interactive skills in practice in a short period of time.

(4.6) 139 reviews

1,728 learners

  • coding11
3시간 만에 완강할 수 있는 강의 ⏰
Interactive Web
JavaScript

Reviews from Early Learners

What you will learn!

  • Interactive development skills frequently used in practice

  • Parallax scroll effect in a few lines

  • Interactive effects using mouse position values

  • Easing (acceleration) that adds emotion to motion

Develop an interactive site with just a few lines of code!

We've prepared a concise and impactful guide to the core principles of web interactive page development . Short and sweet!
Once you learn it, you can use it for a lifetime.


As of March 22, 2023
The lecture renewal has been completed !
Completely improved on the shortcomings :)

Lecture Features 💡

  • We use pure Javascript (Vanilla JS), which is highly useful in practice.
  • Learn essential code naturally by creating interactive examples together.
  • Interactive effects that seem difficult at first quickly become easy.

Lecture Introduction 📝

Basic skills required for creating interactive content
We will explain step by step from a beginner's perspective.
(Transform, transition, easing (acceleration) processing method, etc.)

▲ Step-by-step explanations that are easy for even beginners to understand.

▲ Implementing overseas site cloning with just a few lines of code
(site link)

▲ Added sensible mouse motion effects

▲ Examples that can be used immediately in practice

Super simple parallax page using scroll values

Real parallax effect through multi-layer control
(I provide images I created myself)

▲ translateZ 3D parallax page

If you complete this course ✒️

You'll definitely learn several interactive skills that I've been using in my practice for over a decade. You'll probably use them again and again for the rest of your life. (Seriously!)

If you're persistent, you'll see how the cool sites you've seen before are created.

Let me inform you 📖

  • The editor used in the class is VSCODE (Visual Studio Code).
  • The first few classes can be taken online.
    -> https://jsbin.com/

Go to other lectures

Interactive scripts actually used in the field

Recommended for
these people

Who is this course right for?

  • Anyone who wants to create a great portfolio site

  • A designer who wants to become a developer

  • Developers who need a designer's sensibility

  • Anyone who has ever felt stressed by the question, “Can this be implemented?”

  • For those who don't have time (short and bold)

Need to know before starting?

  • html, css basics

  • javascript basics

Hello
This is

3,311

Learners

225

Reviews

213

Answers

4.6

Rating

3

Courses

15년 이상 여러 기업과 언론사에서 front-end 개발 및

데이터 시각화, 인터랙티브 사이트 제작을 했습니다.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!

Curriculum

All

53 lectures ∙ (5hr 45min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

139 reviews

4.6

139 reviews

  • 황규연님의 프로필 이미지
    황규연

    Reviews 3

    Average Rating 4.7

    4

    2% enrolled

    그동안 궁금했던 인터렉션인데 반복되는 수업에 이해도를 높였습니다. - 소리가 일정하지 않은 부분은 보완이 필요해 보이네요 ^^

    • 코딩일레븐
      Instructor

      첫 수강평 감사드립니다. 촬영 중간에 마이크 셋팅 감을 잡아서 음질이 달라졌습니다. 다음부터는 주의를 더 하도록 하겠습니다~ - 강의를 리뉴얼 했습니다. 다시 한 번 봐주세요~ 음질, 화질 모두 개선이 되었습니다

  • 티라미수님의 프로필 이미지
    티라미수

    Reviews 18

    Average Rating 5.0

    5

    2% enrolled

    현업 퍼블리셔고, 현실적으로 js 필요성이 느껴져 이제 막 닥치는대로 배우고 있는 js 초보입니다 :) 이 강의를 구매하게 된 가장 큰 이유는.. 인트로 영상에 빨대 나오는 사이트 보고 바로 결제하게 됐어요. 실제로 현업에서 프로젝트 작업할 때 저 사이트를 레퍼런스로 받은 적이 있었거든요^^;; 이러한 이유로 저는 바로 결제했습니다만.ㅎㅎ 강의 구매를 고민하고 계신 분들께 제가 개인적으로 느낀점을 공유드립니다. (현재 50%정도 들었고, js는 저도 초보라.. 비기너입장에서 공유드립니다.) 1. 정말 왕초보 유형 - 바닐라js는 들어만 봤다 - addEventListener 라는 단어는 들어보기만 했다 - js로 특정 요소를 어떻게 가져오는지 모른다 등.. 본인이 스스로 기초 지식이 부족하다고 판단이 되신다면 다른 강사님들의 js 이론 강의를 먼저 들은 후에 이 강의를 들으시는 것을 추천드립니다. 2. 그래도 산출물이 나오긴 하는 유형 - 혼자서 고퀄리티의 코드를 짤 수 없을 뿐이지 if문을 100개를 써서라도 어쨌든 결과물은 낼 수 있다 - 적어도 남이 짠 코드 흐름은 파악할 수 있다 여기에 해당한다면 들어도 됩니다. 개인적으로 굉장히 효율성있는 강의라 생각합니다. 현업에서는 특정 기술만 빠르게 캐치해서 적용해야할 때도 있는데, 이 강의가 딱 그렇게 느껴지거든요. 짧은 시간안에 핵심은 다 들어있어요. 문제는 핵심만 있다보니 이론이 부족하다고 느껴질 수 있는데요, 이론은.. 구글신이 있으니 걱정하지 않으셔도 됩니다. 저도 헷갈리거나 더 알고싶은 부분은 구글링하면서 듣고 있어요~ 마지막으로 강사님께 한가지 작은 요청사항이 있습니다! 화면에 나오는 VSCode 폰트 사이즈가 작은 것 같아요 ㅠㅠ 추후 신규 강좌가 등록된다면 폰트사이즈 조금만 키워주실 수 있으실까요? :) 그리고 이 강의의 보강편으로 수강평에 언급된 리사이즈나 모바일 버전 강의가 나와도 좋을 것 같아요. 어찌됐든 신규 강의가 나오기전까지 계속 반복해서 듣고있을게요. 감사합니다 👍👍

    • 코딩일레븐
      Instructor

      와 이렇게 긴 수강평은 처음입니다. 정말 감사드립니다 ^^ 실제로 지인에게 메신져 등으로 질문 받았던 것 중에서 골라서 강의로 제작해봤습니다. 현업에서 많이 쓰이는 것들이기도 하고요. 수업에 나오는 코드가 짧지만 응용하면 정말 다양한 업무를 처리할 수 있어요~ 실무에 도움이 되셨으면 좋겠습니다. 헛헛. 물론 다음 강의도 실무에서 바로 사용할 수 있는 내용으로 준비중입니다. 그럼 즐거운 한 해 되세요~ (빨대 사이트 같은 three.js 강의도 하고 싶네요 언젠가는!)

  • LIZ.B님의 프로필 이미지
    LIZ.B

    Reviews 4

    Average Rating 5.0

    5

    2% enrolled

    인터랙티브 웹 수업을 몇가지 들었는데 기본적인 원리를 배울수 있어서 매우 좋았습니다. 감사합니다.

    • 코딩일레븐
      Instructor

      Joonsol님 수강평 감사드립니다! 추가로 더 드릴수 있는 방법을 생각해보도록 할게요~ ^^

  • Songsong님의 프로필 이미지
    Songsong

    Reviews 2

    Average Rating 5.0

    5

    2% enrolled

    선생님 많이 궁금했던건데 강의해주셔서 감사합니다 반응형이나 모바일웹에서 적용하는법도 자세히 알고싶습니다 ㅠㅠ 지루하지않고 너무 재밌어서 금방봐버렸어용!! 계속 반복적으로 보면서 마스터하겠습니당

    • 코딩일레븐
      Instructor

      수강평 감사합니다! 반응형, 모바일 웹에서 적용하는 방법이라...대략 비슷하기는 하지만, stageResize를 이용하는 샘플을 더 만들걸 그랬나봐요. AS 방법을 생각해보도록 하겠습니다. 감사합니다.

  • 이형주님의 프로필 이미지
    이형주

    Reviews 1

    Average Rating 5.0

    5

    2% enrolled

    재밌습니다!

    • 코딩일레븐
      Instructor

      수강평 감사합니다! (큰 힘이 됩니다 ㅜㅜ) 더 좋은 모습으로...

Limited time deal

$33,000.00

25%

$34.10

coding11's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!