HTML+CSS+JS Portfolio thực tế (Mùa 1)

Coding Works, HTML+CSS+JQUERY Portfolio Khóa học xuất bản thực hành trung cấp

' Tổng cộng 143 lớp về xuất bản các lý thuyết thiết yếu và ví dụ thực tế'

' Tổng cộng gần 42 giờ Video bài giảng thực hành xuất bản

' Khóa học nâng cao kỹ năng thiết yếu cho việc làm của Nhà xuất bản'

' Lớp học mã hóa cứng để có kỹ năng thực tế trong xuất bản thực tế'

📔 Kỹ năng lập trình cứng chính là kỹ năng xuất bản thực sự.

Việc xuất bản một cách năng động và bắt mắt bằng cách sử dụng plugin jQuery không phải là xuất bản thực sự.

Kỹ năng xuất bản thực sự là kỹ năng có thể thiết kế bố cục một cách tỉ mỉ bằng HTML, sắp xếp và thiết kế chi tiết bằng CSS và thậm chí tạo ra tương tác bằng jQuery do chính bạn viết.

Nếu bạn dựa vào việc sử dụng plugin jQuery để tạo hiệu ứng bắt mắt tức thời và không học thuộc lòng những kiến ​​thức cơ bản, bạn sẽ không dễ dàng có được công việc xuất bản web. Ngay cả khi bạn có việc làm và bắt đầu làm việc trong lĩnh vực này, thì có khả năng mỗi ngày của một nhà xuất bản đều sẽ rất khó khăn.

Khả năng mã hóa cứng, tức là tự mình mã hóa từng dòng mã, chính là kỹ năng xuất bản thực sự.

Các bài giảng của Coding Works rất toàn diện và chính xác.

1. Xuất bản! Đừng quá sợ hãi. Bắt đầu bằng sự tự tin. Bắt đầu tốt là đã thành công một nửa .

2. Xuất bản! Tôi không thể nói rằng việc vào quỹ đạo là dễ dàng, nhưng chắc chắn là sẽ được đền đáp .

3. Kỹ năng lập trình HTML+CSS+JQUERY cơ bản rất quan trọng để có được việc làm xuất bản.

• Các bài giảng xuất bản của Coding Works không sử dụng mã mà sinh viên không thể hiểu được. Tôi tin rằng một bài giảng hay là bài giảng có thể giúp sinh viên hiểu được các nguyên tắc và đó chính là cách các bài giảng Coding Works được tạo ra.
• Đối với những người mới làm quen với mã hóa web, chúng tôi hy vọng rằng bạn sẽ tự tin hơn khi xuất bản thông qua các bài giảng dễ hiểu và thân thiện về các lý thuyết cốt lõi cùng các ví dụ thực tế.

Tôi có một số lời khuyên dành cho những người mới bắt đầu xuất bản HTML+CSS+JQUERY.

Không dễ để có được kỹ năng xuất bản để tạo ra một trang web tốt bằng cách tự mình mã hóa nó. Nói chính xác thì rất khó.

Có rất nhiều lý thuyết cần biết và bạn cũng phải có đủ kinh nghiệm thực tế trong sản xuất dựa trên các lý thuyết đó. Bạn cũng nên có một số kỹ năng về thiết kế giao diện người dùng Photoshop. Chỉ khi đó, bạn mới có thể trở nên thành thạo trong việc tự tạo ra một trang web đáng xem.

Tuy nhiên, bạn không nên làm theo phương pháp 'Theo dõi quá trình tạo trang web danh mục đầu tư' mà không mở rộng kỹ năng của mình thông qua việc nghiên cứu lý thuyết trung thực và tạo ví dụ bằng cách sử dụng lý thuyết được đề cập ở trên.

Tất nhiên, nếu bạn chăm chỉ theo dõi, bạn sẽ nhận được một kết quả gọi là 'danh mục sao chép tác phẩm của người khác', nhưng nó sẽ không mang lại kỹ năng thực sự.

Cho dù bạn đang tìm kiếm công việc là nhà xuất bản web hay nhà thiết kế muốn thể hiện kỹ năng xuất bản web của mình, bạn chắc chắn cần có một trang web danh mục đầu tư cá nhân. Ngay cả khi bạn tạo trang chủ cá nhân chỉ bằng cách làm theo mà không có nghiên cứu lý thuyết trung thực và kinh nghiệm sản xuất thực tế như tôi đã đề cập trước đó, nếu bạn không có kỹ năng lập trình cứng để hỗ trợ, thì việc thiếu các kỹ năng cơ bản của bạn sẽ nhanh chóng bị phát hiện tại nơi làm việc. ngay cả sau khi bạn có việc làm.

Trước khi tạo một trang web danh mục đầu tư cá nhân, hãy trang bị đủ kiến ​​thức lý thuyết và kinh nghiệm tạo ra nhiều ví dụ xuất bản khác nhau bằng cách sử dụng lý thuyết.

📔 Hướng dẫn phương pháp học tập

Cách tôi nghĩ về 'cải thiện kỹ năng xuất bản' là...

Khi làm một ví dụ xuất bản thực tế, đầu tiên chỉ cần xem cách làm mà không có gánh nặng nào, lần thứ hai, thực hiện trong khi xem và làm theo, lần thứ ba, tự làm mà không cần xem và khi bạn thực sự không thể nhớ , hãy tham khảo video và thực hiện nhé. Chỉ khi đó nó mới thực sự là khả năng của bạn.

※ Phương pháp học tập được khuyến nghị khi nghiên cứu các ví dụ thực hành xuất bản (học từ lần 1 đến lần 4 và tạo báo cáo cuối cùng)

• Lần 1 - Chỉ cần xem video cho đến hết mà không suy nghĩ gì cả và không dừng lại giữa chừng. (Mục đích là để hiểu được tiến trình sản xuất. Để tiết kiệm thời gian, hãy xem ở tốc độ khoảng 1,5 lần.)
• Lần 2 - Xem video và làm theo, sau đó dừng lại, viết mã của riêng bạn, kiểm tra trình duyệt, phát lại, v.v.
• Lần 3 - Chỉ chuẩn bị các tệp nguồn (hình ảnh, văn bản) mà không xem video và tự tạo mà không cần sự trợ giúp của video. (Nếu bạn thực sự không nhớ, hãy xem lại.)
• 4 - Đối với trang chủ danh mục đầu tư cá nhân sẽ được thực hiện sau đó, hãy chuẩn bị các văn bản và hình ảnh khác nhau có cùng định dạng với tệp nguồn của video nhưng có chủ đề khác và tạo ra một tác phẩm cá nhân không khác biệt đáng kể so với quá trình sản xuất video. phương pháp và mã. .

🙋🏻‍♂️ Các câu hỏi dự kiến ​​và tài liệu đọc bắt buộc liên quan đến bài giảng

H. Có video nào giải thích lý thuyết CSS trung cấp trong khi làm ví dụ không?
A. ' Có rất nhiều lý thuyết trung gian không được đề cập trong lý thuyết cơ bản khi làm ví dụ. Tôi có thể học lớp lý thuyết trung gian ở đâu? 'Câu hỏi này thường xuất hiện trên các bảng tin.

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 ví dụ xuất bản từ cơ bản đến trung cấp. 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.

H. Khi tạo ví dụ thực tế, có phần nào trong phần lý thuyết không được giải thích không?
A. Các video lý thuyết cơ bản dành cho người mới bắt đầu đã được tải lên để bạn có thể tham khảo nếu cảm thấy còn thiếu lý thuyết nào đó. Trong video sản xuất ví dụ thực tế, có nội dung không có trong phần lý thuyết. Nếu bạn đăng câu hỏi tại sao nội dung không có trong phần lý thuyết lại xuất hiện trong sản xuất ví dụ, tôi sẽ khó trả lời.

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 một trang web đáp ứng đầy đủ, 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 này trước khi đến với khóa học tạo một 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ư 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.

📔 Hướng dẫn cập nhật

[Hướng dẫn cập nhật, Hướng dẫn phương pháp học] Khóa học lý thuyết cơ bản về xuất bản danh mục HTML+CSS+JQUERY và ví dụ thực tế về sản xuất

Cảm ơn bạn đã tham gia khóa học Lý thuyết cơ bản và Tạo ví dụ thực tế về HTML+CSS+JQUERY Portfolio Publishing của Coding Works. Và tôi muốn cảm ơn trước tất cả mọi người sẽ tham gia lớp học trong tương lai..^^

Khóa học này sẽ tiếp tục được cập nhật trong thời gian tới. Nếu có bất kỳ cập nhật nào, chúng tôi sẽ thông báo cho bạn qua mục 'Có gì mới trong Inflearn'. Vui lòng theo dõi lý thuyết hiện tại và bài viết thực hành cho đến khi có bản cập nhật cuối cùng. ^^

📔 Phần 4. Thực hành sản xuất xuất bản HTML+CSS (Phần 2) - Đã cập nhật (18/08/2020)

• 01. Tạo ví dụ thực tế sử dụng lớp ảo hover (điều hướng thả xuống cơ bản)
• 02.before after Tạo ví dụ thực tế sử dụng lớp ảo (hiệu ứng di chuột qua điều hướng - Đường viền)
• 03.before after Tạo ví dụ thực tế sử dụng lớp ảo (hiệu ứng di chuột điều hướng - thuộc tính nội dung)
• 04.before after Tạo ví dụ thực tế sử dụng lớp ảo (hiệu ứng di chuột điều hướng – Xoay)
• 05. Tạo kiểu cho các nút radio và hộp kiểm như hộp kiểm tùy chỉnh (sử dụng hình ảnh nền)
• 06. Tạo kiểu cho các nút radio và hộp kiểm như hộp kiểm tùy chỉnh (sử dụng biểu tượng FontAwesome)
• 07. Tạo ví dụ thực tế sử dụng lớp ảo để kiểm tra đơn hàng (hiệu ứng di chuột qua giao diện thẻ hồ sơ cá nhân)
• 08. Xuất bản thực tế sử dụng các lớp học ảo liên quan đến biểu mẫu (cửa sổ tìm kiếm toàn màn hình có hình ảnh nền)
• 09. Xuất bản thực tế sử dụng các lớp học ảo liên quan đến biểu mẫu (màn hình đăng nhập)

📔 Danh sách các lý thuyết và mẹo xuất bản Jump Up ở trình độ trung cấp đến nâng cao sắp ra mắt

Chúng tôi liên tục cập nhật không chỉ những lý thuyết cần thiết để tạo ra các ví dụ thực tế mà còn cả những lý thuyết cốt lõi và mẹo cần thiết để cải thiện kỹ năng xuất bản của bạn. Chúng tôi sẽ thông báo cho bạn qua phần tin tức khi có thông tin cập nhật về các lý thuyết cốt lõi và video mẹo cần thiết để cải thiện Kỹ năng của bạn.

Các lý thuyết cốt lõi và video mẹo cần thiết cho Skill Up sẽ được cập nhật tuần tự trong Phần 7. Ngay cả khi bạn chưa nhận được bất kỳ cập nhật nào, vui lòng đến Mục 7 và kiểm tra xem có video nào bạn cần học không. Chiến đấu~^^

※ Bạn có thể nhận tệp zip chứa các ví dụ học tập đã hoàn thành trong video Lý thuyết và mẹo xuất bản Jump Up bằng cách nhấp vào tài liệu bài học ở góc trên bên phải của video.

Mục 7. Trình độ trung cấp đến nâng cao Nhảy lên Lý thuyết xuất bản và mẹo

1. Khuyến nghị về tiện ích mở rộng của Chrome dành cho nhà xuất bản web (6) (Đã hoàn thành, 31/05/2020)
2. Hai cách để tìm phần mong muốn một cách dễ dàng bằng thẻ neo A (plugin jQuery, thuộc tính CSS) (Đã hoàn thành, 25/07/2020)
3. Sử dụng iframe để tải và hiển thị một html khác bên trong body (Hoàn thành, 2020.07.25)
4. Sự kiện nhấp chuột CSS được tạo bằng :checked và các bộ chọn mở rộng (bộ chọn liền kề, bộ chọn anh chị em, bộ chọn thuộc tính) của thẻ đầu vào (Hoàn thành, 2020.07.25)
5. Sử dụng JavaScript nội tuyến (liên kết href tới div, quay lại, tiến tới, làm mới, đóng cửa sổ) (Hoàn thành, 26/07/2020)
6. 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ị) (Hoàn thành, 2020.08.2)
7. Hiểu về kích thước phông chữ tương đối của đơn vị em và rem (Hoàn thành, 2020.08.2)
8. Hiểu về đường dẫn tệp thư mục bạn phải biết khi tạo trang web (Địa chỉ tuyệt đối so với Địa chỉ tương đối) (Đã lên kế hoạch)
9. Tạo Bản đồ hình ảnh tìm tọa độ trực tiếp và mã hóa chúng trực tiếp mà không cần dựa vào trình tạo (đã lên kế hoạch)
10. Hiểu đầy đủ về hoa (trước, sau) của lớp ảo thiết kế mặt trước và mặt sau của một phần tử (đã lên kế hoạch)

📔 Danh sách đầy đủ các ví dụ xuất bản thực tế được cập nhật

1. Xuất bản nội dung menu tab bằng JQUERY (kiểu 01) (Hoàn thành, 30/05/2020)
2. Với tư cách là một nhà xuất bản, đây là điều bắt buộc! JavaScript bạn cần biết, biến (var) và câu lệnh điều kiện (if) - Kiểm tra dành cho người lớn 20 tuổi (Hoàn thành, 2020.06.02)
3. Xuất bản thực tế với các biến JavaScript và các câu lệnh điều kiện để xếp hạng sao bằng jQuery (Đã hoàn thành, 2020.06.02)
4. Cách sử dụng Visual Studio Code và Emmet (Đã hoàn thành, 2020.06.05)
5. Nội dung Menu Tab - Kiểu 02 (Nguyên mẫu) với jQuery (Hoàn thành, 07/06/2020)
6. Nội dung Menu Tab - Kiểu 02 (Thực hành sản xuất) với jQuery (Hoàn thành, 07/06/2020)
7. Thay đổi hình nền khi di chuột qua Xuất bản nguyên mẫu bằng jQuery (Hoàn thành, 2020.06.07)
8. Hiệu ứng di chuột qua mục giao diện trung tâm mua sắm với jQuery (Hoàn thành, 07/06/2020)
9. Bài giảng Coding Works có tính năng Accordion Nội dung Slide với jQuery (Đã hoàn thành, 2020.06.10)

💡 Mục 6. Thiết kế giao diện người dùng màn hình đăng nhập (Hoàn thành, 2020.06.20)

1. [Phần 01] Thiết kế giao diện màn hình đăng nhập (ghi chú sản xuất, thiết kế cấu trúc HTML, chèn favicon)
2. [Phần 02] Thiết kế giao diện màn hình đăng nhập (Thiết kế CSS - Thay đổi kích thước và vị trí)
3. [Phần 03] Thiết kế giao diện màn hình đăng nhập (Thiết kế CSS - Thiết kế nút và hộp kiểm và nhãn)
4. [Phần 04] Thiết kế giao diện màn hình đăng nhập (Thiết kế CSS - thiết kế ngăn chia trước và sau)

Video Thiết kế giao diện người dùng đăng nhập và xuất bản trang web thực tế đã được cập nhật. Video bài giảng được cập nhật này bao gồm tổng cộng 4 phần trong Phần 7. Phiên bản hoàn thiện cũng đã được tải lên để tải xuống. Khi thực hành, hãy tải xuống phiên bản hoàn chỉnh, xóa index.html và style.css, rồi theo dõi chậm rãi từ đầu video.

Việc xuất bản thiết kế giao diện người dùng đăng nhập là một dạng xuất bản tĩnh không có tương tác jQuery, nhưng đây là ví dụ tốt nhất để nghiên cứu tất cả các thuộc tính CSS, bao gồm các thuộc tính cốt lõi của CSS, chẳng hạn như mô hình hộp, đường viền, hình nền, màu sắc, hộp kiểm và cách sử dụng nhãn . Tôi nghĩ vậy.

💡 Nguyên mẫu thanh trượt nội dung CSS thuần túy (Hoàn thành, 2020.06.16)

• Nội dung menu tab toàn màn hình được tạo bằng CSS thuần túy mà không sử dụng JavaScript hoặc jQuery
• Sau khi tạo một nguyên mẫu sử dụng màu nền, một ví dụ ứng dụng thực tế sử dụng hình ảnh nền và hoạt ảnh văn bản

▼ Nguyên mẫu thanh trượt nội dung CSS thuần túy 01 (Nguyên mẫu thanh trượt nội dung tab toàn màn hình)

▼ Nguyên mẫu thanh trượt nội dung CSS thuần túy 02 (Ứng dụng thanh trượt nội dung tab toàn màn hình)

💡 Trang đích Xuất bản thực tế với jQuery sử dụng Video Background (Đã hoàn thành, 14/06/2020)

• Sử dụng video làm nền để làm nổi bật nội dung, thêm nhạc nền nhẹ nhàng và điều chỉnh âm lượng.
• Tạo hoạt ảnh khung hình chính CSS dần dần hiển thị nội dung khi bắt đầu
• Trang trí định dạng văn bản theo nhiều cách khác nhau với Google Web Fonts, tạo thiết kế nút đẹp mắt với CSS
• Tạo nút hamburger hoạt hình bằng CSS để kích hoạt điều hướng toàn màn hình
• Hiển thị điều hướng toàn màn hình với jQuery (toggleClass, fadeToggle)
• Áp dụng lớp phủ gradient cho khung hình video bằng lớp ảo :before
• Xem trước phiên bản hoàn thiện: https://youtu.be/tuVTiZtii0s
• Ghi chú sản xuất phiên bản cuối cùng: https://youtu.be/LcIKADuM7TA

▼ Xuất bản nội dung menu tab bằng JQUERY (Style 01) (Đã hoàn thành)

▼ Với tư cách là nhà xuất bản, đây là điều bắt buộc! 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 (hoàn thành)

• Một lớp để hiểu các khái niệm về biến JavaScript (var) và các câu lệnh điều kiện (if)

▼ Thực hành xuất bản với các biến JavaScript và các câu lệnh có điều kiện để xếp hạng bằng jQuery (hoàn thành)

• Xuất bản thực tế sử dụng các khái niệm về biến JavaScript (var) và các câu lệnh điều kiện (if)
• Phương thức jQuery: addClass() removeClass() text() html() val() prevAll() nextAll() index()

▼ Cách sử dụng Visual Studio Code và Emmet (hoàn thành)

▼ Xuất bản nội dung menu tab (kiểu 02) bằng jQuery (hoàn thành)

• Thay đổi thiết kế của văn bản giữ chỗ hộp tìm kiếm
• Khi bạn nhấp vào hộp tìm kiếm (:focus), hãy làm cho chỗ giữ chỗ biến mất dần và khi bạn nhả nhấp, hãy làm cho nó xuất hiện dần.
• Thiết kế nội dung menu tab bằng CSS (đặc biệt là thiết kế đường viền)
• Viết tập lệnh cho chức năng nội dung menu tab jQuery - addClass(), removeClass(), sisters(), các thuộc tính tùy chỉnh data-alt, var, attr() phương pháp để lấy các thuộc tính
• Video này được chia thành hai phần: sản xuất nguyên mẫu và sản xuất thực tế, vì vậy hãy tìm hiểu về nguyên mẫu trước rồi mới xem video sản xuất thực tế.

▼ Xuất bản nguyên mẫu với jQuery để thay đổi hình nền khi di chuột qua nó (hoàn thành)

• Thêm hình nền bằng CSS (thuộc tính backgorund)
• Tạo điều hướng văn bản được điền bằng cách sử dụng content: attr() của lớp ảo :before
• Cách thay đổi hình nền bằng CSS bằng cách tải giá trị trong thuộc tính tùy chỉnh với jQuery mouseenter và mouseleave với attr()

▼ Hiệu ứng di chuột trên giao diện mục mua sắm với jQuery (Đã hoàn thành)

• Định vị các phần tử cha và con bằng CSS và thiết kế chi tiết
• Hiển thị thông tin chi tiết về sản phẩm khi di chuột qua và làm mờ hình ảnh bằng thuộc tính bộ lọc CSS.
• Thay đổi thiết kế bằng cách chọn kích thước và màu sắc (addClass, removeClass)
• Khi bạn nhấn nút Thích, hãy thay đổi nội dung của lớp ảo :before thành FontAwesome Unicode (toggleClass)

▼ Bài giảng Coding Works Tính năng Accordion Nội dung Slide với jQuery (Đã hoàn thành)

• Căn giữa theo chiều ngang và chiều dọc với flex
• Lớp học ảo: Sau khi đặt Logo KakaoTalk đúng vị trí bạn muốn
• Khi tiêu đề kết thúc, thiết kế sẽ thay đổi và thiết kế biểu tượng phông chữ mũi tên tuyệt vời sẽ thay đổi và xoay
• Nhấp vào tiêu đề sẽ thay đổi thiết kế của tiêu đề và hiển thị nội dung tương ứng theo cách trượt (addClass, removeClass, slideDown, slideUp)
• Khi bạn nhấp vào tiêu đề, hãy thay thế giá trị của data-image được chỉ định trong thuộc tính tùy chỉnh của tiêu đề hình ảnh ở bên phải thông qua attr()

▼ jQuery Responsive Hoạt hình Modal

💡 Xem trước kết quả khóa học Xuất bản thực hành HTML+CSS

▼ 01. Tạo ví dụ thực tế sử dụng hoạt ảnh keyframe CSS 01 (Hoạt ảnh tải thay đổi kích thước hình tròn)

▼ 02. Tạo ví dụ thực tế sử dụng hoạt ảnh keyframe CSS 02 (hoạt ảnh tải thay đổi tọa độ hình chữ nhật)

▼ 03. Thực hành xuất bản sử dụng hoạt ảnh keyframe CSS 03 (hoạt ảnh bán kính đường viền kép)

▼ 04. Thực hành xuất bản sử dụng virtual class hover 01 (Danh sách sản phẩm có mô tả chi tiết khi di chuột qua)

▼ 05. Xuất bản thực tế sử dụng lớp ảo hover 02 (Tạo chú giải công cụ xuất hiện khi di chuột qua)

▼ 06. Xuất bản thực tế bằng cách sử dụng lớp ảo di chuột 03 (menu trên cùng và điều hướng mờ khác)

▼ 07. Xuất bản thực tế sử dụng lớp ảo hover 04 (hiệu ứng điều hướng di chuột tách biệt lên và xuống)

▼ 08. Xuất bản thực tế sử dụng lớp ảo hover 05 (Hoạt ảnh di chuột 3D của lớp UI ứng dụng)

▼ 09. Thực hành xuất bản sử dụng lớp ảo trước và sau 01 (sử dụng cơ bản trước và sau)

▼ 10. Thực hành xuất bản sử dụng lớp ảo trước và sau 02 (Hiệu ứng điều hướng di chuột hoạt hình)

▼ 11. Thực hành xuất bản sử dụng lớp học ảo trước và sau 03 (Hoạt ảnh biểu tượng SNS)

▼ 12. Thực hành xuất bản sử dụng lớp ảo trước và sau 04 (điều hướng văn bản sử dụng thuộc tính nội dung)

▼ 13. Xuất bản thực tế sử dụng các lớp ảo để trang trí thiết kế trường nhập liệu (trường nhập liệu sử dụng Font Awesome)

▼ 14~15. Thực hành xuất bản sử dụng lệnh kiểm tra lớp ảo 01 (Tiến độ kỹ năng hoạt hình, chậm trễ)

▼ 16. Thực hành xuất bản sử dụng lớp học ảo kiểm tra đơn hàng 03 (Điều hướng accordion hình ảnh thư viện sử dụng Flexbox)

▼ 17. Xuất bản thực tế 01 (Tạo nút Hamburger động) với Bộ chọn mở rộng và Lớp ảo được chọn

▼ 18. Xuất bản thực tế với bộ chọn mở rộng và lớp ảo đã kiểm tra 02 (Tạo menu phụ hoạt hình)

▼ 19. Xuất bản thực tế 03 (Tạo nội dung menu tab) với lớp ảo được kiểm tra bằng bộ chọn mở rộng

▼ 20. Xuất bản thực tế 04 với Lớp ảo được kiểm tra với Bộ chọn mở rộng (Nội dung tab - Độ mờ)

▼ 21. Xuất bản thực tế 05 với Lớp ảo được kiểm tra với Bộ chọn mở rộng (Nội dung tab – Ứng dụng độ mờ)

▼ 22. Xuất bản thực tế 06 (Nội dung Tab - Slide) với Lớp học ảo được kiểm tra bằng Bộ chọn mở rộng

▼ 23. Xuất bản thực tế 04 (Thanh trượt Tab lời chứng thực) với Lớp học ảo được kiểm tra bằng Bộ chọn mở rộng

▼ Accordion với jQuery

▼ Modal với jQuery & :target

👨🏼‍🏫 Giới thiệu giảng viên

• (Hiện tại) Nhà xuất bản Frontend tự do
• Jo Eun Computer Academy Giảng viên xuất bản web
• Hiện là Giảng viên Xuất bản Web tại Học viện Máy tính
• Nhà xuất bản front-end, chuyên gia xuất bản front-end
• Hiện nay, Khóa học chứng nhận thực hành Kỹ thuật viên thiết kế web của Học viện máy tính
• Trung tâm đào tạo CNTT Lakpia Khóa học thạc sĩ xuất bản Front-end Giảng viên
• Easy & Edu Xuất bản Front-end, Thiết kế UI/UX
• HTML+CSS+JQUERY xuất bản kênh YouTube 'Coding Works' hoạt động
• ⚡ Kênh YouTube của Coding Works Publishing - https://www.youtube.com/codingworks

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

※ Nếu bạn biết lý thuyết xuất bản cơ bản, bạn có thể học sản xuất xuất bản thực tế.
※ Bạn có thể tham khảo những lý thuyết cần thiết khi cần thiết trong quá trình học sản xuất xuất bản thực tế .

Mục 0. [Xem trước] Xem trước ví dụ xuất bản thực tế HTML+CSS đã hoàn thành

• [Xem trước phiên bản hoàn thiện] Thực hành sản xuất xuất bản HTML+CSS
• [Ghi chú sản xuất phiên bản đầy đủ] Sản xuất xuất bản thực tế HTML+CSS
• [Ghi chú sản xuất phiên bản đầy đủ] Thực hành sản xuất xuất bản HTML+CSS với jQuery
• [Ghi chú sản xuất phiên bản hoàn thiện] Thực hành xuất bản trang đích sử dụng nền video với jQuery

Phần 1. Sử dụng Brackets và Visual Studio Code

• Cách sử dụng dấu ngoặc và sử dụng phím tắt
• Cách sử dụng Emmet trong ngoặc đơn và sử dụng phím tắt)
• Xem trước trực tiếp Brackets (Tạo cấu trúc thư mục)
• Cách sử dụng và thiết lập Visual Studio Code
• Cách sử dụng Emmet trong Visual Studio Code

Mục 2. Mục 01. HTML+CSS+JQUERY Lý thuyết cơ bản về xuất bản

• Cách sử dụng các thẻ cốt lõi của HTML5 (đoạn văn, định dạng văn bản)
• Cách sử dụng thẻ cốt lõi HTML5 (tạo danh sách)
• Cách sử dụng thẻ cốt lõi HTML5 (liên kết, hình ảnh)
• Lý thuyết cốt lõi về CSS (CSS là gì, Liên kết CSS, Ngữ pháp cơ bản)
• Lý thuyết cốt lõi của CSS (Selector, Selector Application Priority)
• Thuộc tính định dạng CSS (kiểu văn bản)
• Thuộc tính định dạng CSS (kiểu danh sách)
• Bộ chọn con cháu CSS so với bộ chọn con, phần tử cha so với phần tử con
• CSS Box Model (border, border-radius) để thiết kế chi tiết
• Mô hình hộp CSS cho thiết kế chi tiết (chiều rộng, chiều cao, đệm, lề, kích thước hộp)
• Mô hình hộp CSS cho thiết kế chi tiết (box-shadow, text-shadow)
• 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)
• Thiết kế bố cục CSS với các thẻ ngữ nghĩa HTML5 (phần tử cha, phần tử con, phần tử anh chị em)
• Hiểu đầy đủ về thuộc tính CSS Position (Phần 1) – Phần tử cha so với phần tử con
• Hiểu đầy đủ về thuộc tính CSS Position (Phần 2) – Tự động căn giữa theo chiều ngang và chiều dọc
• Hiểu đầy đủ về thuộc tính CSS Position (Phần 3) – Định vị bên ngoài phần tử cha
• Các lớp giả bắt buộc của CSS – hiệu ứng di chuột (di chuột, chuyển tiếp)
• CSS yêu cầu các pseudo-class – các pseudo-class tạo ra thứ tự (nth-child, nth-of-type)
• Các lớp giả CSS Essential – Các lớp giả tạo ra thứ tự (first-child, last-child)
• 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 Essential (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)

Phần 3. HTML+CSS+JQUERY Thực hành sản xuất xuất bản

• Xuất bản 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)
• Xuất bản 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)
• Xuất bản thực tế sử dụng lớp ảo hover 01 (Danh sách sản phẩm có mô tả chi tiết khi di chuột qua)
• Xuất bản thực tế sử dụng lớp ảo hover 02 (Tạo chú giải công cụ xuất hiện khi di chuột qua)
• Xuất bản thực tế sử dụng lớp ảo hover 03 (menu chồng chéo và điều hướng mờ khác)
• Xuất bản thực tế sử dụng lớp ảo hover 04 (hiệu ứng điều hướng khi di chuột tách thành lên và xuống)
• Xuất bản thực tế sử dụng lớp ảo hover 05 (Hoạt ảnh di chuột 3D của lớp UI ứng dụng)
• Thực hành xuất bản sử dụng lớp ảo trước và sau 01 (sử dụng cơ bản trước và sau)
• Thực hành xuất bản sử dụng lớp ảo trước và sau 02 (Hiệu ứng điều hướng di chuột hoạt hình)
• Xuất bản thực tế sử dụng lớp học ảo trước và sau 03 (hoạt hình biểu tượng SNS)
• Xuất bản thực tế sử dụng lớp ảo trước và sau 04 (điều hướng văn bản sử dụng thuộc tính nội dung)
• Xuất bản thực tế sử dụng các lớp ảo để trang trí thiết kế trường nhập liệu (trường nhập liệu sử dụng Font Awesome)
• Thực hành xuất bản sử dụng lệnh kiểm tra lớp ảo 01 (Tiến trình kỹ năng hoạt hình)
• Thực hành xuất bản sử dụng lớp học ảo kiểm tra thứ tự 02 (Tiến độ kỹ năng hoạt hình, chậm trễ)
• Thực hành xuất bản sử dụng lớp kiểm tra đơn hàng ảo 03 (Điều hướng accordion hình ảnh thư viện sử dụng Flexbox)
• Đã kiểm tra lớp ảo với bộ chọn mở rộng Thực hành xuất bản 01 (Tạo nút hamburger hoạt hình)
• Đã kiểm tra lớp ảo với bộ chọn mở rộng Thực hành xuất bản 02 (Tạo menu phụ hoạt hình)
• Đã kiểm tra lớp ảo với bộ chọn mở rộng Thực hành xuất bản 03 (Tạo nội dung menu tab)
• Đã kiểm tra lớp ảo với bộ chọn mở rộng Thực hành xuất bản 04 (Nội dung tab - Độ mờ)
• Đã kiểm tra lớp ảo với bộ chọn mở rộng Thực hành xuất bản 05 (Nội dung tab – Ứng dụng độ mờ)
• Đã kiểm tra lớp ảo với bộ chọn mở rộng Thực hành xuất bản 06 (Nội dung tab - Slide)
• Xuất bản thực tế 07 (Thanh trượt Tab lời chứng thực) với Pseudo-Class được kiểm tra bằng Bộ chọn mở rộng
• Nguyên mẫu thanh trượt nội dung CSS thuần túy 01 (Nguyên mẫu thanh trượt nội dung tab toàn màn hình)
• Nguyên mẫu thanh trượt nội dung CSS thuần túy 02 (Ứng dụng thanh trượt nội dung tab toàn màn hình)

Phần 4. Thực hành sản xuất xuất bản HTML+CSS với JQUERY

• HTML+CSS Thực hành sản xuất xuất bản với JQUERY - Nội dung menu tab (Phong cách 01)
• 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
• Xuất bản thực tế với JQUERY: Đánh giá bằng cách sử dụng các biến JavaScript và các câu lệnh có điều kiện
• Nội dung Menu Tab - Kiểu 02 (Nguyên mẫu) với jQuery
• Nội dung Menu Tab - Kiểu 02 (Sản xuất thực tế) với jQuery
• Thay đổi hình nền khi di chuột bằng jQuery
• [Phần 01] Hiệu ứng di chuột của mục Shopping Mall UI - Thiết kế Wireframe, Tạo các tính năng quan trọng
• [Phần 02] Hiệu ứng di chuột vào mục trong trung tâm mua sắm - Viết HTML chi tiết và thiết kế CSS chi tiết
• [Phần 03] Hiệu ứng di chuột qua mục trong Shopping Mall UI - Tạo tương tác jQuery
• [Phần 01] Slide nội dung Accordion - Thiết kế Wireframe
• [Phần 02] Slide Nội dung Accordion - Chi tiết xuất bản
• [Phần 03] Slide nội dung Accordion - jQuery tương tác

Phần 5. Thực hành xuất bản trang đích bằng video nền với jQuery

• [Phần 01] Landing page sử dụng video background - Web font, điều khiển video, logo
• [Phần 02] Landing page sử dụng video background - Tạo nội dung động
• [Phần 03] Landing page sử dụng video background - Điều hướng toàn màn hình (trigger, modal design)
• [Phần 04] Trang đích sử dụng video background - Điều hướng toàn màn hình (tương tác jQuery cửa sổ modal)
• [Phần 05] Landing page sử dụng video background - Chèn video, chèn âm thanh, điều chỉnh âm lượng

Mục 6. Xuất bản trang web thực tế - Thiết kế giao diện người dùng màn hình đăng nhập

• [Phần 01] Thiết kế giao diện màn hình đăng nhập (ghi chú sản xuất, thiết kế cấu trúc HTML, chèn favicon)
• [Phần 02] Thiết kế giao diện màn hình đăng nhập (Thiết kế CSS - Thay đổi kích thước và vị trí)
• [Phần 03] Thiết kế giao diện màn hình đăng nhập (Thiết kế CSS - Thiết kế nút và hộp kiểm và nhãn)
• [Phần 04] Thiết kế giao diện màn hình đăng nhập (Thiết kế CSS - thiết kế ngăn chia trước và sau)

Mục 7. Trình độ trung cấp đến nâng cao Nhảy lên Lý thuyết xuất bản và mẹo

• Khuyến nghị về tiện ích mở rộng của Chrome dành cho nhà xuất bản web (6)
• Tạo một neo A-Tag và cuộn mượt mà theo hai cách (Plugin JQuery, Thuộc tính CSS)
• Sử dụng iframe để tải một html khác vào bên trong nội dung
• Bộ chọn mở rộng sử dụng đầu vào và được kiểm tra (bộ chọn liền kề, bộ chọn anh chị em, bộ chọn thuộc tính)
• Sử dụng JavaScript nội tuyến (sự kiện JavaScript onclick)
• 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

Mục 8. [Tải xuống] Các tệp nguồn và phiên bản hoàn thiện được sử dụng để tạo ví dụ

• [Phiên bản đầy đủ] HTML+CSS Thực hành xuất bản
• [Phiên bản đầy đủ] HTML+CSS Thực hành xuất bản với jQuery
• [Phiên bản hoàn thiện] Trang đích xuất bản thực tế với jQuery sử dụng nền video
• [Phiên bản hoàn thiện] Xuất bản trang web thực tế - Thiết kế giao diện người dùng màn hình đăng nhập
• [Tải xuống] Visual Studio Code và Emmet

Nhà xuất bản sản xuất trang chủ danh mục đầu tư cá nhân cần phỏng vấn và tuyển dụng, scss, sass, flex, grid, html, css, html/css, trang web, nhà xuất bản web, việc làm của nhà xuất bản, trang web, mã hóa, jquery, javascript, jquery, java Script, bố cục , web tương tác, web tương tác, thiết kế web, thiết kế web, danh mục đầu tư, xuất bản, web phản hồi, bài kiểm tra kỹ năng thiết kế web, bootstrap, khung css, khung