Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

Bí quyết phát triển web tương tác chỉ trong vài dòng [Người mới bắt đầu]

Chúng tôi sẽ dạy cho bạn những kỹ năng tương tác được sử dụng nhiều nhất trong thực tế trong một khoảng thời gian ngắn.

(4.6) 137 đánh giá

1,722 học viên

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

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Kỹ năng phát triển tương tác thường xuyên được sử dụng trong thực tế

  • Hiệu ứng cuộn thị sai chỉ trong vài dòng

  • Hiệu ứng tương tác sử dụng giá trị vị trí chuột

  • Giảm tốc (tăng tốc) thêm cảm xúc vào chuyển động

Phát triển một trang web tương tác chỉ với một vài dòng mã!

Chúng tôi đã chuẩn bị một hướng dẫn ngắn gọn và hữu ích về các nguyên tắc cốt lõi của việc phát triển trang web tương tác . Ngắn gọn và súc tích!
Một khi bạn đã học được, bạn có thể sử dụng nó suốt đời.


Tính đến ngày 22 tháng 3 năm 2023
Việc gia hạn bài giảng đã hoàn tất !
Đã cải thiện hoàn toàn những nhược điểm :)

Tính năng bài giảng 💡

  • Chúng tôi sử dụng Javascript thuần túy (Vanilla JS), rất hữu ích trong thực tế.
  • Học mã cần thiết một cách tự nhiên bằng cách cùng nhau tạo ra các ví dụ tương tác.
  • Các hiệu ứng tương tác thoạt đầu có vẻ khó thực hiện nhưng sẽ nhanh chóng trở nên dễ dàng.

Giới thiệu bài giảng 📝

Các kỹ năng cơ bản cần thiết để tạo nội dung tương tác
Chúng tôi sẽ giải thích từng bước theo góc nhìn của người mới bắt đầu.
(Phương pháp xử lý chuyển đổi, chuyển tiếp, nới lỏng (tăng tốc), v.v.)

▲ Giải thích từng bước dễ hiểu ngay cả với người mới bắt đầu.

▲ Triển khai sao chép trang web ở nước ngoài chỉ với một vài dòng mã
(liên kết trang web)

▲ Đã thêm hiệu ứng chuyển động chuột hợp lý

▲ Các ví dụ có thể áp dụng ngay vào thực tế

Trang thị sai siêu đơn giản sử dụng giá trị cuộn

Hiệu ứng thị sai thực tế thông qua điều khiển nhiều lớp
(Chúng tôi cung cấp hình ảnh do chính chúng tôi tạo ra)

▲ Trang thị sai 3D translateZ

Nếu bạn hoàn thành khóa học này ✒️

Bạn chắc chắn sẽ học được một số kỹ năng tương tác mà tôi đã áp dụng trong công việc của mình hơn một thập kỷ qua. Có lẽ bạn sẽ sử dụng chúng nhiều lần trong suốt quãng đời còn lại. (Thật đấy!)

Nếu bạn kiên trì, bạn sẽ thấy những trang web thú vị mà bạn từng thấy trước đây được tạo ra như thế nào.

Để tôi thông báo cho bạn nhé 📖

  • Trình soạn thảo được sử dụng trong lớp học này là VSCODE (Visual Studio Code).
  • Một vài lớp học đầu tiên có thể được học trực tuyến.
    -> https://jsbin.com/

Đi đến các bài giảng khác

Các tập lệnh tương tác thực sự được sử dụng trong lĩnh vực này

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Bất kỳ ai muốn tạo một trang portfolio tuyệt vời

  • Một nhà thiết kế muốn trở thành nhà thiết kế

  • Developer cần sự nhạy cảm của một nhà thiết kế

  • "Điều này có thể thực hiện được không?" Bất cứ ai bị căng thẳng bởi câu hỏi

  • Dành cho những người không có thời gian (ngắn gọn và in đậm)

Cần biết trước khi bắt đầu?

  • HTML, CSS cơ bản

  • cơ bản về javascript

Xin chào
Đây là

3,300

Học viên

218

Đánh giá

210

Trả lời

4.6

Xếp hạng

3

Các khóa học

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

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

http://yahao2512.com

 

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

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

Chương trình giảng dạy

Tất cả

53 bài giảng ∙ (5giờ 45phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

137 đánh giá

4.6

137 đánh giá

  • kyoo1196210님의 프로필 이미지
    kyoo1196210

    Đánh giá 3

    Đánh giá trung bình 4.7

    4

    2% đã tham gia

    これまで気になったインタラクションなのに、繰り返される授業に理解度を高めました。 - 音が一定でない部分は補完が必要に見えますね^^

    • coding11
      Giảng viên

      初受講ありがとうございます。 撮影の途中でマイクの設定感をつかみ、音質が変わりました。次からは注意を加えたいと思います〜 - 講義をリニューアルしました。もう一度見てください〜音質、画質ともに改善になりました

  • salary999님의 프로필 이미지
    salary999

    Đánh giá 17

    Đánh giá trung bình 5.0

    5

    2% đã tham gia

    現業パブリッシャーで、現実的にjsの必要性が感じられ、今ちょうど黙っているように学んでいるjs初心者です:) この講義を購入することになった最も大きな理由は..イントロ映像にわら出てくるサイト見てすぐ決済することになりました。実際、現業でプロジェクト作業をするとき、そのサイトをリファレンスとして受けたことがありましたよ^^;; このため、私はすぐに支払いましたが。 講義の購入を悩んでいる方に私が個人的に感じた点を共有いたします。 (現在50%くらい聞いて、jsは私も初心者..ビギナーの立場で共有します。) 1.本当に王初歩タイプ - バニラjsは聞いただけを見た - addEventListenerという言葉は聞くだけだった - jsで特定の要素をどのようにインポートするのかわかりません。 本人が自分で基礎知識が足りないと判断されたら、他の講師様のjs理論講義を先に聞いた後にこの講義を聞くことをお勧めします。 2. それでも出力が出るタイプ - 一人で高品質のコードを書くことができないだけでif文を100個書いてもとにかく結果物は出すことができる - 少なくとも他人が編んだコードフローは把握できる ここに該当する場合は聞くこともできます。 個人的にはとても効率的な講義だと思います。現業では特定の技術だけ早くキャッ​​チして適用しなければならない時もありますが、この講義がぴったりそうに感じられます。短い時間でコアはすべて入っています。 問題は核心だけあるので理論が足りないと感じることができますが、理論は..グーグルシーンがあるので心配しなくてもいいです。私も混乱したり、もっと知りたい部分はグーグルで聞いています〜 最後に、講師に1つの小さな要求があります!画面に出てくるVSCodeのフォントサイズが小さいと思います。 :) そして、この講義の補強編として受講評に言及されたリサイズやモバイル版講義が出てもいいと思います。とにかく新規講義が出る前まで何度も何度も聞いているんです。ありがとうございます 👍👍

    • coding11
      Giảng viên

      とこのように長い受講評は初めてです。本当にありがとうございました^^ 実際に知人にメッセンジャーなどで質問されたことから選んで講義で制作してみました。現業でよく使われるものでもありますよ。授業に出てくるコードが短いですが、応用すれば本当に多様な業務を処理できますよ〜実務に役立ててほしいです。無駄。もちろん次の講義も実務ですぐ使える内容で準備中です。 それでは楽しい一年になります〜 (ストローサイトのようなthree.js講義もしたいですねいつか!)

  • lizb님의 프로필 이미지
    lizb

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    2% đã tham gia

    インタラクティブなWebクラスをいくつか聞きましたが、基本的な原則を学ぶことができてとても良かったです。ありがとうございます。

    • coding11
      Giảng viên

      Joonsolさんに感謝します!

  • mingj8294182님의 프로필 이미지
    mingj8294182

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    2% đã tham gia

    先生はたくさん気になっていましたが、講義していただきありがとうございます。繰り返し見ながらマスターします。

    • coding11
      Giảng viên

      受講評ありがとうございます!レスポンシブ、モバイルWebで適用する方法なので...ほぼ似ているのですが、stageResizeを利用するサンプルをさらに作るように見えました。 AS方法を考えてみましょう。ありがとうございます。

  • seujuj2827님의 프로필 이미지
    seujuj2827

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    2% đã tham gia

    面白い!

    • coding11
      Giảng viên

      受講評ありがとうございます!(大きな力になりますㅜㅜ)

925.315 ₫

Khóa học khác của coding11

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!