강의

멘토링

로드맵

Inflearn brand logo image
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

  • codingghost2025
실습 중심
vanillaJS
HTML/CSS
vanilla-javascript

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

  • 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à

안녕하세요. 저는 프로덕트 디자인과 코딩을 같이 하고 있는 1인 기업 프리랜서 입니다.
수많은 웹서비스와 하이브리드 앱, 네이티브 앱을 기획부터 런칭까지 하였습니다.
몇년전 제주에 와서 터를 잡으며, 그동안 쉼없이 달려온 저에게 잠시 쉼을 주고, 그동안 온/오프라인으로 강의했던 것들과 쌓아온 지식들을 하나하나 발자취를 남기고 있습니다.

강의를 만들면서, 천천히.. 쉬웠으면 좋겠다. '아, 이거 할만하네?'라는 생각이 들게 하는 것을 항상 잊지않으려고 합니다. 또한, 예제를 만들어보면서 성취감을 느껴보게 하는 것 또한 저의 계획의 일부입니다 ^^:: 우리 오늘도 한줄 더 코딩하고 잠자리에 듭시다. 여러분, 응원합니다~!

2025 나혼자 하는 코딩독학서, '코딩-레벨-업' 저자
유튜브 '코딩고스트'를 운영하고 있습니다.
유튜브 채널 : https://www.youtube.com/@codingghost941
인스타그램 : @blackcrown.design.studio
프리랜서 인스타툰 '이랑이' : @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!

298.942 ₫

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!