Bộ sưu tập xuất bản web trên thiết bị di động với Figma

"Các lý thuyết và bí quyết thiết yếu cho thiết kế giao diện người dùng web di động và sản xuất xuất bản
"Sản xuất thực tế có hệ thống"

Coding Works chứa đựng bí quyết sản xuất xuất bản web di động mà họ đã truyền đạt cho nhiều học viên học viện ngoại tuyến. Tôi tin chắc rằng sau khi hoàn thành khóa học này, bạn sẽ cải thiện đáng kể kỹ năng xuất bản!

🚩 Cập nhật bài giảng ( 2024.09.25 )

• Đệm cuộn, thay đổi thiết kế sau khi cuộn (jQuery), sử dụng hình ảnh tạm thời
• Phát hiện trình duyệt di động JavaScript (Chức năng mũi tên, User Agent)

🚩 Cập nhật bài giảng (2023.07.06)

• Hiển thị giỏ hàng trống như một hành động bổ sung và chọn/bỏ chọn tất cả các hộp kiểm giỏ hàng

▲ Sau khi tạo bản mô phỏng di động HTML+CSS, hãy sử dụng iframe

▲ Sản xuất bản mẫu di động HTML+CSS (cung cấp 3 bản mẫu di động đã hoàn thiện)

💡 Khóa học này còn có những điểm hấp dẫn nào nữa?

1. Bạn có thể có được kỹ năng tạo giao diện người dùng web di động thông qua quá trình thực hành sử dụng Figma.
2. Tìm hiểu các kỹ thuật viết HTML wireframe chi tiết giúp cải thiện đáng kể kỹ năng xuất bản của bạn.
3. Tìm hiểu những kiến ​​thức cơ bản về Clean Coding và xuất bản như một chuyên gia của CodingWorks.
4. Tài liệu này có nhiều bài tập và ví dụ, lời giải thích dễ hiểu và giải thích sâu sắc về các khái niệm.
5. Giải thích mọi thứ sinh viên cần biết về xuất bản web di động.

🚩 Đang tải trước trang

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Hiển thị cho người dùng biết danh tính của trang web di động là trang chủ của trang web di động.
3. Tự động di chuyển đến trang được chỉ định bởi JavaScript setTimeout
4. Liên kết toàn bộ một div với một tệp html bằng javascript nội tuyến

🚩 Trang đăng nhập

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Thiết kế nhiều thành phần hình thức khác nhau trong Figma và xuất bản kết quả chính xác như thiết kế.
3. Tìm hiểu chi tiết về các tính năng và thuộc tính của các phần tử biểu mẫu HTML.
4. Học tương tác CSS để thiết kế hộp kiểm tùy chỉnh hoặc radio tùy chỉnh từ các phần tử biểu mẫu đơn giản
5. Tạo GNB bên dưới dưới dạng một tệp riêng biệt và tải nó bằng jQuery để bao gồm nó (công việc thành phần)
6. Cách sử dụng hình ảnh SVG
7. Cách sử dụng và tận dụng các biểu tượng phông chữ (Biểu tượng Bootstrap)

🚩 Trang đăng ký thành viên

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Giống như trang đăng nhập, chúng tôi đã thiết kế nhiều thành phần biểu mẫu khác nhau trong Figma.
3. Tìm hiểu chi tiết về các tính năng và thuộc tính của các phần tử biểu mẫu HTML.
4. Áp dụng các thuộc tính CSS để làm cho các thành phần biểu mẫu đơn giản trông đẹp mắt
5. Sử dụng các lớp giả của phần tử biểu mẫu (:focus ::placeholder)
6. Tạo phần tiêu đề ở trên dưới dạng một tệp riêng biệt và tải nó bằng jQuery.

▲ Trang của tôi / Thanh trượt trang chính / Menu tab trang chính & Chân trang

🚩 Trang của tôi Trang

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Làm thế nào để tái sử dụng giao diện thẻ hiện có ở nhiều dạng khác nhau
3. Thiết kế huy hiệu và thiết kế và xuất bản giao diện người dùng thẻ mới
4. Cách sử dụng và tận dụng Flex Layout
5. Sử dụng biểu tượng phông chữ Unicode với các lớp ảo :before và :after

🚩 Trang chính

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Cách quản lý các cấu trúc HTML phức tạp và tạo ra các hệ thống phân cấp được tổ chức tốt (Clean Coding)
3. Cách sử dụng Slick Slider và trang trí Slick Slider đẹp mắt bằng Custom CSS
4. Tạo các thanh trượt phức tạp ở định dạng giao diện người dùng thẻ, không chỉ là các thanh trượt chính
5. Tạo một thanh trượt phản hồi tương thích với các thiết bị di động nhỏ, lớn và máy tính bảng
6. Tạo menu tab CSS tương tác để mở rộng nội dung trên web di động
7. Cách sử dụng thuộc tính CSS Object-fit trong thực tế
8. Các phương thức tương tác jQuery thiết yếu (kiểm soát lớp, chọn phần tử, trình xử lý sự kiện, v.v.)
9. Cách sử dụng JavaScript nội tuyến cần thiết
10. Thiết kế đánh số sử dụng counter-reset với lớp giả CSS

▲ Trang chi tiết (thanh trượt, accordion liên quan đến sản phẩm, tương tác nút mua hàng)

🚩 Trang chi tiết sản phẩm

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Cách quản lý các cấu trúc HTML phức tạp và tạo ra các hệ thống phân cấp được tổ chức tốt (Clean Coding)
3. Cách sử dụng Slick Slider và trang trí Slick Slider đẹp mắt bằng Custom CSS
4. Xuất bản điều hướng accordion liên quan đến sản phẩm dưới cùng với jQuery
5. jQuery modal phân nhánh đến giỏ hàng và mua ngay khi nút mua được nhấn
6. Thiết kế nút mong muốn biểu tượng phông chữ tương tác (toggleClass)
7. Tạo một Header mới dưới dạng một tệp riêng biệt và tải nó bằng jQuery

▲ Trang danh mục / Trang giỏ hàng / Trang tìm kiếm

🚩 Trang danh mục

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Tạo một Accordion danh mục jQuery
3. Thay đổi kiểu CSS dựa trên phần tử được chọn
4. Sử dụng biểu tượng phông chữ Unicode với các lớp ảo :before và :after

🚩 Trang giỏ hàng

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Thiết kế và xuất bản giao diện người dùng thẻ giỏ hàng
3. Tạo các thành phần biểu mẫu hiện có bằng CSS tùy chỉnh (chọn số)
4. Xóa và xóa tất cả các mục trong giỏ hàng bằng jQuery
5. Nhiều thuộc tính CSS3 (màu nhấn, thu phóng)

🚩 Trang tìm kiếm

1. Thiết kế giao diện người dùng Figma và tạo cấu trúc khung lưới HTML
2. Chèn biểu tượng phông chữ vào phần tử biểu mẫu tìm kiếm và sử dụng :focus ::placeholder
3. Sử dụng counter-reset với các pseudo-class CSS
4. Xóa kết quả tìm kiếm và xóa tất cả bằng jQuery
5. Thiết kế đánh số sử dụng counter-reset với lớp giả CSS

▲ Slick Slider CSS Thay đổi Kiến thức và Kiểm tra Điều hướng GNB

🚩 Kiến thức thay đổi CSS của Slick Slider

1. Tìm hiểu vị trí chính xác và bộ chọn mà bạn cần sửa đổi thông qua công cụ dành cho nhà phát triển.
2. Tìm hiểu cách khai báo bộ chọn CSS để tránh xung đột khi sử dụng nhiều thanh trượt slick
3. Thanh trượt CSS tùy chỉnh (điều hướng dấu chấm, điều hướng trước/sau, v.v.)

🚩 Kiểm tra điều hướng GNB

1. Tệp đã nhấp sẽ mở và kiểm tra các thiết kế khác bằng điều hướng GNB để định vị tệp (tương tự như ứng dụng Coupang)
2. Tự động hóa nút Quay lại trong Tiêu đề bằng JavaScript Nội tuyến

▲ Hoàn thiện công tác xuất bản

🚩 Hoàn thiện công việc xuất bản (thêm bản sửa đổi và bổ sung sau khi hoàn tất việc xuất bản)

1. Chi tiết sản phẩm (goods-detail.html) Vấn đề về lớp phủ
2. Thay đổi kích thước toàn chiều rộng (375px → 100%)
3. Sự cố với biểu tượng thông báo GNB(gnb.html) không được khắc phục
4. Vấn đề về chiều cao thanh trượt phía trước & Chu kỳ lề dưới của nội dung
5. Sử dụng CDN Slick Slider
6. Liên kết các tập tin HTML với JavaScript nội tuyến
7. Liên kết tiến và lùi với JavaScript nội tuyến
8. Liên kết các tệp GNB và hiển thị tất cả các trang đang hoạt động mà không có bất kỳ lỗi nào
9. Kiểm tra điều hướng được bật GNB trong các tệp được kết nối với GNB
10. Bố cục thân thiện với máy tính bảng và thiết bị di động kích thước lớn sử dụng các biến (Var)
11. Tạo một bản mô phỏng di động đẹp mắt với HTML+CSS và sử dụng nó như một iframe

💡 Cách sử dụng nội dung tệp tải xuống và thư mục

① Tải xuống khi bạn bắt đầu công việc thiết kế.
② Tải xuống khi bạn bắt đầu xuất bản tác phẩm.
③ Nếu bạn đang học xuất bản, hãy tải xuống để so sánh với mã sinh viên.
④ Nếu bạn đang tạo bản mô phỏng di động, vui lòng tải xuống.

💡 Công cụ biên tập văn bản xuất bản <Visual Studio Code>

Bài giảng này, < Danh mục xuất bản web di động với Figma>, được tạo bằng Visual Studio Code . Visual Studio Code là chương trình miễn phí và không có giới hạn sử dụng. Tất cả các video bài giảng đều được giải thích dựa trên Visual Studio Code.
Trước tiên, hãy tìm hiểu cách sử dụng cơ bản thông qua video YouTube của Coding Works bên dưới, sau đó tìm hiểu <Phần 3. Xuất bản chi tiết trên web di động (HTML+CSS+JS)>.

Tải xuống Visual Studio Code

H. Có cần phải có kiến ​​thức hoặc sự chuẩn bị trước nào không?

Người chơi không cần có kiến ​​thức hay sự chuẩn bị đặc biệt nào. Nếu bạn có kinh nghiệm cơ bản về sử dụng HTML+CSS, bạn có thể theo dõi và đạt được trình độ cải thiện kỹ năng cũng như kết quả như mong đợi. Tuy nhiên, vì chúng tôi thường xuyên sử dụng lý thuyết CSS trung cấp nên bạn cần có một số kiến ​​thức về nội dung học tập bên dưới.

😀 Danh sách phát YouTube của Coding Works - Lý thuyết trung cấp về CSS để xuất bản web di động

H. Tôi không có kinh nghiệm sử dụng chương trình đồ họa. Tôi có thể thiết kế trong Figma không?

Như tôi đã đề cập trong video giới thiệu, Figma có hiệu suất tuyệt vời so với công sức bỏ ra. Nếu bạn có một số kiến ​​thức cơ bản về PowerPoint, bạn có thể dễ dàng theo học lớp thiết kế Figma. Tuy nhiên, để hiểu rõ hơn về lớp học , tôi khuyên bạn nên xem video < [Phải đọc] Khóa học cơ bản về Figma thiết kế giao diện người dùng web di động> và tìm hiểu nâng cao thông qua kênh YouTube được giới thiệu.

H. Nội dung cốt lõi nào tạo nên sự khác biệt của bạn?

Đây là bài giảng về thiết kế ở cấp độ mà ngay cả những người không có kiến ​​thức trước đó cũng có thể sử dụng Figma hiệu quả, không phải là chuyên gia thiết kế. Do đó, lớp học thiết kế Figma, <Phần 1. Tạo thiết kế giao diện người dùng web di động với Figma>, không phải là lớp dành cho chuyên gia, nhưng dành cho người mới bắt đầu sử dụng Figma. Đây là cấp độ dễ chấp nhận đối với người mới bắt đầu.
Tuy nhiên, các lớp <Phần 2. Cấu trúc khung HTML cho xuất bản web di động> và <Phần 3. Xuất bản web di động chi tiết (HTML+CSS+JS)> là cách đáng tin cậy và có hệ thống nhất để cải thiện kỹ năng xuất bản do một giảng viên giảng dạy đã giảng dạy về xuất bản trong một thời gian dài. Tôi giảng dạy bằng . Và tôi nghĩ điều quan trọng là khóa học được thiết kế để giúp bạn dần đạt được kết quả chất lượng cao từ nhiệm vụ khó khăn và xa lạ là xuất bản web trên thiết bị di động.

H. Đây có phải là khóa học mà những người không chuyên về thiết kế cũng có thể tham gia không?

Hoàn toàn có thể. Như đã trình bày trong video <[Phải đọc] Khóa học cơ bản về Figma dành cho thiết kế giao diện người dùng web di động> ở Phần 1, nếu bạn giỏi sử dụng PowerPoint, bạn sẽ không gặp khó khăn khi học và sử dụng Figma. Tôi cũng đã học cách sử dụng Figma trong một thời gian ngắn cho khóa học này và tôi đã có thể đạt được kết quả thiết kế tốt.

H. Tôi là một nhà thiết kế và tôi giỏi Figma. Tôi có cần phải học Figma Design ở Phần 1 không ?

Như tôi đã đề cập trong video giới thiệu, tôi không phải là người đã sử dụng Figma trong thời gian dài hoặc giỏi sử dụng nó. Vì vậy, nếu bạn tự tin khi làm việc với Figma, bạn có thể bỏ qua <Phần 1. Tạo thiết kế giao diện người dùng web di động với Figma> và chuyển thẳng đến <Phần 2. Cấu trúc khung HTML để xuất bản web di động> để tìm hiểu.

H. Tại sao tôi nên tìm hiểu quy trình sản xuất xuất bản web di động và kết quả cụ thể mong đợi là gì?

Web di động có tầm quan trọng tối đa như một phần trong danh mục đầu tư cá nhân. Do đó, việc sử dụng web di động sẽ mang lại cho bạn lợi thế cạnh tranh trên thị trường việc làm. Ngoài việc đóng vai trò là danh mục công việc, hầu hết các công ty đang thực hiện và có kế hoạch thực hiện các dự án web di động. Theo quan điểm của một công ty như thế này, tôi nghĩ một danh mục đầu tư trên web di động được thiết kế tốt sẽ là tài liệu tham khảo tuyệt vời cho việc tìm kiếm việc làm và thay đổi nghề nghiệp.

Web di động có tầm quan trọng tối đa như một phần trong danh mục đầu tư cá nhân. Do đó, việc sử dụng web di động sẽ mang lại cho bạn lợi thế cạnh tranh trên thị trường việc làm. Ngoài việc đóng vai trò là danh mục công việc, hầu hết các công ty đang thực hiện và có kế hoạch thực hiện các dự án web di động. Theo quan điểm của một công ty như thế này, tôi nghĩ một danh mục đầu tư trên web di động được thiết kế tốt sẽ là tài liệu tham khảo tuyệt vời cho việc tìm kiếm việc làm và thay đổi nghề nghiệp.

Hiệu quả mong đợi cụ thể thực tế khác nhau ở mỗi người. Nhưng Coding Works có thể chắc chắn với bạn rằng ' khả năng tạo cấu trúc khung HTML của bạn sẽ được cải thiện đáng kể '. Bằng cách tạo ra nhiều cấu trúc khung HTML khác nhau, bạn sẽ được đào tạo đầy đủ về cách tổ chức hệ thống phân cấp HTML phức tạp. Chúng tôi cũng sẽ đi sâu vào cách đặt tên và chia sẻ tên lớp thống nhất.

Trong <Phần 2. Cấu trúc khung lưới HTML cho xuất bản web di động>, bạn sẽ học cách tạo nhiều cấu trúc khung lưới HTML khác nhau và trong <Phần 3. Xuất bản web di động chi tiết (HTML+CSS+JS)>, bạn sẽ học cách áp dụng xuất bản web di động thực tế. Bạn sẽ cảm thấy tự tin khi tạo ra một số bố cục giao diện người dùng web đẹp mắt.

H. Nội dung bài học được trình bày ở mức độ nào?

Do bản chất của web di động nên có rất nhiều tệp và thư mục. Vì vậy, rất nhiều nội dung đang tiến triển với tốc độ nhanh. Mức độ xem xét này khác nhau tùy thuộc vào tiêu chuẩn của từng cá nhân, nhưng nội dung khóa học đủ cho danh mục đầu tư cá nhân của nhà xuất bản. Hơn nữa, nội dung khóa học đủ để sử dụng thực tế khi làm việc trên web di động.

H. Tổng thời gian giảng bài là bao lâu?

Tổng thời lượng bài giảng video là khoảng 24 giờ, cung cấp đủ thời gian bài giảng để học chuyên sâu. Tổng cộng, công tác chuẩn bị xuất bản và công tác xuất bản chiếm khoảng 80% tổng thời gian, tức khoảng 18 giờ.
Thiết kế UI Figma - 5 giờ 40 phút / Cấu trúc khung lưới HTML - 4 giờ 30 phút / Xuất bản - 14 giờ 15 phút

H. Có lưu ý nào liên quan đến việc tham gia khóa học không (môi trường yêu cầu, những điều khác cần lưu ý, v.v.)?

Nội dung lớp học rất rộng và tiến triển nhanh. Tuy nhiên, tôi sẽ không bỏ qua mà không giải thích đầy đủ, mà sẽ giải thích chi tiết. Tôi nghĩ là bạn sẽ theo dõi tốt. Tuy nhiên, tôi thực sự khuyên bạn nên sử dụng môi trường có hai màn hình thay vì học tập bằng một màn hình. Vui lòng tham khảo video để biết thêm chi tiết về lý do tại sao kỹ năng xuất bản không cải thiện tương ứng với nỗ lực bỏ ra trong Phần 2 [Phải đọc] .

Giới thiệu người chia sẻ kiến ​​thức ✒️

Coding Works , đơn vị đã tạo ra khóa học <Mobile Web Publishing Portfolio with Figma> , hiện đang giảng dạy lý thuyết xuất bản, cách sử dụng và cách tạo trang chủ danh mục đầu tư cá nhân cho hơn 300 sinh viên trong các khóa học xuất bản do chính phủ tài trợ. Đặc biệt, giảng viên này đã có nhiều năm kinh nghiệm trong lĩnh vực xuất bản bài giảng và hướng dẫn hoàn hảo cho sinh viên trong toàn bộ quá trình chuẩn bị xin việc tại nhà xuất bản từ A đến Z, giúp hầu hết sinh viên tìm được việc làm ngay sau khi hoàn thành khóa học. Ngoài ra, tôi đã nhận được phản hồi tích cực từ sinh viên Inflearn rằng các bài giảng liên quan đến xuất bản của tôi rất hữu ích.

❤ Tin tức về việc đỗ kỳ thi publisher của sinh viên Coding Works

▲ Một sinh viên học với tôi trong khoảng 4 tháng rưỡi tại một khóa học xuất bản do nhà nước tài trợ đã nhận được tin nhắn KakaoTalk nói rằng anh ấy đã có việc làm.

▲ Tôi nhận được tin nhắn KakaoTalk về kết quả phỏng vấn dành cho học viên tham gia khóa học ngoại tuyến về cách tạo hồ sơ cá nhân tại Coding Works (ngày 24 tháng 4 năm 2023).

❤ Email được gửi bởi một sinh viên Coding Works sau khi nhận được việc làm tại một nhà xuất bản

Xin chào cô giáo :)

Thưa thầy, em là Kim O-jeong, một học viên đang theo học bài giảng của Inflearn.
Tôi là một sinh viên đã gửi email vào mùa hè này để xin lời khuyên về danh mục đầu tư cá nhân của mình.
Bạn còn nhớ không?😊😊

Không có gì khác hơn là,
Tôi gửi email này để thông báo với bạn rằng tôi đã thành công khi xin được việc tại một nhà xuất bản với danh mục đầu tư mà tôi nhận được từ bạn!

Thậm chí!!
Công ty đã liên hệ với tôi trước sau khi xem danh mục đầu tư mà tôi đăng trên Saramin, và tôi đã được phỏng vấn qua Zoom và trúng tuyển!
Công ty đã trả cho tôi mức lương mà tôi mong muốn, và tôi là một nhà xuất bản thực thụ, không làm công việc thiết kế hay phát triển! Tôi đã vào một công ty mà tôi chỉ có thể làm việc.

Đó là một công ty đang tìm kiếm một nhà xuất bản có kinh nghiệm, và họ đã liên hệ với tôi, một nhân viên mới, và hỏi lý do tại sao họ lại liên hệ với tôi.
Anh ấy nói rằng anh ấy đã xem qua danh mục đầu tư của nhiều người khác, nhưng anh ấy liên hệ với tôi vì "Định nghĩa chức năng" trong danh mục đầu tư của tôi đã thu hút sự chú ý của anh ấy.

Tôi nghĩ tất cả là nhờ vào bài giảng của giáo viên.
Nếu tôi không tham gia lớp học của giáo viên, hồ sơ của tôi sẽ chỉ ở mức trung bình, nhưng tôi đã có thể xin được việc làm thành công nhờ những lời khuyên tuyệt vời mà giáo viên đã chỉ cho tôi!

Mặc dù tôi chưa bao giờ thực sự gặp anh ấy,
Khi tạo danh mục đầu tư của mình, tôi đã dựa rất nhiều vào nó, tin tưởng nó và làm việc chăm chỉ trong khi xem các bài giảng của giáo viên!

Tôi cảm thấy kỹ năng của mình đã được cải thiện rất nhiều trong ba tháng tôi dành thời gian nghe giảng của giáo viên và tạo hồ sơ năng lực, nhiều hơn so với những kỹ năng tôi đã xây dựng được khi học các lớp học dài tại học viện.

Tôi vô cùng mong muốn điều đó,
Tôi đã tin tưởng và làm theo lời thầy giáo nói và kết quả thực sự tốt.

Cảm ơn bạn rất nhiều!

Hãy cẩn thận với corona
Tôi hy vọng sẽ gặp lại bạn với một bài giảng tuyệt vời nữa :)

Xin chào thầy cô~ Em là học viên Inflearn OOO~ Em tìm ra địa chỉ email từ câu trả lời của một học viên khác..😊😊

Tôi chỉ muốn nói lời cảm ơn 😊😊

Tôi đã gặp khó khăn khi tham gia lớp học của bạn và nộp hồ sơ xin việc trong khoảng hai tuần nay...
Tôi đã vượt qua cuộc phỏng vấn tại một công ty và quyết định đến làm việc.. Cảm ơn bạn rất nhiều..😭😭

Thực ra, tôi lo lắng vì tôi đã 32 tuổi. Tôi đã nộp rất nhiều hồ sơ xin việc nhưng không nhận được cuộc gọi nào.
Nhưng giám đốc nhân sự của công ty này lại nói rằng ông ấy không thích những người tốt nghiệp từ các học viện tư nhân 😊😊
Công ty mà tôi quyết định gia nhập khá nhỏ nhưng có nhiều nhà phát triển và thiết kế web.
Họ nói rằng họ sẽ đào tạo họ trong ba tháng và sau đó đưa họ vào thực hành.
Hơi xa và lương thì thấp nhưng mình sẽ cố gắng học hành chăm chỉ và cố gắng tăng lương~ 😊😊

Cảm ơn bạn rất nhiều vì mọi thứ. Thật tuyệt vời khi tôi có thể kiếm được việc làm bằng cách tham gia lớp học trực tuyến này và nhận được câu trả lời thỏa đáng cho những câu hỏi của mình.

Tôi sẽ tiếp tục học tập và nâng cao kỹ năng của mình bằng cách lắng nghe bài giảng của giáo viên. Cố lên~!

🙋🏻‍♂️ Trước khi bạn đặt câu hỏi! Hãy đọc nhé~!!

Nếu bạn có bất kỳ thắc mắc nào trong khi học, hãy hỏi. Khi đặt câu hỏi, bạn phải tải lên nội dung không hoạt động, mã và ảnh chụp màn hình kết quả của trình duyệt. Đối với mã, bạn phải tải lên tất cả mã HTML, CSS và JS để chúng tôi có thể đưa ra câu trả lời chính xác.

Nếu bạn chỉ mô tả vấn đề của mình bằng văn bản mà không đưa bất kỳ mã nào vào câu hỏi, sẽ rất khó để đưa ra câu trả lời chính xác, trừ khi vấn đề thực sự đơn giản. Sau đó, tôi không còn lựa chọn nào khác ngoài việc trả lời lại rằng 'Vui lòng tải lên mã HTML, CSS, JS và trình duyệt~', điều này gây ra nhiều phiền phức và mất nhiều thời gian hơn để tìm ra giải pháp.

▲ Vui lòng kiểm tra các câu hỏi thường gặp trong cộng đồng bài giảng có liên quan trước~

⚡ Không thể thiếu để học tập hiệu quả! Vui lòng tham khảo kênh YouTube của Coding Works Publishing.

Vui lòng xem video bài giảng lý thuyết trên kênh YouTube của Coding Works Publishing. Tất nhiên, không phải tất cả video lý thuyết đều có trên kênh YouTube, nhưng hầu hết các video lý thuyết quan trọng đều có trên đó. Vì có rất nhiều video nên bạn nên tìm kiếm những video như ví dụ bên dưới.

Kênh YouTube của Coding Works Publishing: https://www.youtube.com/codingworks