Đây không phải là bài giảng chỉ đơn thuần theo dõi một trang web cụ thể, mà đúng hơn là bài học vững chắc về những điều cơ bản của bí quyết tương tác cuộn và các yếu tố cốt lõi được chia sẻ bởi những người chia sẻ kiến thức, cũng như tìm hiểu và tạo ra nhiều kỹ thuật và chuyển động khác nhau của tương tác cuộn UI được sử dụng rộng rãi. bởi các công ty trong nước như Apple.
Chúng tôi sẽ giải thích các nguyên tắc tương tác phản hồi khi cuộn qua nhiều ví dụ khác nhau.
Apple sử dụng cách tương tác như thế nào
Các kỹ thuật tương tác thường được sử dụng và áp dụng trong thực tế
Motion Graphic cơ bản (tiêu chuẩn thực tế)
Kỹ thuật Parallax
Thông báo cập nhật khóa học
Xin chào. Khóa học đã được cập nhật.
1. Để giúp bạn hiểu rõ hơn, ngoài các bài học hiện tại tập trung vào giải thích các khái niệm cốt lõi, chúng tôi đã bổ sung thêm các bài học giải thích trong khi viết code JavaScript.
2. Đã thêm bài học vềchuyển đổi code được tạo bằng JQUERY sang Vanilla JS.
3.Bài học thưởng Phần 12 đã được thêm vào.
4.Ví dụ thưởng Phần 12 đã được thêm vào.^__^*
Tạo tương tác cuộn UI thú vị!
Video xem trước toàn bộ khóa học
Dự án làm việc gần đây
Xin chào, nguyên lý cơ bản của một phần UI và motion liên quan đến scroll trên kênh YouTube Kkangcoding đã được bao gồm trong khóa học này. Kênh Kkangcoding cũng có nhiều tương tác đa dạng nên hãy xem thử nhé :D
PS. Khóa học này được thiết kế dành cho người mới bắt đầu! Đối với người mới nhập môn, khóa học có thể hơi khó một chút. :)
Phần 2-1
Tính phần trăm cuộn trang.
Khi bạn đọc hết văn bản bên trái màn hình, bạn sẽ thấy thanh gauge đã đầy.
▲ Thanh tiến trình tăng dần theo cuộn trang
Phần 2-2
Trong phần 2, chúng ta sẽ tìm hiểu về nguyên lý cuộn vô hạn được sử dụng trên Naver, Google và các nền tảng khác.
▲ Cuộn vô hạn
Phần 3
Trong phần 3, chúng ta sẽ tìm hiểu về các khái niệm cơ bản như transition, transform và vendor prefix dành cho người mới bắt đầu
và cũng tìm hiểu về CSS Animation cùng xử lý gia tốc transition.
▲ Transform, Transition & CSS Animation
Phần 4
Trong phần 4, chúng ta sẽ sử dụng nguyên lý cuộn cơ bản và CSS Animation đã học trước đó để tạo ra hiệu ứng parallax đơn giản như sau và tìm hiểu về hiệu ứng animation thay đổi tại điểm cụ thể khi cuộn.
▲ Hiệu ứng Cuộn Parallax
Phần 5
Trong phần 5, chúng ta sẽ học về tương tác di chuyển lên xuống theo kích thước màn hình khi cuộn lên xuống,
và cũng sẽ thực hiện hiệu ứng parallax đa tầng bằng cách ứng dụng CSS Animation và hiệu ứng parallax đã học trước đó.
(Tương tác di chuyển lên xuống theo kích thước màn hình không hoạt động bình thường khi bật tính năng smooth scrolling trên trình duyệt Edge. Tính năng này là tùy chọn do trình duyệt cung cấp và hoạt động bình thường khi tắt tính năng smooth scrolling. Trong bài học, chúng ta sẽ học cách kiểm tra trình duyệt Edge và làm cho tính năng này không hoạt động trên Edge.)
▲ Cuộn Đa Thị Sai
Phần 6
Trong phần 6, chúng ta sẽ tạo năm hiệu ứng chuyển động css và hiệu ứng đếm ngược ngày được tạo bằng javascript và css animation, đồng thời học cách phát chuyển động đã tạo khi đến vị trí của phần đó.
▲ Các hiệu ứng chuyển động đa dạng
Phần 7
Trong phần 7, chúng ta sẽ học về tương tác cố định và xử lý section. Chúng ta sẽ học cách tạo tương tác có cốt truyện trong đó văn bản giới thiệu biến mất, cánh cửa nền đen mở ra, hình ảnh phía sau thu nhỏ và xuất hiện, cuối cùng là văn bản kết thúc hiện ra.
▲ Tạo tương tác có câu chuyện
Phần 8
Trong phần 8, chúng ta sẽ học cách tạo tương tác bằng cách cố định hình ảnh sản phẩm ở bên phải và khớp hình ảnh với nội dung văn bản.
▲ Tạo tương tác văn bản phù hợp với hình ảnh sản phẩm
Phần 9
Ví dụ bạn sẽ học trong Phần 9 là cố định nội dung và vẽ nhiều hình ảnh lên canvas để tạo ra tương tác video. Chúng ta cũng sẽ tìm hiểu phần xử lý mô tả sản phẩm như sau.
▲ Tương tác được tạo bằng cách vẽ nhiều hình ảnh lên canvas
Phần 10-1
Phần 10 đã được thêm vào Giao diện Phần 10 được xây dựng dựa trên những kiến thức cơ bản đã học và là bài học được tạo ra cùng với người chia sẻ kiến thức((Hiệu ứng 3D không được hỗ trợ trên trình duyệt IE. Được hỗ trợ trên thiết bị di động và các trình duyệt Chrome, Firefox, Safari, Opera)
▲ Kích hoạt điều hướng phản ứng với vị trí section khi cuộn, văn bản tiêu đề thay đổi khớp với tiêu đề của section, màu văn bản thay đổi theo từng section - Áp dụng bài giảng đã học trước đó để triển khai UI có 3 tính năng sau.
Phần 10-2
Sử dụng css để tạo mô hình 3D và triển khai sao cho nó biến đổi khi cuộn trangTrông giống như một đoạn quảng cáo phải không??
▲ Tạo mô hình 3D bằng CSS
Phần 10-3
Phần ứng dụng thực hành đơn giản Áp dụng hình ảnh vào mô hình 3D đã học trước đó để tạo vật thể 3D và triển khai chuyển động có chiều sâu hơn khi cuộn trang.
▲ Có thể tạo hiệu ứng 3D cơ bản mà không cần sử dụng video hoặc nhiều hình ảnh
Phần 10-4
Áp dụng hình ảnh của từng section vào mô hình 3D đã học trước đó để xử lý sao cho thay đổi thành hình ảnh phù hợp với section
Nếu áp dụng hiệu ứng này thì có thể triển khai vật thể 3D thay đổi theo từng section phải không??
▲ Khớp hình ảnh phần với hình ảnh mô hình 3D
Chỉ cần sửa một giá trị, bạn có thể tạo hiệu ứng không gian 4 chiều và cả hiệu ứng đường nét như thế này!
▲ Chỉ cần sửa một giá trị mà có thể làm được như thế này sao?? :D
PS. Các tương tác xuất hiện trong bài giảng Phần 10 là những tương tác được tạo ra từ ý tưởng của người chia sẻ kiến thức, không phải là bản sao.
Thử thách Phần 10-5
Bài học này là bài học thử thách để tùy chỉnh ví dụ Section 10 đã tạo trước đó.
Nhiệm vụ 1. Hãy tách riêng hàm cần thực thi một lần khi vào section và hàm cần thực thi liên tục
Khi cần giúp đỡ, hãy tham khảo video bài giảng :D
Thử thách Phần 10-6
Bài học này là bài học thử thách để tùy chỉnh ví dụ Section 10 đã tạo trước đó.
▲ Chúng ta sẽ triển khai UI giới thiệu sản phẩm một cách chi tiết
Nhiệm vụ 1. Hãy thêm lớp phủ tối màu đen vào phần đầu tiên và làm cho màu nền từ từ xuất hiện khi cuộn trang
Nhiệm vụ 2. Hãy làm cho điện thoại xoay khi đến phần thứ 2~4
Tự thử thách bản thân để tạo ra và nếu cần giúp đỡ thì tham khảo video bài giảng nhé!
Phần 11
Phần 11 là tương tác được tạo bằng SVG và video
Sử dụng công thức scroll đã học trước đó để rất dễ dàng tạo tương tác vẽ đường SVG và xuất hiện video khi cuộn trang
▲ Tương tác sử dụng SVG và Video
Phần 12 - Thêm bài học Bonus
Phần 12 là tương tác văn bản xuất hiện và biến mất
Tương tác này chỉ được hỗ trợ trên các trình duyệt mới nhất.
▲ Tương tác sử dụng keyframes đã học trước đó
Phần 12 - Thêm ví dụ Bonus
Đây là ví dụ bonus được thêm vào bằng cách sử dụng keyframe đã học đơn giản ở Section 12. Tôi hy vọng qua ví dụ này bạn sẽ tìm ra nhiều cách ứng dụng đa dạng và vì chỉ có css thay đổi một chút nên không có bài giảng. Nếu có phần nào khó hiểu thì hãy để lại câu hỏi nhé!
Tương tác này chỉ được hỗ trợ trên các trình duyệt mới nhất.
▲ Bonus ví dụ 01
▲ Ví dụ thưởng 02
▲ Ví dụ thưởng 03
▲ Ví dụ thưởng 04
▲ Ví dụ thưởng 05
▲ Ví dụ bổ sung 06
Mã nguồn mở BONUS UI của Kkangcoding
PS. UI thưởng có thể áp dụng trong thực tế
chỉ có mã ví dụ mà không có bài giảng!
▲ Vẽ hình tròn trên Canvas - Rất hữu ích khi tạo
trang web tương tác hoặc biểu đồ donut đơn giản.
▲ Panorama hình ảnh - Đây là panorama được triển khai bằng requestAnimationFrame.
Hãy tìm hiểu về đệ quy và nguyên lý vòng lặp vô hạn của panorama.
▲ Tab hình ảnh - Hãy học về hiệu ứng fade cơ bản nhất và
hiệu ứng nút trượt.
▲ Không thích modal giật cục:(
Giải quyết hiện tượng giật cục khi mở modal và ẩn thanh cuộn!
Làm thế nào để triển khai?? Hãy học với đoạn code rất đơn giản
Không phải là gì to tát lắm nhưng đây là mã nguồn mở mà trước đây tôi đã tạo ra và chia sẻ với cộng đồng dành cho các bạn đang tìm việc, các bạn mới vào nghề, và những người còn yếu về JavaScript :D (Hồi đó làm với tâm trạng rất phấn khởi nhé)
Đoạn code trên cũng được đính kèm như một giao diện bonus trong file ví dụ của khóa học với mong muốn giúp ích cho các học viên Inflearn :D Các bạn có thể tìm thấy trong thư mục bonus_ui của file ví dụ, mong các bạn sử dụng hiệu quả nhé :)
BonusUI không có bài giảng nhưng mong các bạn tự mình thử in log và thay đổi code để học tập cũng như sử dụng. Sau này khi có thời gian, tôi dự định sẽ đăng bài giảng miễn phí lên YouTube, nên những bạn gặp khó khăn trong việc phân tích code hãy tham khảo YouTube sau nhé :D
1. Có các bài học giải thích trong khi viết code và có các bài học giải thích trong khi đọc code.
• Mặc dù có phần trùng lặp giữa hai loại bài học, nhưng tôi nghĩ sẽ hữu ích hơn nếu sử dụng chúng như một khái niệm ôn tập.
2. Khóa học hướng dẫn chuyển đổi phần code được viết bằng jQuery sang vanilla JS.
• Học cả code jQuery và vanilla JS để bắt được hai con thỏ cùng lúc.
3. Tôi sẽ chia sẻ nguyên xi bí quyết tạo interaction được sử dụng trong thực tế.
• Tôi sẽ giải thích cực kỳ chi tiết phương pháp tạo interaction giúp tăng vọt mức lương của bạn.
4. Được giải thích để có thể học ngay cả khi không biết nhiều về JavaScript.
• Phần JavaScript sẽ được giải thích chi tiết nhất có thể. Đầu tiên giới thiệu về phần khai báo biến và hàm, sau đó đọc theo thứ tự thực thi chương trình và giải thích từng phần một, vì vậy bạn có thể nắm được kỹ năng chỉ bằng cách ghi nhớ các pattern xuất hiện trong khóa học.
5. Học tập tập trung vào ví dụ được áp dụng và tạo ra
• Tôi đã cố gắng tạo ra một khóa học để lại ấn tượng trong đầu bạn, không chỉ là xem một lần rồi thôi, bằng cách áp dụng các mẫu lặp lại với nhiều ví dụ đa dạng. Hy vọng bạn có thể hiểu và áp dụng dễ dàng hơn. 😊
6. Giải thích một cách dễ hiểu nhất có thể
• Khi mới bắt đầu học lập trình, tôi đã gặp rất nhiều khó khăn vì không hiểu được. Vì vậy, tôi hiểu rõ những khó khăn mà người mới bắt đầu gặp phải... Tôi đã viết code sao cho dễ hiểu nhất có thể và chọn những từ ngữ đơn giản để giải thích.
7. Được sản xuất để không gây nhàm chán
• Thường thì nếu có khoảng trống nhỏ ở giữa sẽ dễ gây nhàm chán. Với việc chỉnh sửa chặt chẽ, khóa học sẽ giải thích liên tục không ngừng nghỉ. Hãy thử tập trung chỉ 5-15 phút một lần!
8. Tôi đã cố gắng giảm thiểu lượng code tối đa :)
• Code quá dài thì khó học và mất nhiều thời gian để tiếp thu phải không? Tôi đã cố gắng làm cho nó ngắn gọn và súc tích nhất có thể. Vì thời gian của bạn rất quý giá!
9. Chỉ giải thích những điều cốt lõi.
• Vì thời gian của bạn rất quý giá! Tôi đã loại bỏ những thứ "biết chi tiết thì tốt hơn... nhưng không cần biết ngay lập tức".
10. Giảm thiểu những câu chuyện phiếm.
• Vì thời gian của bạn rất quý giá! Tôi đã loại bỏ những câu chuyện phiếm và những giải thích không cần thiết.
11. Chỉnh sửa zoom in/out code ví dụ.
• Đã chỉnh sửa zoom in code ví dụ để dễ dàng đọc code trên màn hình thiết bị di động. Hãy dành chút thời gian trên đường đi học, đi làm nhé :D
Q. Bạn có giải đáp những phần khó trong bài học không?
Tất nhiên là có rồi :D Khi bạn để lại câu hỏi trong mục Hỏi & Đáp, tôi sẽ nhận được email trong vòng 1~5 giờ và sẽ trả lời ngay sau khi xác nhận. Hãy nhớ hỏi và hiểu rõ những điều khó hoặc thắc mắc trước khi tiếp tục nhé!
Q. Người không chuyên ngành có thể học được không?
A. Ngay cả người không chuyên ngành, nếu biết cơ bản về HTML và các thuộc tính CSS cơ bản như width, color, position thì hoàn toàn có thể học được, khóa học được thiết kế để phù hợp với mọi người.
Q. Trong thực tế có sử dụng jQuery không?
A. Hầu hết các trang web được phát triển ở Hàn Quốc đều sử dụng jQuery và có rất nhiều dự án trong công việc thực tế vẫn đang bảo trì hoặc sử dụng jQuery. Ngoài ra, các framework Front-End như React, Vue JS cũng sử dụng jQuery để thao tác DOM. Nếu bạn đã quen thuộc với Vanilla JS thì jQuery sẽ rất dễ dàng, vì vậy việc nắm vững cả hai sẽ giúp ích rất nhiều trong công việc thực tế. :)
Thứ nhất!
Chuẩn bị sẵn code mẫu của bài học và học tập bằng cách so sánh với video bài giảng Nếu khó hiểu biến, công thức được giải thích trong bài giảng thì hãy nhấn nút pause và kiểm tra bằng CONSOLE.LOG rồi tiếp tục!
Thứ hai!
Hãy xem từ Section 2 một cách thật bình tĩnh và nhất định phải hiểu về nguyên lý tương tác cuộn! Có vẻ như có một số bạn đang xem bài giảng từ giữa chừng, nhưng nội dung bài học của bài giảng tương tác cuộn phần 1 được áp dụng và lặp lại liên tục từ Section 2 đến 11, và được thiết kế để giúp bạn tự nhiên hiểu về nguyên lý thông qua việc học lặp lại.
Thứ ba!
Phần kiểm tra code đã có sẵn trong code mẫu hoàn chỉnh, bạn hãy trực tiếp chỉnh sửa thử và in log các biến liên quan đến công thức để xem, tôi khuyên bạn nên dành thời gian cá nhân để nhất định ôn tập lại! (Nếu bạn không biết cách in log?? Hãy mạnh dạn hỏi nhé!)
Thứ tư! Điều nên biết!
Lý do tập trung vào việc giải thích code một cách chi tiết trong bài giảng là vì khi lập trình, việc nắm bắt thứ tự thực thi và cấu trúc tổng thể của chương trình là quan trọng nhất.
Khi nắm được cấu trúc tổng thể và hiểu được thứ tự thực thi, bạn sẽ có thể hình dung chính xác trong đầu phần nào cần sửa đổi và cải thiện trước tiên khi tùy chỉnh chương trình hoặc khi xảy ra lỗi! Nếu bạn rèn luyện thói quen hình dung cấu trúc tổng thể của chương trình trong đầu, bạn sẽ bắt đầu tích lũy được bí quyết trong việc xây dựng cấu trúc chương trình mà không hề hay biết:)
Khóa học này dành cho ai?
UI/UX là lĩnh vực mà bạn quan tâm
Dành cho những ai quan tâm đến đồ họa chuyển động
Dành cho những ai muốn tạo ra một trang web khiến mọi người phải thốt lên ngưỡng mộ, chẳng hạn như trang web của Apple hoặc một trang web được tạo ở nước ngoài.
Những người quan tâm đến trang chủ sáng tạo và độc đáo
Người tìm việc muốn tạo một danh mục đầu tư đặc biệt
Những người giỏi xuất bản nhưng yếu về JavaScript
Nhà thiết kế nhưng quan tâm đến tương tác
Dành cho những ai muốn tăng lương bằng cách bổ sung kỹ năng tương tác!
Cần biết trước khi bắt đầu?
Kiến thức cơ bản về HTML, CSS, JavaScript (kể cả khi bạn không có kiến thức trước, bạn cũng có thể thử học những nội dung trong bài giảng và ghi nhớ chúng)
1,341
Học viên
79
Đánh giá
163
Trả lời
4.7
Xếp hạng
3
Các khóa học
안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)
10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.
저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요
많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.
제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.
그럼 수업에서 뵙겠습니다 :)
Tất cả
78 bài giảng ∙ (11giờ 23phút)
Tài liệu khóa học:
Tất cả
42 đánh giá
4.6
42 đánh giá
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Tôi thậm chí còn không nhận thấy thời gian trôi qua. Điều đó thực sự dễ hiểu vì các ví dụ được áp dụng nhiều lần! Thành thật mà nói, tôi đã đăng ký khóa học vì nghĩ rằng nó không lãng phí tiền vì chỉ cần tải xuống mã sẽ giúp tôi học các kỹ năng cần thiết ở nơi làm việc, nhưng tôi rất biết ơn vì bạn thậm chí còn giải thích rõ ràng mọi thứ! Kỹ năng tăng 300%! Haha, nếu tôi xem bài giảng trước khi đi xin việc, tôi nghĩ tôi có thể liệt kê mức lương mong đợi của mình cao hơn.. Thật đáng tiếc.. ㅜㅜ À, CEO của công ty tôi đã yêu cầu tôi tải phần 2 nhanh lên.. haha Bổ sung. bài giảng còn thiếu!! Làm 3D thú vị hơn tôi nghĩ Haha!
Xin chào, em yêu! Cảm ơn bạn chỉ vì lời nói của bạn :) Tôi hy vọng bạn có thể tạo các trang web và ứng dụng tốt hơn bằng cách sử dụng tương tác cuộn!! Cảm ơn bạn một lần nữa vì đã để lại đánh giá hữu ích!!! :D Một giao diện người dùng bổ sung vừa được thêm vào tệp ví dụ! Hãy tải lại nhé^.^ Chúng tôi sẽ cố gắng hết sức để tạo ra nhiều khóa học giàu thông tin và hữu ích hơn :)
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
Ưu điểm của lớp này: 1. Mã thân thiện // Bằng cách viết mã trực quan và dễ hiểu, bạn có thể hiểu mã được cấu trúc như thế nào. 2. Bài giảng thân thiện // Ngay cả khi tự học chăm chỉ, bạn vẫn có thể tìm ra những phần mình đã bỏ sót qua bài giảng. Dòng chảy tổng thể được giải thích một cách dễ hiểu. 3. Một lượng lớn thông tin tương tác // Tôi thích điều này nhất. Bạn có thể thực hiện nhiều tương tác chỉ bằng cách xem bài giảng này. Mã này bao gồm JQuery, điều này hơi đáng thất vọng, nhưng nó có vẻ là một lợi thế hơn là một bất lợi vì nó cung cấp thực hành trong việc chuyển đổi JQuery sang JavaScript. Cuối cùng, cảm ơn bạn đã chuẩn bị một lớp học tuyệt vời như vậy.
Xin chào Front Occupy! Cảm ơn đánh giá có giá trị của bạn :D Chúng tôi sẽ cố gắng tạo ra nhiều lớp học giàu thông tin và hữu ích hơn^.^
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Tôi là người không chuyên. HTML và CSS rất dễ nên sau khi học chúng ở học viện khoảng 3 tháng, tôi đã có thể học những điều cơ bản rất dễ dàng. Tuy nhiên, tôi đã gặp khó khăn với JavaScript và suy sụp tinh thần nhiều lần, nhưng bạn thực sự đã giải thích từng dòng của tập lệnh một cách dễ hiểu nên tôi có thể hiểu rõ và học cách tạo tương tác cuộn từ những điều cơ bản ! Tôi sẽ nghe những bài giảng hay và học tốt những kỹ năng nâng cao! Và tôi thực sự khen ngợi chất lượng âm thanh của bài giảng!! ^^
Chào ngày vui vẻ :D Cảm ơn bạn đã để lại đánh giá ủng hộ :D Chúng tôi sẽ cố gắng tạo ra những bài giảng tốt hơn cảm ơn bạn một lần nữa
Đánh giá 3
∙
Đánh giá trung bình 5.0
5
Giả sử bạn biết những điều cơ bản ở một mức độ nào đó, bạn chỉ giải thích những gì bạn cần, vì vậy tôi chỉ có thể nhận được những gì cá nhân tôi muốn. Cảm ơn bạn.
Xin chào Bang Gyu-bong :D Tôi rất vui vì bạn đã có được thứ mình cần! Cảm ơn :) Chúng tôi sẽ cố gắng tạo ra nhiều khóa học bổ ích và nhiều thông tin hơn :D
Đánh giá 5
∙
Đánh giá trung bình 5.0
5
Tôi sẽ lắng nghe cẩn thận và sử dụng nó ~ Cảm ơn bạn ~
Xin chào sinh viên :) Cảm ơn bạn đã đánh giá có giá trị của bạn! Chúng tôi sẽ cố gắng tạo ra nhiều khóa học giàu thông tin và hữu ích hơn :)
2.536.000 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!
![Chức năng phát triển thiết kế web [2025] Toàn bộ thực hành (có thể hỏi qua KakaoTalk)講義サムネイル](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[Chân lợn ảo] Từ thiết kế đến viết mã講義サムネイル](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
