HTML+CSS+JS Portfolio thực tế (mùa 2)

Cuối cùng, bài giảng xuất bản Coding Works được mong đợi từ lâu (?)
Khóa học HTML+CSS+JS Practical Portfolio mùa 2 đã mở.

Phần 2 tập trung vào những ví dụ thực tế hoàn toàn mới, không trùng lặp với các ví dụ xuất bản thực tế từ Phần 1. Khóa học này phù hợp với những người muốn nâng cao kỹ năng xuất bản lên trình độ trung cấp hoặc cao hơn , vì khóa học này bao gồm việc tạo danh mục xuất bản để xin việc.

H. Tôi có thể học ngay Phần 2 mà không cần học Danh mục đầu tư thực hành HTML+CSS+JS Phần 1 không?

Bạn không nhất thiết phải nghe Phần 1. Tuy nhiên, trong khi Phần 1 cung cấp lời giải thích chi tiết về những điều cơ bản của việc xuất bản thì Phần 2 lại giảm thiểu những phần đó và thay vào đó đề cập đến nội dung chuyên sâu hơn. Trước tiên, hãy xem các ví dụ từ Phần 1 và nếu bạn cảm thấy đủ tự tin để tạo ví dụ của riêng mình, bạn có thể chuyển sang Phần 2. Tuy nhiên, vì nội dung giải thích và ví dụ đưa ra trong Phần 1 không trùng lặp với Phần 2 nên chúng tôi khuyên bạn nên học Phần 2 sau khi hoàn thành Phần 1.

HTML+CSS+JQUERY Portfolio Thực hành xuất bản (Phần 1)
Tìm hiểu những nguyên tắc cơ bản về xuất bản với nhiều ví dụ thực tế

H. Bạn có cung cấp HTML hoàn chỉnh được tạo trong HTML+CSS+JS Practical Portfolio Season 2 không?

Đúng. Trong phần Tải xuống tài nguyên cho sinh viên, bạn có thể tải xuống tệp zip chứa toàn bộ các ví dụ thực tế có trong video. (HTML, CSS, JS, hình ảnh, trang tham khảo, văn bản nguồn, PDF khung, v.v.)

※ Trước khi bắt đầu video bài giảng, hãy giải nén tệp nén đã tải xuống, xóa các tệp index.html và style.css, sau đó bắt đầu. Bạn có thể bắt đầu bằng cách tạo cấu trúc HTML cơ bản, loại trừ thư mục nguồn và hình ảnh. Nếu bạn cần tham khảo phiên bản hoàn chỉnh, bạn luôn có thể giải nén tệp và xem lại.

H. Cần có trình độ lập trình web nào trước khi tham gia khóa học?

Đầu tiên, bạn cần có hiểu biết cơ bản về HTML+CSS . Ví dụ, nếu bạn không hiểu các thuộc tính float và position, bạn có thể sẽ thấy khó theo dõi. Ở Phần 1, những phần này đã được giải thích nhiều lần trong các bài giảng, nhưng Phần 2 là bài giảng được thiết kế dành cho những người có kỹ năng xuất bản cơ bản. Xin lưu ý!

Ngoài ra, không yêu cầu phải có kiến ​​thức trước về jQuery JavaScript. Tuy nhiên, bạn cần phải hiểu những lý thuyết cốt lõi cần thiết của jQuery . (Kiểm soát lớp, điều hướng phần tử, v.v.) Toàn bộ bài giảng dựa trên jQuery để tạo tương tác và JavaScript được sử dụng để trải nghiệm các ví dụ, do đó bạn không cần phải lo lắng về kỹ năng JavaScript của mình.

H. Bạn sử dụng trình soạn thảo văn bản nào trong lớp?

Khóa học này đượ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. Bạn không nhất thiết phải sử dụng Visual Studio Code làm trình soạn thảo văn bản; bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào bạn thấy thoải mái.

_{Tải xuống Visual Studio Code (nhấp vào)}

※ Hãy nhớ xem video về Visual Studio Code bên dưới! Tôi khuyến khích bạn xem qua và bắt đầu tạo ra ví dụ của riêng mình. Nếu có thể, hãy cài đặt tất cả các tiện ích mở rộng trong tệp PDF Visual Studio Code Extensions.

H. Những hình ảnh được sử dụng trong sản phẩm mẫu có được bảo vệ bản quyền không?

Các hình ảnh được sử dụng trong ví dụ này không có bản quyền. Tôi đã tìm kiếm trên Pixabay và Freepik và sử dụng những hình ảnh tôi cần cho ví dụ. Đối với ví dụ video đầu tiên của bài giảng, sinh viên nên sử dụng hình ảnh đính kèm. Tuy nhiên, nếu bạn tải lên trang chủ danh mục đầu tư cá nhân của mình, vui lòng đảm bảo thay đổi hình ảnh trong Pixabay hoặc Freepik và tải lên.

• Pixabay (nhấp vào)
• FreePik (Nhấp chuột)

H. Trình tự học các ví dụ có phải được học theo thứ tự từ đầu không?

Không cần phải tuân theo thứ tự chính xác của các nghiên cứu ví dụ. Bạn có thể nghiên cứu bất kỳ ví dụ nào bạn muốn ở bất kỳ phần nào bạn muốn. Các phần không được sắp xếp theo thứ tự từ dễ đến khó. Sự khác biệt duy nhất là loại ví dụ. Tuy nhiên, vì quá trình tạo nguyên mẫu trang web và trang web phản hồi thực sự đòi hỏi rất nhiều kiến ​​thức nên chúng tôi khuyên bạn nên bắt đầu bằng cách học toàn bộ.

Không cần thiết phải học video [Lý thuyết cốt lõi] Phần 2 và video [Lý thuyết cốt lõi] Phần 1 trước rồi mới chuyển sang tạo ví dụ thực tế. Nếu bạn đang đưa ra một ví dụ thực tế và nội dung từ ví dụ đó có trong video lý thuyết cơ bản, bạn nên xem lại để học tập. Vì không thể đưa tất cả các lý thuyết được sử dụng để tạo ra các ví dụ thực tế vào các lý thuyết cốt lõi, vui lòng nghiên cứu các ví dụ thực tế và các lý thuyết cốt lõi cùng nhau.

[TMI] Có rất nhiều lý thuyết bạn cần biết khi nghiên cứu về xuất bản và tạo ra các ví dụ thực tế. Tôi muốn sắp xếp tất cả các phần lý thuyết và làm một video, nhưng thực tế là rất khó, vì vậy hãy điền vào các phần còn thiếu bằng cách xem các video lý thuyết Phần 1 và Phần 2, các video lý thuyết trên kênh YouTube Coding Works và thông qua việc tìm kiếm trên Google của bạn.

H. Tôi có thể tải xuống bộ ví dụ thực hành và ví dụ lý thuyết đầy đủ ở đâu?

Thỉnh thoảng có những người hỏi trên diễn đàn Hỏi & Đáp rằng họ có thể tải xuống phiên bản hoàn chỉnh ở đâu. Tất cả các tệp hoàn thiện (html, css, js, tệp hình ảnh, v.v.) được tạo từ video lớp học có thể được tải xuống ở phần cuối cùng được hiển thị bên dưới.

🙋🏻‍♂️ Những câu hỏi dự kiến ​​và những điều cần đọc liên quan đến bài giảng Phần 2

Q) Có video nào giải thích lý thuyết CSS trung gian trong khi tạo ví dụ không?
A) Khóa học này không nhằm mục đích tạo ra các ví dụ xuất bản dành cho người mới bắt đầu. Đây là quá trình tạo ra một ví dụ xuất bản trung gian. Vì vậy, bạn nên có một số kiến ​​thức về lý thuyết CSS từ cơ bản đến trung cấp. Điều đó không có nghĩa là bạn nhất thiết phải biết rõ về nó. Lý thuyết CSS cơ bản và trung cấp được lặp lại liên tục trong khi tạo ví dụ. Và trên Kênh YouTube Publishing của Coding Works, có một danh sách phát có tên là [Intermediate Theory] CSS Intermediate Theory, trong đó có các video chi tiết về các lý thuyết trung gian cần thiết để tạo ví dụ. Vì vậy, trong khi học khóa học hiện tại, bạn nên nghiên cứu các lý thuyết trung gian cùng một lúc.

H) Nếu tôi học khóa học này, tôi có thể làm việc như một nhà xuất bản trong lĩnh vực này không?
A) Có thể thực hiện được nếu bạn hiểu và có thể tận dụng tốt mọi nội dung xuất bản trong quá trình này. Tuy nhiên, xuất bản là công việc đòi hỏi phải có đủ kinh nghiệm để làm việc trong lĩnh vực này. Tôi nghĩ bạn nên học thêm một vài thứ như khóa học hiện tại và nghiên cứu một vài quy trình tạo trang web tổng thể. Tất nhiên, bạn cũng nên tạo trang chủ danh mục đầu tư cá nhân. Rào cản gia nhập ngành xuất bản cao hơn bạn nghĩ. Chỉ xem video một lần không có nghĩa là học viên sẽ nắm được toàn bộ nội dung và kiến ​​thức, vì vậy, hãy trải qua quá trình tiếp thu thông qua phương pháp học được giải thích ở trên.
Nếu bạn hiểu rõ về HTML+CSS+JS Portfolio Practical Publishing (Phần 1) và HTML+CSS+JS Portfolio Practical Publishing (Phần 2), lộ trình học tập tiếp theo sẽ tự nhiên xuất hiện.

H. Tôi có thể hỏi ở đâu nếu không hiểu điều gì đó khi học?
A. Nếu bạn có bất kỳ câu hỏi nào, vui lòng để lại bài đăng trên bảng tin [Hỏi & Đáp] và chúng tôi sẽ trả lời sớm nhất có thể, ngay cả khi có thể không phải ngay lập tức. Và hãy trả lời câu hỏi của bạn càng cụ thể càng tốt. Khi một câu hỏi không cụ thể, hiếm khi dễ dàng nhận được câu trả lời thỏa đáng. Vì vậy, khi bạn đặt câu hỏi, sẽ dễ dàng hơn nhiều để trả lời nếu bạn đính kèm ảnh chụp màn hình mã HTML, CSS và JQUERY bạn đang viết cùng với nội dung mà bạn tò mò.

H. Có một khóa học về tạo trang web phản hồi. Tôi nên học khóa nào trước?
A. Trước khi tham gia khóa học tạo trang web đáp ứng đầy đủ, chúng tôi khuyên bạn nên cải thiện đủ kỹ năng về lý thuyết và các ví dụ thực tế trong khóa học hiện tại và Phần 2 trước khi tham gia khóa học tạo trang web đáp ứng đầy đủ. Vì đây là một quá trình tạo ra một trang web đáp ứng tổng thể nên rất khó để trình bày chi tiết từng phần như quy trình này, vì vậy tôi nghĩ bạn sẽ hiểu rõ hơn nếu được đào tạo đầy đủ về quy trình xuất bản thực tế và sau đó thực hiện. toàn bộ quá trình tạo trang web.

H. Giảng viên, liệu có nên xem trước Hướng dẫn thực tế về tìm kiếm việc làm của Nhà xuất bản trong lớp học không?
A. Việc học thêm các kỹ năng xuất bản là quan trọng, nhưng trước tiên phải nắm vững những kiến ​​thức cơ bản của một nhà xuất bản. Sách điện tử Hướng dẫn thực hành công việc của nhà xuất bản (PDF) trình bày chi tiết những điều cần thiết mà một nhà xuất bản phải biết, chẳng hạn như kiến ​​thức cơ bản về xuất bản, thói quen và nguyên tắc lập trình mong muốn, cũng như cách xuất bản như một người có kinh nghiệm. Chúng tôi khuyên bạn nên đọc sách điện tử Hướng dẫn thực hành công việc xuất bản (PDF) trước để hiểu rõ hơn về những điều cơ bản của công việc xuất bản. Nhấp vào hình ảnh bên dưới để xem phần giới thiệu lớp học.

[01] Nút CSS & Điều hướng

_{Điều hướng trên cùng 3 loại}

_{Điều hướng thả xuống (kiểu CSS, 3 loại)}

_{Điều hướng thả xuống (kiểu jQuery, 3 loại)}

[02] Hoạt ảnh khung hình chính CSS

_{Hoạt ảnh tải hình tròn}

_{Hoạt ảnh tải của Asiana Airlines}

_{Biểu tượng phông chữ Văn bản Bóng đổ Bộ lọc Hoạt hình}

_{Biểu tượng phông chữ Văn bản Bóng đổ Bộ lọc Hoạt hình - Ứng dụng}

[03] Hiệu ứng di chuột CSS

_{Văn bản phác thảo}

_{Lớp phủ hình ảnh đường dẫn clip}

_{Tạo Tooltip - Cơ bản}

_{Tạo Tooltips - Đã áp dụng}

[04] Thiết kế giao diện phần CSS

_{Giao diện Font Awesome}

_{Bảng giá dịch vụ FontAwesome Gradient}

_{Flex Grid Card UI (Thành phố tốt nhất thế giới)}

_{Trung tâm mua sắm Smart Item}

_{Thẻ hồ sơ cá nhân (Chế độ tối)}

_{Thiết kế bàn đẹp}

_{Biểu mẫu đăng nhập hộp kiểm tùy chỉnh}

[05] Nguyên mẫu trang web CSS
(Nguyên mẫu trang web)

_{Nguyên mẫu trang web - Biểu mẫu đăng ký thành viên phản hồi Naver}

_{Điều hướng toàn màn hình đáp ứng danh mục đầu tư
với jQuery}

<sub>Điều hướng toàn màn hình Danh mục đầu tư đáp ứng với jQuery
- Biến đổi hoạt hình</sub>

_{English Academy Tiêu đề thả xuống Điều hướng}

_{Bố cục lưới CSS của Portfolio (Phản hồi) - Phiên bản PC.}

_{Bố cục lưới CSS của Portfolio (Phản hồi) - Phiên bản máy tính bảng}

_{Bố cục lưới CSS của Portfolio (Phản hồi) - Phiên bản di động.}

[06] JavaScript &
jQuery

jQuery Responsive Hoạt hình Modal

_{jQuery Front Back Transition Screen Thay đổi}

_{Kiểm soát phát lại âm thanh}

_{Biểu mẫu đăng nhập hoạt hình kiểm tra tính hợp lệ}

_{Thay đổi màn hình chuyển tiếp jQuery Front Back (Nguyên mẫu #01)}

_{Thay đổi màn hình chuyển tiếp jQuery Front Back (Nguyên mẫu #02)}

_{Mở rộng hộp tìm kiếm}

_{Câu hỏi thường gặp về Netflix với jQuery}

[07] Trang web phản hồi thực tế-
Trang web chính thức của Netflix

_{Trang web chính thức của Netflix phiên bản PC}

_{Trang web chính thức của Netflix phiên bản dành cho thiết bị di động}

[08] Trang web phản hồi thực tế -
Tải xuống trình duyệt Chrome

_{Trang web chính thức tải xuống trình duyệt Chrome cho PC phiên bản.}

_{Tải xuống trình duyệt Chrome Trang web chính thức Phiên bản dành cho thiết bị di động}

Q) Tôi không thể sử dụng trình soạn thảo văn bản Brackets phải không?

Trong các phiên bản trước, Brackets không còn khả dụng do sự cố cài đặt tiện ích mở rộng và Adobe đã ngừng hỗ trợ. Nhưng với việc phát hành phiên bản mới của trình soạn thảo văn bản Brackets, mọi thứ hiện đã hoạt động bình thường trở lại.

Brackets hiện đã có sẵn trở lại trong Visual Studio Kodi.

Vui lòng gỡ cài đặt phiên bản hiện tại và tải xuống và cài đặt phiên bản mới (Phiên bản 2) từ trang web chính thức.

Trang web chính thức của Brackets: https://brackets.io/

Q) Bạn sử dụng trình soạn thảo văn bản nào trong lớp?

Khóa học này đượ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.

_{Tải xuống Visual Studio Code (nhấp vào)}

Video bên dưới là video miễn phí về khóa học Xuất bản thực hành danh mục đầu tư HTML+CSS+JS (Phần 1) .
Ngay cả khi bạn không tham gia Phần 1, bạn vẫn có thể học bằng cách lắng nghe. Các video bài giảng bên dưới chứa rất nhiều nội dung cần thiết cho Phần 2, vì vậy hãy nhớ xem chúng nhé! Tôi khuyên bạn nên xem nó.

• ^{Mọi thứ về xuất bản! Các phần tử HTML nội tuyến, các phần tử khối, các phần tử khối nội tuyến}
• ^{Căn chỉnh HTML theo chiều ngang với CSS (float, overflow, clear, inline-block)}
• ^{Bắt đầu với jQuery (cấu trúc thư mục, phương pháp liên kết)}
• ^{Lý thuyết cốt lõi thiết yếu của jQuery (Tạo cú pháp cơ bản, bộ chọn)}
• ^{Lý thuyết cốt lõi của jQuery (Chức năng)}
• ^{Lý thuyết cốt lõi của jQuery (Phương pháp)}
• ^{Lý thuyết cốt lõi thiết yếu của jQuery (Các phương thức hiệu ứng – slideDown, slideUp, fadeIn, fadeOut)}
• ^{Lý thuyết cốt lõi thiết yếu của jQuery (Phương pháp kiểm soát lớp – addClass, removeClass, toggleClass)}
• ^{jQuery Essential Core Theory (Phương pháp tìm kiếm phần tử – con, anh chị em)}
• ^{Tạo ví dụ thực tế sử dụng hoạt ảnh khung hình chính CSS 01 (Hoạt ảnh tải thay đổi kích thước hình tròn)}
• ^{Tạo ví dụ thực tế sử dụng hoạt ảnh khung hình chính CSS 02 (hoạt ảnh tải thay đổi tọa độ hình chữ nhật)}
• ^{Xuất bản thực tế sử dụng CSS Keyframe Animation 03 (Double Border Radius Animation)}
• ^{Điều hướng thả xuống cơ bản hiểu đúng về lớp ảo di chuột}
• ^{Lớp học ảo trước sau thực hành xuất bản sử dụng lớp học ảo 01 (Trước sau sử dụng cơ bản)}
• ^{Với tư cách là nhà xuất bản, chắc chắn rồi! Javascript bạn nên biết, biến (var) và câu lệnh điều kiện (if) - kiểm tra người lớn 20 tuổi}
• ^{Khuyến nghị về tiện ích mở rộng của Chrome dành cho nhà xuất bản web (Phần 1)}
• ^{Khuyến nghị về tiện ích mở rộng của Chrome dành cho nhà xuất bản web (Phần 2)}
• ^{Tạo một neo A-Tag và cuộn mượt mà theo hai cách (Plugin JQuery, Thuộc tính CSS)}
• ^{Phân biệt giữa người hướng dẫn xuất bản tốt và xấu (hiểu thuộc tính hiển thị)}
• ^{Hiểu kích thước phông chữ tương đối của đơn vị em và rem}
• ^{Hiểu về kế thừa, kế thừa giá trị của phần tử cha}
• ^{CSS calc() Biểu thức số học (các phép toán cơ bản)}
• ^{Sử dụng biến var() trong CSS}
• ^{Cách sử dụng lớp hoa ảo (:before :after)}
• ^{Tạo bản đồ hình ảnh bằng mã hóa cứng}

❤ 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 để nghe giảng 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 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

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

Phần 0. Phần 2 - Giới thiệu bài giảng và xem trước phiên bản hoàn thiện & ghi chú sản xuất

• [Video giới thiệu] Xem trước sản phẩm hoàn thiện và ghi chú sản xuất

Phần 1. Cách sử dụng Visual Studio Code và các tiện ích mở rộng cần thiết

• Cách sử dụng và thiết lập Visual Studio Code
• Cách sử dụng Emmet trong Visual Studio Code
• Ngăn chặn Full Reload xuất hiện khi sửa đổi CSS trong Visual Studio Code
• Cài đặt thiết yếu của Visual Studio Code, Thay đổi phím tắt, Cài đặt tiện ích mở rộng thiết yếu (PDF)

Mục 2. [Lý thuyết cơ bản] Lý thuyết và mẹo để tạo ra các ví dụ thực tế về xuất bản

• Căn chỉnh các phần tử con một cách tự do với thuộc tính Flex
• Phần nền video (Bố cục Flex)
• Tạo các neo và điều hướng đến chúng bằng cách cuộn mượt mà (plugin, thuộc tính CSS)
• Truy vấn phương tiện để tạo Web đáp ứng
• Cách sử dụng biểu tượng phông chữ (FontAwesome 4.7)
• Cách sử dụng biểu tượng phông chữ (XEICON)
• Cách sử dụng phông chữ web (Google Web Fonts, Nunnu Korean Web Fonts)
• Tối ưu hóa hình ảnh là điều cần thiết trước khi tải lên máy chủ.
• Sử dụng iframe để tải một html khác vào bên trong nội dung
• Thay đổi màu sắc hình ảnh một cách tự do với thuộc tính bộ lọc
• Sử dụng img làm nền với object-fit và object-position
• Bộ chọn thuộc tính đầu vào, bộ chọn liền kề và bộ chọn anh chị em để tạo menu tab
• Sử dụng JavaScript nội tuyến (sự kiện JavaScript onclick)

Phần 3. Phần 2 - Nút CSS & Điều hướng

• Nút CSS & Điều hướng - Điều hướng trên cùng 3 loại
• Nút CSS & Điều hướng - Điều hướng thả xuống (CSS+JQUERY)

Phần 4. Phần 2 - Hoạt ảnh khung hình chính CSS

• CSS Animation - Font Icon Text Shadow Filter Animation
• Hoạt ảnh CSS - Asiana Airlines Đang tải
• Hoạt ảnh CSS - Tải hình tròn (1)
• Hoạt ảnh CSS - Tải hình tròn (2)

Phần 5. Phần 2 - Hiệu ứng di chuột CSS

• Hiệu ứng CSS Hover - Văn bản phác thảo
• Hiệu ứng CSS Hover - Tạo chú giải công cụ (Cơ bản)
• Hiệu ứng CSS Hover - Tạo chú giải công cụ (Đã áp dụng)
• Hiệu ứng CSS Hover - Lớp phủ hình ảnh Clip-path

Phần 6. Phần 2 - Thiết kế giao diện người dùng của phần CSS

• Thiết kế giao diện người dùng phần CSS - FontAwesome UI
• Thiết kế giao diện người dùng phần CSS - Thiết kế bảng đẹp
• Thiết kế giao diện người dùng phần CSS - Bảng giá dịch vụ FontAwesome Gradient
• Thiết kế giao diện người dùng CSS Section - Smart Item Shopping Mall
• Thiết kế giao diện người dùng CSS Section - Flex Grid Card UI (Thành phố tốt nhất thế giới)
• Thiết kế giao diện người dùng phần CSS - Thẻ hồ sơ cá nhân (Chế độ tối)
• Thiết kế giao diện người dùng phần CSS - Biểu mẫu đăng nhập hộp kiểm tùy chỉnh

Phần 7. Phần 2 - Tạo nguyên mẫu trang web

• Nguyên mẫu trang web - Biểu mẫu đăng ký thành viên phản hồi Naver
• Nguyên mẫu trang web - Điều hướng toàn màn hình Danh mục đầu tư đáp ứng với jQuery
• Nguyên mẫu trang web - English Academy Header Dropdown Navigation
• Nguyên mẫu trang web - Bố cục lưới CSS danh mục đầu tư (Phản hồi)

Phần 8. JavaScript & jQuery Ví dụ thực tế

• Sự khác biệt giữa jQuery và JavaScript, Vanilla JavaScript là gì?
• jquery đáp ứng hoạt hình modal
• JavaScript & jQuery - jQuery Front Back Transition Screen Change
• JavaScript & jQuery - Footer Family Site Chọn Kiểu Tùy Chỉnh
• JavaScript & jQuery - Mở rộng hộp tìm kiếm
• JavaScript & jQuery - Netflix-Câu hỏi thường gặp với jQuery
• JavaScript & jQuery - Kiểm tra xác thực Biểu mẫu đăng nhập động
• JavaScript & jQuery - Kiểm soát phát lại âm thanh

Phần 9. Phần 2 - Trang web Real Responsive - Trang web chính thức của Netflix

• Trang web phản hồi thực tế - Trang web chính thức của Netflix (1) - Ghi chú sản xuất và thông tin cần thiết
• Trang web phản hồi thực tế - Trang web chính thức của Netflix (2) - Tạo cấu trúc cơ bản
• Trang web phản hồi thực tế - Trang web chính thức của Netflix (3) - Tiêu đề & Chào mừng
• Trang web phản hồi thực tế - Trang web chính thức của Netflix (4) - 4 phần có cùng định dạng
• Trang web phản hồi thực tế - Trang web chính thức của Netflix (5) - Phần Câu hỏi thường gặp
• Trang web phản hồi thực tế - Trang web chính thức của Netflix (6) - Footer
• Trang web phản hồi thực tế - Trang web chính thức của Netflix (7) - Đăng nhập Modal
• Trang web phản hồi thực tế - Trang web chính thức của Netflix (8) - Công việc chuyển đổi di động

Phần 10. Phần 2 - Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome

• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (0) - Ghi chú sản xuất và các yếu tố cần thiết
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (1) - Cấu trúc cơ bản - Tiêu đề
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (2) - Phần chào mừng
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (3) - Phần tính năng
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (4) - CallAction & Footer
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (5) - Bản quyền chân trang
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (6) - Tương tác jQuery
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (7) - Chuyển đổi bố cục di động (1)
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (8) - Chuyển đổi bố cục di động (2)
• Trang web phản hồi thực tế - Tải xuống trình duyệt Chrome (9) - Chuyển đổi bố cục di động (3)

Mục 11. Tải xuống phiên bản đầy đủ và tài liệu tham khảo

• [Tải phiên bản đầy đủ] Phần 2 - [01] Nút CSS & Điều hướng
• [Tải phiên bản đầy đủ] Phần 2 - [02] Hoạt ảnh Keyframe CSS
• [Tải bản đầy đủ] Phần 2 - [03] Hiệu ứng CSS Hover
• [Tải bản đầy đủ] Phần 2 - [04] Thiết kế giao diện người dùng CSS Section
• [Tải phiên bản đầy đủ] Phần 2 - [05] Nguyên mẫu trang web
• [Tải phiên bản đầy đủ] Phần 2 - [06] JavaScript & jQuery
• [Tải xuống phiên bản đầy đủ] Phần 2 - [07] Trang web phản hồi thực tế - Trang web chính thức của Netflix
• [Tải bản đầy đủ] Phần 2 - [08] Website phản hồi thực tế - Tải trình duyệt Chrome