강의

멘토링

커뮤니티

Programming

/

Front-end

Tạo Component UI dựa trên Vanilla JS - Tab Menu

Để xây dựng một trang web, bạn cần có khả năng tạo ra các thành phần nhỏ (component). Chúng ta sẽ cùng nhau tạo ra các UI component chỉ bằng code thuần. Điều này phù hợp với những người đã biết sử dụng html, css, javascript.

8 học viên đang tham gia khóa học này

Độ khó Cơ bản

Thời gian Không giới hạn

  • codingghost2025
HTML/CSS
HTML/CSS
vanilla-javascript
vanilla-javascript
HTML/CSS
HTML/CSS
vanilla-javascript
vanilla-javascript

Bạn sẽ nhận được điều này sau khi học.

  • Tôi không hiểu "html" có nghĩa là gì trong ngữ cảnh này. Bạn có thể cung cấp thêm ngữ cảnh hoặc câu đầy đủ hơn không?

  • CSS

  • JavaScript

Chuỗi thành phần giao diện người dùng dựa trên Vanila JS

Mã hóa các thành phần cần thiết cho trang web của bạn bằng HTML, CSS và Vanilla Javascript.

  • Bạn chỉ có thể cải thiện kỹ năng của mình nếu bạn tuân thủ những điều cơ bản.

  • Ngay cả khi bạn nhận được tệp thiết kế Figma, bạn vẫn có thể mã hóa bố cục và tương tác theo cùng một cách.

Tìm hiểu về những điều này

Tạo một menu tab

Học chậm rãi và từng bước, từ mã HTML đến kiểu CSS. Lúc này, các học viên sẽ hướng dẫn bạn những khu vực cần chú ý và cân nhắc về khả năng tiếp cận.
Tìm hiểu về aria-controls và aria-selected.

Vanila JS

Viết mã để kiểm soát và thao tác các phần tử DOM bằng JavaScript thuần túy, mà không cần sử dụng jQuery hoặc các thư viện JavaScript khác.

Tìm hiểu cách kiểm soát biến CSS bằng JS.

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành

  • Hệ điều hành và Phiên bản (OS): macOS

  • Công cụ sử dụng: VS code, trình duyệt Chrome

  • Thông số kỹ thuật PC: Không liên quan

Tài liệu học tập

  • Bạn có thể tải xuống tệp mã nguồn.

  • Bạn có thể tải xuống tệp PDF chứa mã nguồn.

Kiến thức và ghi chú của người chơi

  • Đây là khóa học tốt cho những người có thể sử dụng HTML, CSS và Javascript.

  • Hãy để lại câu hỏi và chúng tôi sẽ trả lời.

  • Việc phân phối và sử dụng hình ảnh và tệp PDF trong tài liệu bài giảng cho mục đích thương mại đều bị nghiêm cấm.

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

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

  • Ai muốn thử tự mình thực hiện tab menu bằng Vanilla Javascript?

  • Dành cho những ai muốn vừa làm theo vừa lập trình.

  • Nếu bạn muốn tạo một ví dụ sử dụng HTML, CSS, và JavaScript.

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

  • Tôi không hiểu "html" có nghĩa là gì trong ngữ cảnh này. Bạn có thể cung cấp thêm ngữ cảnh hoặc câu đầy đủ hơn không?

  • CSS

  • JavaScript

Xin chào
Đây là

Xin chào. Tôi là một freelancer điều hành doanh nghiệp một thành viên, hiện đang làm song song cả thiết kế sản phẩm và lập trình.
Tôi đã thực hiện vô số dịch vụ web, ứng dụng hybrid và ứng dụng native từ khâu lập kế hoạch cho đến khi ra mắt.
Vài năm trước, tôi đã đến định cư tại Jeju để cho bản thân - người đã luôn chạy không ngừng nghỉ suốt thời gian qua - một chút thời gian nghỉ ngơi, đồng thời từng bước để lại dấu ấn về những kiến thức đã tích lũy và những gì tôi từng giảng dạy cả online lẫn offline.

Trong khi tạo bài giảng, tôi luôn cố gắng không quên việc giữ cho mọi thứ thật chậm rãi và dễ hiểu, để bạn có thể cảm thấy rằng "À, cái này cũng dễ làm mà nhỉ?". Ngoài ra, việc giúp bạn cảm nhận được thành tựu thông qua việc thực hành các ví dụ cũng là một phần trong kế hoạch của tôi ^^:: Hôm nay chúng ta hãy cùng viết thêm một dòng code nữa rồi hãy đi ngủ nhé. Chúc mọi người thành công~!

Tác giả cuốn sách tự học coding năm 2025, 'Coding-Level-Up'
Tôi đang vận hành kênh YouTube 'Coding Ghost'
Kênh YouTube: https://www.youtube.com/@codingghost941
Instagram: @blackcrown.design.studio
Instatoon freelancer 'Irangi': @ejey.irangi

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

Tất cả

10 bài giảng ∙ (1giờ 15phú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á

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

293.900 ₫

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!