HTML+CSS+JS portfolio thực chiến publishing (Season 3)

🚩 Các câu hỏi dự kiến liên quan đến bài giảng và những điều cần đọc

H. Tôi có thể tham gia Khóa học HTML+CSS+JS Practical Portfolio Phần 3 mà không cần tham gia Phần 1 hoặc Phần 2 không?

• Bạn không nhất thiết phải xem Phần 1 và Phần 2. Tuy nhiên, trong khi Phần 1 và Phần 2 cung cấp những giải thích chi tiết về các nguyên tắc cơ bản trong xuất bản, Phần 3 lại đi sâu vào các phần lý thuyết. Tuy nhiên, vì được thiết kế cho người mới bắt đầu và người học trung cấp, tôi tin rằng bạn sẽ có thể theo dõi được.

• Nếu bạn tự tin có thể tự tạo bài giảng của riêng mình bằng cách xem lại các ví dụ từ Phần 1 trước, bạn có thể chuyển sang Phần 3. Xin lưu ý rằng các bài giảng Phần 3 này có các ví dụ hoàn toàn mới, không trùng lặp với Phần 1 và Phần 2.

H. Bạn có cung cấp bản HTML hoàn chỉnh được tạo trong Phần 3 của Danh mục thực hành HTML+CSS+JS không?

• Có. Trong phần Tải xuống Tài nguyên dành cho Học sinh, bạn có thể tải xuống tệp nén chứa tất cả các ví dụ thực tế được tạo trong video (HTML, CSS, JS, hình ảnh, trang tham khảo, văn bản nguồn, PDF wireframe, 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 và xóa các tệp index.html và style.css. Bạn có thể bắt đầu bằng cách tạo cấu trúc HTML cơ bản, ngoại trừ thư mục source và images. Nếu cần tham khảo phiên bản hoàn chỉnh, bạn luôn có thể giải nén lại tệp nén 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 này?

• Trước tiên, bạn cần có hiểu biết cơ bản về HTML và CSS . Ví dụ, những người chưa nắm vững các thuộc tính float và position có thể gặp khó khăn khi theo dõi. Mặc dù Phần 1 đã đề cập nhiều lần đến các yếu tố này, nhưng Phần 3 được thiết kế dành cho những người đã có kỹ năng xuất bản cơ bản. Xin hãy lưu ý!

• Không yêu cầu kiến thức nền tảng về jQuery hay JavaScript. Tuy nhiên, bạn nên nắm vững các lý thuyết cốt lõi thiết yếu của jQuery . Toàn bộ khóa học dựa trên jQuery để tạo tương tác, bao gồm điều khiển lớp và điều hướng phần tử. JavaScript chủ yếu được sử dụng cho mục đích học tập thực hành, vì vậy bạn không cần phải lo lắng về trình độ JavaScript.

  
  

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 ví dụ. Bạn có thể bắt đầu từ bất kỳ phần nào bạn thích.

• Tuy nhiên, vì lý thuyết về cách tạo ví dụ thực tế được trình bày trong buổi lý thuyết nên chúng tôi khuyên bạn nên nghiên cứu sơ qua lý thuyết trước rồi mới nghiên cứu phần về cách tạo ví dụ thực tế.

• Không có mức độ khó cố định cho từng phần. Tuy nhiên, mỗi video trong một phần đều được đánh dấu mức độ khó, vì vậy bạn có thể thoải mái bắt đầu với mức độ khó thấp nhất.

  
  

• [TMI] Có rất nhiều lý thuyết cần hiểu khi nghiên cứu xuất bản và tạo ra các ví dụ thực tế. Mặc dù tôi rất muốn biên soạn một video bao quát toàn bộ lý thuyết, nhưng việc này thường khá khó khăn. Tôi khuyến khích bạn bổ sung kiến thức bằng cách xem các video lý thuyết Phần 1 và Phần 2, kênh YouTube Coding Works và sử dụng công cụ tìm kiếm Google.

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

• Tất cả các tệp hoàn chỉnh (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 từ phần cuối cùng (phần 13) được hiển thị bên dưới.

  .

H. Trong tương lai, lý thuyết và ví dụ thực hành có được cập nhật không?

• Nếu có cập nhật về lý thuyết và ví dụ thực hành, chúng tôi sẽ thông báo cho bạn ở đầu phần giới thiệu bài giảng về nội dung nào được cập nhật và khi nào .

• Sau khi cập nhật, bạn có thể tải lại các tệp từ Mục 13. [Tải xuống] Tải xuống phiên bản hoàn chỉnh và tài liệu tham khảo và lưu chúng vào thư mục cập nhật đã thêm.

📖 Chương trình giảng dạy - Danh mục HTML+CSS+JS Thực hành xuất bản (Phần 3)

Phần 2. Sử dụng Trình soạn thảo văn bản (Visual Studio Code)

• Cách sử dụng và cấu hình Visual Studio Code

• Cách cài đặt và sử dụng tiện ích mở rộng thiết yếu của Visual Studio Code

• Cách sử dụng Emmet trong Visual Studio Code

  
  

Phần 3. Lý thuyết xuất bản web và ví dụ ứng dụng

• Thêm số danh sách bằng cách sử dụng hàm đếm CSS

• Bộ lọc CSS với trình tạo bộ lọc

• Màu nhấn CSS với thẻ nhãn

• Bộ lọc phông nền CSS với Glass Morphism (hiệu ứng trong mờ)

• CSS background-repeat, Nhiều nền

• Mặt nạ CSS-hình ảnh, đối tượng-phù hợp

• Nội dung tối thiểu, nội dung tối đa của CSS

• text-stroke để áp dụng đường viền cho văn bản

• Biến CSS

• Thay đổi hình ảnh theo khả năng phản hồi (thẻ hình ảnh)

• Chức năng kẹp để tự động điều chỉnh kích thước văn bản phản hồi

• Chức năng kẹp kích thước văn bản đáp ứng

• tự động điều chỉnh tỷ lệ khung hình

• là lớp giả để giảm sự trùng lặp của bộ chọn

• Dính để sửa một phần tử cụ thể sau khi cuộn

• Di chuột lên xuống (nền, đối tượng phù hợp)

• Hiển thị chân trang ẩn bằng cách cuộn (z-index, cố định)

• Cách sử dụng hình ảnh sprite

• 3 cách để làm cho một phần tử vô hình (độ mờ đục, hiển thị, khả năng hiển thị)

• Cách sử dụng các lớp giả :has() và :not()

• Tạo thanh trượt nội dung bằng scroll-snap

• Dấu ba chấm đơn và dấu ba chấm nhiều dòng

• Tạo nút viền chuyển màu

• Tạo bóng đổ ba chiều bằng kỹ thuật neumorphism

• Lồng ghép bộ chọn CSS thuần túy 01 - Cách sử dụng cơ bản không cần SCSS (SASS)

• Lồng ghép bộ chọn CSS thuần túy 02 - Ví dụ sử dụng (Biểu mẫu đăng nhập)

• Tập lệnh tải tài liệu JavaScript (cài đặt hai tiện ích mở rộng tốt)

• JavaScript phát hiện trình duyệt di động (Hàm mũi tên, Tác nhân người dùng)

• Hiểu về cấu trúc thư mục (Địa chỉ tuyệt đối so với địa chỉ tương đối)

• Sử dụng Mondrian Layout để trau dồi kỹ năng bố cục của bạn

• [Phải đọc 01] Hiểu và sử dụng thuộc tính Vị trí

• [Phải đọc 02] Hiểu và sử dụng các thuộc tính hiển thị

  
  

Phần 4. Tạo ví dụ thực tế về xuất bản web - Hoạt ảnh khung hình chính và thiết kế danh sách

• Hiệu ứng gõ văn bản neon

• Hoạt ảnh bánh xe chuột

• Hoạt ảnh quét dấu vân tay

• Thiết kế danh sách xếp hạng sách Yes24 (Bộ đếm CSS)

• Thiết kế danh sách lạ mắt - counter(), attr()

  
  

Phần 5. Tạo ví dụ thực tế về xuất bản web - Thiết kế phần lạ mắt

• Thiết kế kiểu chữ đơn giản cho trang tải

• Tiêu đề đánh giá thực tế sống động

• Chế độ tối cơ bản (Lời chào)

• Bố cục tin tức nhiều cột đáp ứng

• Fancy Section UI #01 - Phần Thiết kế Hình dạng Hình ảnh

• Giao diện Fancy Section #02 - Phần lưới tách biệt

• Fancy Section UI #03 - Phần hiệu ứng nội dung Accordion

  
  

Phần 6. Tạo ví dụ thực tế về xuất bản web - Giao diện người dùng thẻ & Nội dung menu tab

• Phần Giao diện Thẻ Flex Responsive (Thành phố tốt nhất)

• Giao diện thẻ di chuột Gradient (Đội tốt nhất)

• Nội dung menu tab (giao diện thẻ sản phẩm trung tâm mua sắm một mục)

• Nội dung Menu Tab (Nội dung Menu Tab Danh sách Sản phẩm Trung tâm Mua sắm)

  
  

Phần 7. Tạo ví dụ thực tế về xuất bản web - Hiệu ứng điều hướng và di chuột

• Nút hiệu ứng di chuột tuyệt vời 4 loại

• Chú giải công cụ theo chiều ngang (biểu tượng biểu tượng ngôn ngữ phát triển khi di chuột qua)

• Chú giải công cụ theo chiều dọc (di chuột qua biểu tượng lối tắt trung tâm mua sắm)

• Điều hướng Hamburger mở ra bên phải

• Thay đổi hình nền di chuột điều hướng (Coupang)

• Biểu tượng Phông chữ 3D Hiệu ứng di chuột lật

• Hiệu ứng di chuột 3D của biểu tượng SNS (Thuộc tính nghiêng)

• Chỉ báo hoạt ảnh điều hướng di động

• Kiến thức cơ bản về CSS Perspective: Lật thẻ CSS Perspective

• [Ví dụ thực hành về phối cảnh CSS 01] Lật thẻ (Hồ sơ thành viên)

• [Ví dụ thực hành về phối cảnh CSS 02] Lật thẻ (Áp phích phim)

• [Ví dụ thực hành về phối cảnh CSS 03] Lật thẻ (Bãi biển Ocean)

• Giao diện người dùng thẻ tín dụng Glassmorphism #01 (HTML, Mặt trước)

• Giao diện thẻ tín dụng Glassmorphism #02 (Quay lại, Tilt.js)

• Hiệu ứng di chuột qua Thư viện ảnh Flex (Điều hướng di chuột theo kiểu Accordion)

  
  

Phần 8. Tạo ví dụ thực tế về xuất bản web - Nội dung đăng nhập tab Naver

• [Đăng nhập Naver] Tạo Wireframe HTML bằng PPT & NotePad++

• [Naver Login] Mã hóa HTML Wireframe bằng trình soạn thảo văn bản

• [Đăng nhập Naver] Thiết kế CSS chi tiết #01

• [Đăng nhập Naver] Thiết kế CSS chi tiết #02

• [Đăng nhập Naver] Thiết kế CSS chi tiết #03

• [Đăng nhập Naver] Thiết kế CSS chi tiết & Hoàn thiện cuối cùng #04

  
  

Phần 9. Tạo ví dụ thực tế về xuất bản web - Thiết kế biểu mẫu đăng nhập

• Mật khẩu Hiện Ẩn Biểu mẫu Đăng nhập #01 (Tạo Khung HTML)

• Mật khẩu Hiển thị Ẩn Biểu mẫu đăng nhập #02 (Thiết kế CSS chi tiết)

• Mật khẩu Hiển thị Ẩn Biểu mẫu đăng nhập #03 (JQuery)

• Biểu mẫu đăng nhập kép #01 (Tạo khung HTML)

• Biểu mẫu đăng nhập kép #02 (Thiết kế CSS chi tiết)

• Biểu mẫu đăng nhập kép #03 (Thiết kế CSS chi tiết)

  
  

Mục 10. Tạo ví dụ thực tế về xuất bản web - Jump Up (Xuất bản web này và kia)

• Tải hoạt ảnh với vòng lặp var(--i) của biến CSS

• Tạo một accordion HTML thuần túy (chi tiết, tóm tắt)

• Plugin hoạt ảnh gõ chữ JS (Typed.js)

• [Thiết kế Mockup CSS] - MacBook

• [Thiết kế Mockup CSS] - iPhoneX

• Hiệu ứng cuộn trang CSS thuần túy

• Hoạt ảnh nhãn phần tử biểu mẫu (Hoạt ảnh nhãn đầu vào)

• Hoạt ảnh cuộn CSS (Lớp phủ chuyển màu hoạt ảnh cuộn vô hạn)

• Tải Gradient Conic CSS

• Biểu đồ hình tròn và hình tròn Donuts CSS Conic Gradient

• Xác thực CSS cho biểu mẫu đăng nhập (Xác thực biểu mẫu) mà không cần JavaScript

• Kiểu hộp kiểm tùy chỉnh với các biến CSS

• Đệm cuộn, thay đổi thiết kế sau khi cuộn (jQuery) và sử dụng hình ảnh tạm thời

• Dòng thời gian sự nghiệp giáo dục CSS

• Hoạt ảnh viền với Thư viện ảnh Lightbox

• Nội dung menu tab đơn giản (chỉ jQuery)

• Thư viện ảnh đơn giản (JavaScript & jQuery)

  
  

Phần 11. Bắt đầu và Hoàn thành Xuất bản! Tạo Cấu trúc Wireframe HTML

• Cấu trúc Wireframe HTML với tên lớp - Thứ tự và phương pháp sản xuất

• Tạo trang web chế độ tối - HTML Wireframes

• Tạo trang web chế độ tối - Xuất bản lồng ghép bộ chọn CSS

• Đăng ký đăng nhập chéo chuyển tiếp - Tạo khung HTML

• Chuyển đổi Đăng nhập chéo Đăng ký - Bộ chọn CSS Lồng ghép Xuất bản Sản xuất

• Trang chủ Hồ sơ Cá nhân - Tìm Ý tưởng Thiết kế Giao diện Người dùng

• Trang chủ Hồ sơ Cá nhân - Tạo Khung HTML

  
  

Mục 12. [Tài liệu tham khảo] Nghiên cứu các trang web giúp bạn học xuất bản web

• [Trang web tham khảo] Tóm tắt tính năng chính của 10015 Tools (10015.io)

• [Trang web tham khảo] Xem trước tất cả các thuộc tính CSS

• [Trang web tham khảo] Trình tạo nền và độ dốc

• [Trang web tham khảo] Trích xuất giá trị màu

• [Trang web tham khảo] Sử dụng hình ảnh tạm thời

  
  

Mục 13. [Tải xuống] Tải xuống Phiên bản Hoàn chỉnh và Tài liệu Tham khảo

• [Tải xuống] Bộ sưu tập đầy đủ các ví dụ bài giảng của Phần 3

• [Tài liệu tham khảo] [Tài liệu tham khảo] Tài liệu đọc bắt buộc và Lý thuyết chính

• [Tham khảo] Cài đặt bắt buộc cho Visual Studio Code

• [Tham khảo] Định nghĩa chức năng để xuất bản toàn bộ trang web (Ví dụ)