Portfolio xuất bản web di động với CSS Nesting

Trong quá trình thực hiện 19 trang với tổng cộng 22 loại bố cục di động đa dạng, bạn có thể nâng cao năng lực xây dựng web di động - kỹ năng cạnh tranh nhất khi tìm việc cũng như khi làm việc thực tế trong lĩnh vực Publisher. Bạn có thể củng cố hầu hết các phương pháp sản xuất và bí quyết để tạo ra web di động với tư cách là một Publisher. Khóa học sẽ giải thích chi tiết từng trang một về cách lập Wireframe HTML chi tiết, vốn là điểm mạnh nhất trong lớp học xuất bản web di động. Thông qua bài giảng, khả năng tạo Wireframe HTML của bạn sẽ được cải thiện đáng kể. Đặc biệt, bạn có thể học hỏi đầy đủ về phương pháp lồng ghép CSS (Nesting). Bạn sẽ được trang bị đầy đủ năng lực thực hành CSS cấp trung - cao cấp, tập trung vào bố cục Flex.

(5.0) 4 đánh giá

36 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

Mobile App Design
Mobile App Design
HTML/CSS
HTML/CSS
wireframe
wireframe
slick-slider
slick-slider
iframes
iframes
Mobile App Design
Mobile App Design
HTML/CSS
HTML/CSS
wireframe
wireframe
slick-slider
slick-slider
iframes
iframes

Bạn sẽ nhận được điều này sau khi học.

  • Khả năng publishing bằng phương thức CSS Nesting thuần túy

  • Lập trình CSS thực chiến trình độ trung cao cấp tập trung vào bố cục Flex & Grid

  • Tạo 22 loại bố cục di động đa dạng trên tổng cộng 19 trang

  • Lý thuyết và bí quyết thiết yếu trong việc xây dựng Mobile Web Publishing, cùng với thực hành thực tế

  • Tạo bố cục tối ưu hóa cho di động sử dụng biến CSS (Var)

  • Tiêu chuẩn của Clean Coding giúp bạn publishing như một người dày dạn kinh nghiệm

  • Cách sử dụng Slick Slider và bí quyết thay đổi CSS

  • Sử dụng iframe sau khi tạo bản thiết kế mẫu (Mockup) cho di động bằng HTML+CSS

"Phương pháp CSS Nesting sản xuất mobile web publishing
Lý thuyết thiết yếu, bí quyết và thực hành sản xuất có hệ thống"

Bước 01. Xây dựng chi tiết Wireframe HTML cho tổng cộng 22 loại bố cục di động đa dạng trên 19 trang
Bước 02. Thực hành xây dựng đa dạng các bố cục bằng phương pháp CSS Nesting (lồng nhau)
Bước 03. Hoàn thiện sản phẩm để kết quả xuất bản (publishing) trở nên hoàn hảo hơn

Khóa học này chứa đựng những bí quyết sản xuất thiết kế web di động mà Coding Works đã giảng dạy cho vô số học viên tại các học viện offline từ trước đến nay. Tôi tin chắc rằng sau khi hoàn thành khóa học, kỹ năng lập trình giao diện (publishing) của bạn sẽ được nâng lên một tầm cao mới. Đặc biệt, bạn sẽ có được sự tự tin lớn trong việc lập trình theo phương thức CSS Nesting.

Lập trình với phương thức CSS Nesting vốn dĩ chỉ có thể sử dụng trong SCSS(SASS)
nay đã có thể thực hiện ngay trên CSS thuần!


Khóa học [Portfolio xuất bản Web di động với CSS Nesting] này không được thực hiện theo phương pháp lập trình CSS thông thường, mà được xây dựng bằng kỹ thuật mới nhất là CSS Nesting (lồng nhau). CSS Nesting vốn chỉ có thể sử dụng trong SCSS(SASS) cho đến cách đây một năm, nhưng hiện nay bạn đã có thể sử dụng nó mà không cần đến SCSS(SASS). Tôi tin rằng bạn sẽ phát triển đáng kể khi thực hiện xuất bản dự án web di động bằng CSS Nesting.

Để sử dụng SCSS (SASS) truyền thống, bạn cần có sự chuẩn bị. Cùng với việc chuẩn bị, bạn phải trải qua quá trình gọi là biên dịch (compile) thì trình duyệt mới có thể nhận diện được CSS. Lý do chính mà hầu hết mọi người sử dụng SCSS (SASS) chính là lồng bộ chọn (Selector Nesting). Tất nhiên, SCSS (SASS) còn có nhiều tính năng đa dạng khác, nhưng tính năng quan trọng nhất là lồng nhau, và giờ đây bạn có thể lập trình bằng CSS Nesting mà không cần sử dụng SCSS (SASS).

Chủ đề bài giảng 📖

Thông qua khóa học <Mobile Web Publishing Portfolio with CSS Nesting> của Coding Works, bạn có thể nâng cao khả năng xây dựng trang web di động - kỹ năng cạnh tranh nhất khi tìm việc cũng như trong thực tế làm nghề publisher. Đồng thời, bạn có thể củng cố hầu hết các phương pháp sản xuất và bí quyết để tạo ra trang web di động với tư cách là một publisher.

  1. Kỹ năng cắt ghép giao diện (publishing) bằng phương thức lồng nhau (Nesting) của CSS thuần

  2. Coding CSS thực chiến trình độ trung cao cấp tập trung vào bố cục Flex & Grid

  3. Lý thuyết và bí quyết thiết kế web di động (Mobile Web Publishing) thiết yếu, cùng với thực hành chế tác thực tế

  4. Sử dụng iframe sau khi tạo Mockup di động bằng HTML+CSS

  5. Tạo bố cục tối ưu cho di động sử dụng biến CSS (Var)

  6. Cách sử dụng Slick Slider và bí quyết thay đổi CSS


  7. Tiêu chuẩn của Clean Coding để xuất bản web như một người có kinh nghiệm

Cách viết mã CSS Nesting được hỗ trợ hoàn hảo trên
tất cả các trình duyệt

Màu xanh lá cây có nghĩa là trình duyệt hỗ trợ hoàn hảo.

Xem chi tiết trên trang web Can i Use: https://caniuse.com/?search=css%20nesting

▲ Sử dụng iframe sau khi tạo mô hình di động (Mockup) cho mục đích danh mục cá nhân (Portfolio)

Sản xuất chi tiết tổng cộng 19 trang, với 22 loại bố cục di động HTML wireframe đa dạng

Cung cấp đa dạng tệp tin 🗂

📝 File thiết kế, file nguồn, bản hoàn thiện publishing, ghi chép bài giảng

  1. [CSS Nesting] Nguồn hình ảnh thiết kế công việc

  2. [CSS Nesting] Wireframe HTML web di động (TXT)

  3. [CSS Nesting] Thiết kế web di động (PSD)

  4. [Tải xuống] 3 loại Mockup di động (iPhone, Galaxy) bằng HTML+CSS

  5. Hình ảnh thiết kế riêng lẻ(PNG) [CSS Nesting] Hình ảnh thiết kế riêng lẻ cho web di động(PNG)

  6. Văn bản nguồn và trang web tham khảo [CSS Nesting]

  7. CSS Nesting Mobile Web - Ghi chú bài giảng

▲ Video sản xuất web di động CSS Nesting - Cung cấp tài liệu bài giảng PPT được sử dụng trong video bài giảng

Tiêu chuẩn của lập trình sạch🧽

<Mobile Web Publishing Portfolio với CSS Nesting> Tôi tin rằng thông qua việc theo học khóa học này, kỹ năng xây dựng wireframe HTML, khả năng sử dụng Flex cho publishing và nhiều kỹ năng khác của bạn sẽ phát triển vượt bậc. Mặc dù những phần này đều rất quan trọng, nhưng điều quan trọng nhất trong số đó là bạn sẽ được học về 'Tiêu chuẩn của Clean Coding (Lập trình sạch) để publishing như một người có kinh nghiệm'. Tất cả các nội dung publishing trong bài giảng đều được soạn thảo dựa trên nguyên tắc này.

<Nguyên tắc Clean Coding để xuất bản như một người có kinh nghiệm> là việc thêm các chú thích cần thiết vào đúng nơi, viết mã các bộ chọn CSS theo đúng thứ tự xuất hiện của HTML, và sắp xếp các bộ chọn CSS chung vào một phần gọi là Common CSS để thuận tiện cho việc bảo trì sau này.. Việc học những nguyên tắc và thói quen lập trình này sẽ giúp ích rất nhiều cho bạn trong công việc thực tế. Đặc biệt, khi đi xin việc, nhà tuyển dụng hoặc những người có chuyên môn sẽ xem xét mã nguồn (Source Code) từ các sản phẩm xuất bản của ứng viên. Trong trường hợp này, chỉ cần nhìn lướt qua mã nguồn là họ có thể đánh giá được kỹ năng cơ bản về xuất bản của ứng viên.

💡 Điểm hấp dẫn khác biệt của bài giảng này là gì?

  1. Bạn có thể trang bị khả năng lập trình theo phương thức CSS Nesting, một kỹ thuật mới.

  2. Bạn sẽ được học cách lập hồ sơ chi tiết HTML wireframe giúp nâng cao đáng kể kỹ năng publishing.

  3. Bạn sẽ được học các quy tắc chuẩn của Clean Coding để có thể lập trình web chuyên nghiệp như những người có kinh nghiệm tại Coding Works.

  4. Giải thích chi tiết các khái niệm chuyên sâu thông qua nhiều bài thực hành, ví dụ đa dạng và cách diễn đạt dễ hiểu.

  5. Giải thích tất cả những điều học viên cần biết để thực hiện xuất bản (publishing) web di động.

Thiết kế toàn bộ giao diện người dùng (UI) web di động

Publishing với CSS Nesting 📚


▲ Trang giới thiệu với Overlay / Trang giới thiệu

🚩Trang giới thiệu với Overlay

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Bố cục toàn màn hình

  3. Hiện/ẩn lớp phủ thông báo (toast overlay)

🚩 Trang giới thiệu

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Intro Slick Slider

  3. Bắt đầu


▲ Trang chào mừng / Trang đăng nhập


🚩 Trang chào mừng

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Thiết kế nút đăng nhập

🚩Trang đăng nhập

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Xử lý các thành phần của biểu mẫu (form)


▲ Trang đăng ký thành viên / Trang tìm mật khẩu

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

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Bố trí bố cục Flex

  3. Xử lý các thành phần của biểu mẫu (form)

🚩 Trang tìm mật khẩu

  1. Xây dựng cấu trúc HTML wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Xử lý các thành phần của biểu mẫu (form)


▲ Trang chủ My Fresh / Trang xem thông tin thành viên

🚩Trang chủ My Fresh

  1. Xây dựng cấu trúc HTML wireframe theo phương thức CSS Nesting

  2. Sắp xếp bố cục Flex

  3. Sử dụng font icon, sử dụng ::before ::after

🚩 Trang xem thông tin thành viên

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Sắp xếp bố cục Flex

  3. Sử dụng font icon, sử dụng ::before ::after


▲ Trang xác nhận thông tin thành viên / Trang chỉnh sửa thông tin thành viên

🚩 Trang xác nhận thông tin thành viên

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Sử dụng biểu tượng phông chữ (font icon), sử dụng bộ chọn liền kề (adjacent selector)

🚩 Trang chỉnh sửa thông tin thành viên

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Sử dụng biểu tượng phông chữ (font icon), sử dụng bộ chọn liền kề (adjacent selector)

  4. Nút gạt (switch) tùy chỉnh bằng CSS

  5. Checkbox tùy chỉnh bằng CSS


▲ Trang quản lý địa chỉ / Trang giỏ hàng

🚩 Trang quản lý địa chỉ

  1. Xây dựng cấu trúc HTML wireframe theo phương thức CSS Nesting

  2. Sắp xếp bố cục Flex


🚩 Trang giỏ hàng

  1. Xây dựng cấu trúc HTML wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Sử dụng font icon

  4. Xử lý các thành phần của biểu mẫu (form)


▲ Trang thanh toán đơn hàng / Trang danh sách yêu thích

🚩 Trang thanh toán đơn hàng

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Sắp xếp bố cục Flex

  3. Sử dụng biểu tượng phông chữ (font icon)

  4. Sử dụng Unicode của biểu tượng font với các lớp giả :before :after


🚩 Trang danh sách yêu thích

  1. Xây dựng cấu trúc HTML wireframe theo phương thức CSS Nesting

  2. Bố cục Flex layout


▲ Trang sản phẩm đã xem gần đây / Trang danh sách đơn hàng

🚩 Trang sản phẩm đã xem gần đây

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Sử dụng font icon, sử dụng ::before ::after


🚩 Trang danh sách đơn hàng

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Sử dụng font icon, sử dụng ::before ::after


▲ Trang tìm kiếm / Trang danh mục

🚩 Trang tìm kiếm

  1. Xây dựng cấu trúc HTML wireframe theo phương thức CSS Nesting

  2. Bố cục Flex Layout

  3. Sử dụng font icon, sử dụng ::before ::after


🚩 Trang danh mục

  1. Xây dựng cấu trúc HTML wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Sử dụng biểu tượng phông chữ (font icon)

  4. Sử dụng Unicode của font icon với giả lớp :before :after


▲ Trang chủ chính / Trang xem chi tiết sản phẩm (Mô tả sản phẩm)

🚩 Trang chủ chính

  1. Xây dựng cấu trúc HTML wireframe theo phương thức CSS Nesting

  2. Slick Slider trang chủ chính

  3. Slider danh sách sản phẩm

  4. Bố cục Layout Flex

  5. Sử dụng biểu tượng phông chữ (font icon), sử dụng ::before ::after

  6. Thiết kế huy hiệu (Badge)


🚩 Trang mô tả sản phẩm

  1. Xây dựng cấu trúc HTML Wireframe theo phương thức CSS Nesting

  2. Bố cục Layout Flex

  3. Sử dụng tính năng nội dung menu tab

  4. Tính năng cuộn lên đầu trang mượt mà bằng Javascript

  5. Sử dụng font icon, sử dụng ::before ::after


▲ Trang chi tiết sản phẩm (Đánh giá) / Trang chi tiết sản phẩm (Hỏi đáp)

🚩 Trang xem chi tiết sản phẩm (Đánh giá)

  1. Tạo cấu trúc wireframe HTML theo phương thức CSS Nesting

  2. Sắp xếp bố cục Flex

  3. Sử dụng biểu tượng font (font icon), sử dụng ::before ::after

  4. Thiết kế huy hiệu (Badge)


🚩Trang chi tiết sản phẩm (Hỏi đáp)

  1. Tạo cấu trúc wireframe HTML theo phương thức CSS Nesting

  2. Sắp xếp bố cục Flex

  3. Sử dụng font icon

  4. Sử dụng Unicode của font icon với giả lớp :before :after

💡 Trình soạn thảo văn bản cho công việc xuất bản <Visual Studio Code>

Khóa học này <Mobile Web Publishing Portfolio với CSS Nesting> là khóa học được thực hiện bằng Visual Studio Code. Visual Studio Code là một chương trình miễn phí không 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.
Vui lòng 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 trước khi bắt đầu học publishing.

Tải xuống Visual Studio Code

  1. Cách sử dụng và thiết lập môi trường Visual Studio Code (Xem video)

  2. Cách sử dụng Emmet trong Visual Studio Code (Xem video)

  3. Cách cài đặt và sử dụng các Extension thiết yếu cho Visual Studio Code (Xem video)

  4. Ngăn chặn Full Reload khiến trang bị cuộn lên trên khi chỉnh sửa CSS trong Visual Studio Code (Xem video)


Chủ đề (Theme) Visual Studio Code được sử dụng khi thực hiện bài giảng: One Dark Pro

Hỏi & Đáp 👨‍🏫

Nếu bạn có thắc mắc, vui lòng đặt câu hỏi trên bảng hỏi đáp cộng đồng của bài giảng này, tôi sẽ cố gắng hết sức để trả lời bạn.


H. Có cần kiến thức tiên quyết hay sự chuẩn bị nào không?

Không cần kiến thức tiên quyết hay sự chuẩn bị đặc biệt nào. Chỉ cần có kinh nghiệm sử dụng HTML+CSS cơ bản là bạn hoàn toàn có thể theo kịp, đồng thời đạt được kết quả và sự cải thiện kỹ năng như mong đợi. Tuy nhiên, vì các lý thuyết CSS trung cấp được sử dụng thường xuyên, nên bạn cần nắm vững ở một mức độ nhất định các nội dung học tập dưới đây.

😀 Danh sách phát YouTube của Coding Works - Lý thuyết CSS trung cấp để thiết kế web di động tốt hơn


Q. Nội dung cốt lõi tạo nên sự khác biệt là gì?

Khóa học [Portfolio Mobile Web Publishing với CSS Nesting] không được thực hiện theo cách viết mã CSS thông thường mà được xây dựng bằng kỹ thuật CSS Nesting (lồng nhau) mới nhất. Cho đến một năm trước, CSS Nesting chỉ có thể sử dụng được trong SCSS (SASS), nhưng hiện nay bạn có thể sử dụng nó mà không cần đến SCSS (SASS). Tôi tin rằng bạn sẽ phát triển đáng kể khi thực hiện dự án mobile web bằng CSS Nesting.

Với tư cách là một giảng viên đã có nhiều năm kinh nghiệm giảng dạy cả các lớp online và offline, tôi giảng dạy bằng phương pháp chắc chắn và hệ thống nhất để nâng cao kỹ năng publishing. Và tôi tin rằng cốt lõi của khóa học này là được thiết kế để giúp các bạn thực hiện từng bước công việc publishing web di động vốn còn lạ lẫm và khó khăn, từ đó tạo ra được những sản phẩm chất lượng cao.


Hỏi: Tại sao phải học quy trình sản xuất Mobile Web Publishing và hiệu quả kỳ vọng cụ thể là gì?

Web di động là sản phẩm quan trọng nhất trong hồ sơ năng lực (portfolio) cá nhân. Vì vậy, nếu có các sản phẩm web di động, khả năng cạnh tranh khi xin việc sẽ rất tốt. Nó không chỉ đóng vai trò là portfolio xin việc mà hầu hết các công ty hiện nay đều đang và có ý định thực hiện các dự án web di động. Đứng từ phía công ty, nếu bạn có một portfolio web di động được thực hiện tốt, tôi nghĩ đó sẽ là một tài liệu tham khảo rất tuyệt vời cho việc tuyển dụng hoặc chuyển việc.

Web di động là sản phẩm quan trọng nhất trong hồ sơ năng lực (portfolio) cá nhân. Vì vậy, nếu có các sản phẩm web di động, khả năng cạnh tranh khi xin việc của bạn sẽ rất tốt. Không chỉ đóng vai trò là hồ sơ xin việc, hầu hết các công ty hiện nay đều đang thực hiện hoặc có kế hoạch triển khai các dự án web di động. Đứng từ góc độ của những công ty này, nếu bạn có một hồ sơ năng lực web di động được thực hiện tốt, tôi tin rằng đó sẽ là một tài liệu tham khảo cực kỳ hữu ích cho việc xin việc hoặc chuyển việc.

Hiệu quả kỳ vọng cụ thể thực tế sẽ khác nhau tùy theo mỗi người. Tuy nhiên, điều mà Coding Works có thể khẳng định chắc chắnkhả năng tạo cấu trúc HTML wireframe của bạn sẽ được cải thiện đáng kể. Thông qua việc tạo ra nhiều cấu trúc HTML wireframe đa dạng, bạn sẽ được huấn luyện đầy đủ về cách sắp xếp các cấu trúc tầng HTML phức tạp một cách hệ thống. Ngoài ra, khóa học cũng sẽ hướng dẫn chi tiết cách đặt tên và chia sẻ các class name nhất quán trong quá trình thực hành cùng nhau.

Sản xuất chi tiết khung sườn HTML cho nhiều bố cục di động khác nhau, từ việc tạo cấu trúc khung sườn HTML đa dạng đến giai đoạn thực hành áp dụng xuất bản web di động thực tế, giúp bạn có thêm tự tin để tạo ra hầu hết các bố cục giao diện người dùng web sau này.


Q. Nội dung bài học sẽ bao quát đến cấp độ nào?

Do đặc thù của web di động nên số lượng tệp tin và thư mục rất nhiều. Vì vậy, nội dung sẽ được tiến hành khá nhanh với khối lượng kiến thức lớn. Mặc dù khái niệm "đến mức độ nào" tùy thuộc vào tiêu chuẩn của mỗi người, nhưng nội dung khóa học này hướng tới việc hoàn thành sản phẩm ở mức độ đủ để làm portfolio cá nhân cho một Publisher. Không chỉ dừng lại ở đó, nội dung bài học còn đủ để bạn có thể xem như là mức độ làm việc thực tế trong dự án web di động.


Hỏi: Điểm khác biệt so với bài giảng trước đây [Portfolio xuất bản Web di động với Figma] là gì?

Cả bài giảng web di động trước đây và bài giảng web di động này đều giống nhau ở điểm là cùng tạo ra web di động bằng phương thức CSS. Điểm khác biệt lớn nhất là bài giảng trước đây sử dụng phương thức CSS liệt kê các phần tử cha mỗi lần, còn bài giảng này là bài giảng hướng dẫn cách tạo bằng phương thức CSS lồng nhau (nesting), chỉ sử dụng phần tử cha một lần. Độ khó cao hơn khoảng 1,5 lần so với bài giảng trước, đồng thời bạn sẽ được thực hành tạo nhiều trang hơn và bố cục đa dạng hơn, từ đó có thể nâng cao hơn nữa kỹ năng xuất bản (publishing) web di động của mình.

Sự khác biệt của khóa học thiết kế web di động này

  • Không thực hiện thiết kế Figma trong lớp học.

  • Vừa xem bản thiết kế hoàn thiện đã chuẩn bị sẵn, vừa thực hiện ngay việc tạo HTML wireframe và publishing.

  • Phương thức coding CSS Nesting

  • Lượng sản xuất và lượng học tập gấp hơn 2 lần (khóa học cơ bản sản xuất 9 trang, khóa học này sản xuất 19 trang)

  • Tạo 22 bố cục hoàn toàn khác nhau và đa dạng

  • Nhiều phương thức tạo slider đa dạng (Slick Slider)



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

Tổng thời lượng bài giảng video khoảng 16 giờ, được chuẩn bị đầy đủ để phục vụ cho việc học tập chuyên sâu.

  • Video hướng dẫn đọc trước và cách tạo cấu trúc wireframe HTML cho web di động - 2 giờ

  • [Thực hành sản xuất] Cấu trúc wireframe HTML cho web di động với PPT - 3 giờ

  • [Thực hành sản xuất] Publishing chi tiết web di động với CSS Nesting - 10 giờ

  • [Tham khảo] Cách sử dụng trang web di động đã hoàn thành làm portfolio - 1 giờ


Q. Có lưu ý nào liên quan đến việc học (môi trường cần chuẩn bị, các lưu ý khác, v.v.) không?

Nội dung bài học rất nhiều và tiến độ diễn ra khá nhanh. Tuy nhiên, tôi sẽ không lướt qua mà không giải thích đầy đủ, thay vào đó tôi sẽ giải thích một cách chi tiết. Tôi tin rằng các bạn sẽ theo kịp tốt. Tuy nhiên, tôi đặc biệt khuyên bạn nên trang bị môi trường màn hình kép thay vì học với một màn hình duy nhất. Nội dung này đã được nêu chi tiết trong video Phần 2 [Nhất định phải đọc] Lý do tại sao kỹ năng publishing không tăng so với nỗ lực bỏ ra, vì vậy hãy tham khảo nhé.

Phần 1. Giới thiệu khóa học

  • [Giới thiệu khóa học] Portfolio Mobile Web Publishing với CSS Nesting

  • [Xem trước bản hoàn thiện] Portfolio xuất bản web di động với CSS Nesting

  • [필독] 순수 CSS 선택자 중첩 01 - CSS Nesting 기본 사용법

  • [Phải đọc] Lồng ghép bộ chọn CSS thuần túy 02 - Ví dụ thực tế về CSS Nesting (Form đăng nhập)


Phần 2. [Đọc kỹ] Cách tạo cấu trúc wireframe HTML cho web di động

  • [필독] Lý do tại sao kỹ năng publishing không tiến bộ so với nỗ lực bỏ ra

  • [필독] Cách xây dựng cấu trúc HTML Wireframe và bí quyết thực hiện

  • [Thực hành] Thực hành tạo HTML Wireframe (Form đăng nhập với checkbox tùy chỉnh)

  • [필독] Cấu trúc HTML Wireframe (Border box và mẹo đặt tên Class)

  • [참고] Hiểu về khái niệm Web di động (Mobile Web) & Ứng dụng di động (Mobile App)


Phần 3. [Thực hành sản xuất] Cấu trúc Wireframe HTML cho Web di động với PPT

  • Cấu trúc HTML Wireframe (Join - Bắt đầu, Đăng nhập, Đăng ký, Tìm mật khẩu)

  • Cấu trúc Wireframe HTML (Myfresh 01 - Trang chính My Fresh)

  • Cấu trúc Wireframe HTML (Myfresh 02 - Xem, kiểm tra, chỉnh sửa thông tin thành viên)

  • Cấu trúc Wireframe HTML (Myfresh 03 - Quản lý địa chỉ giao hàng, Thanh toán đơn hàng)

  • Cấu trúc Wireframe HTML (Myfresh 04 - Giỏ hàng)

  • Cấu trúc Wireframe HTML (Myfresh 05 - Sản phẩm yêu thích, Sản phẩm đã xem gần đây, Danh sách đơn hàng)

  • Cấu trúc Wireframe HTML (Search, Category - Tìm kiếm, Danh mục)

  • Cấu trúc HTML Wireframe (FAQ - Các câu hỏi thường gặp)

  • Cấu trúc Wireframe HTML (Customer Center - Trung tâm khách hàng)

  • Cấu trúc Wireframe HTML (Home - Trang chủ)

  • Cấu trúc Wireframe HTML (Detail - Mô tả sản phẩm, Thông tin chi tiết, Đánh giá, Liên hệ)


Phần 4. [Thực hành sản xuất] Publishing chi tiết web di động với CSS Nesting

  • [필독] Cách thiết lập chiều rộng (width) và chiều cao (height) trong xuất bản web di động

  • [Đọc kỹ] Tạo cấu trúc thư mục, Reset, Biến (Variables)

  • [Thực hành thiết kế Publishing] Intro 01(Màn hình intro, Slider, Custom CSS cho slider)

  • [Thực hành thiết kế Publishing] Intro 02(Toast Overlay, Địa chỉ tuyệt đối vs Địa chỉ tương đối)

  • [실전 퍼블리싱 제작] Join 01(Chào mừng)

  • [Thực hành thiết kế Publishing] Join 02(Đăng nhập)

  • [실전 퍼블리싱 제작] Join 03(Đăng ký thành viên, Tìm mật khẩu)

  • [Thực hành Publishing] My Fresh Main 01 (Page Header, Content Layout)

  • [Thực hành sản xuất Publishing] My Fresh Main 02 (Nội dung chi tiết, gnb)

  • [Thực hành sản xuất Publishing] My Fresh Main 03 (bao gồm gnb)

  • [Thực hành thiết kế Publishing] Sắp xếp chiều cao Container (auto, 100vh)

  • [실전 퍼블리싱 제작] 회원정보 01(회원정보 보기)

  • [Thực hành sản xuất Publishing] Thông tin thành viên 02 (Xác nhận mật khẩu thành viên)

  • [실전 퍼블리싱 제작] 회원정보 03(회원정보 수정)

  • [Thực chiến Publishing] Quản lý địa chỉ giao hàng

  • [Thực hành sản xuất Publishing] Sửa mã trung gian (Common CSS)

  • [Thực hành sản xuất Publishing] Giỏ hàng

  • [Thực chiến Publishing] Thanh toán đơn hàng (giả lớp :not :has)

  • [Thiết kế Publishing thực tế] Danh sách yêu thích

  • [실전 퍼블리싱 제작] 최근 본 상품

  • [Thực hành thiết kế Publishing] Danh sách đơn hàng

  • [실전 퍼블리싱 제작] 검색, 카테고리

  • [실전 퍼블리싱 제작] 홈(Home) 01 - 메인 슬라이더, 카테코리, 배너, 푸터

  • [실전 퍼블리싱 제작] 홈(Home) 02 - SNS, 빠꼼이 상품 슬라이더

  • [실전 퍼블리싱 제작] 상품설명 01 - 탭 버튼 체크, 탭 메뉴 기능, 찜장바구니 버튼

  • [실전 퍼블리싱 제작] 상품설명 02 - 상품상세, 상품정보

  • [실전 퍼블리싱 제작] 상품설명 03 - 상품리뷰, 상품문의

  • [실전 퍼블리싱 제작] Điều chỉnh và sửa đổi chiều rộng, chiều cao theo từng trang (Kiểm tra trên thiết bị di động)

  • [퍼블리싱 수정 보완] Cuộn lên đầu trang mượt mà trong trang mô tả sản phẩm

  • [Chỉnh sửa bổ sung Publishing] - Liên kết tệp & Kiểm tra thanh điều hướng GNB

  • [Bổ sung chỉnh sửa xuất bản] Số lượng slider chính ở Trang chủ (Home), kích thước máy tính bảng của slider sản phẩm


Phần 5. [Tham khảo] Sử dụng web di động đã hoàn thành làm Portfolio

  • Tạo Mockup di động tuyệt đẹp

  • Sử dụng iframe cho bản mô phỏng di động (Mockup) đã tạo (Multi-view, Single-view)

  • Javascript phát hiện trình duyệt di động (Hàm mũi tên, User Agent)

  • Áp dụng trang web di động đã thực hiện sau khi hoàn thành khóa học vào danh mục hồ sơ năng lực (Xem Portfolio của học viên Coding Works)


Phần 6. [Tải về] Tài liệu tham khảo dành cho học viên

  • [Tải xuống] Tải xuống tài liệu tham khảo dành cho học viên (Mobile Web với CSS Nesting)

  • [PDF 교재] 모바일 웹 - HTML 와이어프레임(PDF)

  • [Giáo trình PDF] Web di động - Ghi chú bài giảng

🙋🏻‍♂️ Nhất định phải đọc trước khi đặt câu hỏi nhé~!!

Nếu bạn có bất kỳ thắc mắc nào trong quá trình học tập, hãy đặt câu hỏi nhé. Khi đặt câu hỏi, bạn cần đăng tải nội dung phần chưa làm được, mã nguồn (code) và ảnh chụp màn hình kết quả trên trình duyệt. Đối với mã nguồn, bạn phải gửi đầy đủ cả HTML, CSS và JS thì tôi mới có thể đưa ra câu trả lời chính xác cho bạn được.

Nếu bạn chỉ giải thích vấn đề bằng văn bản trong câu hỏi mà không có mã nguồn, sẽ rất khó để tôi đưa ra câu trả lời chính xác trừ khi đó là vấn đề cực kỳ đơn giản. Khi đó, tôi không còn cách nào khác là phải phản hồi lại rằng "Vui lòng đăng mã HTML, CSS, JS và ảnh chụp màn hình trình duyệt~", và cuối cùng việc nhận được giải pháp sẽ trở nên phiền phức và mất thời gian hơn.

 Để học tập hiệu quả, nhất định hãy tham khảo YouTube Coding Works Publishing.

Vui lòng kết hợp học cùng với các video bài giảng lý thuyết trên kênh YouTube Coding Works Publishing. Tất nhiên không phải tất cả cá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ó sẵn. Vì có rất nhiều video, nên để tìm kiếm video, bạn nên tìm theo ví dụ dưới đây.

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

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

Coding Works đã và đang giảng dạy lý thuyết xuất bản, ứng dụng và xây dựng trang web danh mục cá nhân cho hơn 300 học viên trong các khóa học xuất bản do nhà nước tài trợ cho đến nay. Đặc biệt, đây là giảng viên chuyên về giảng dạy xuất bản trong nhiều năm, hướng dẫn hoàn hảo mọi quá trình chuẩn bị cho việc tìm việc làm nhân viên xuất bản từ A đến Z để hầu hết học viên có thể tìm được việc làm ngay sau khi kết thúc khóa học. Ngoài ra, thông qua việc thực hiện các bài giảng liên quan đến xuất bản trên Inflearn, giảng viên cũng nhận được đánh giá là đã giúp ích rất nhiều cho các học viên của Inflearn.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Dành cho những ai đang cần portfolio thiết kế UI và publishing cho web di động

  • Những người cần kinh nghiệm thực tế để làm công việc xuất bản web di động (mobile web publishing) trong thực tế.

Cần biết trước khi bắt đầu?

  • Kinh nghiệm sử dụng cơ bản HTML+CSS

Xin chào
Đây là codingworks

13,111

Học viên

788

Đánh giá

2,122

Trả lời

4.9

Xếp hạng

23

Các khóa học

■ [Hiện tại] Giảng viên Publishing & Front-end được nhà nước hỗ trợ kinh phí
■ [Hiện tại] Freelance Front-end Publisher
■ [Hiện tại] Vận hành kênh YouTube 'Coding Works' chuyên về HTML+CSS+JQUERY Publishing
■ Giảng viên Web Publishing tại Green Computer Academy
■ Giảng viên Web Publishing tại The Joeun Computer Academy
■ Giảng viên Web Publishing tại Ezen Computer Academy
■ Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing
■ Giảng dạy Portfolio thiết kế Web UI/UX
■ Giảng dạy lớp chứng chỉ thực hành Kỹ thuật viên Thiết kế Web
■ Thiết kế UI/UX và Publishing Front-end tại Easy & Edu

 

🌏Danh sách bài giảng CodingWorks trên Inflearn - https://www.inflearn.com/users/@codingworks
🌏Thứ tự học các bài giảng CodingWorks trên Inflearn (Lộ trình học tập) - https://www.inflearn.com/blogs/2351
🌏Blog Publishing CodingWorks trên Inflearn - https://www.inflearn.com/users/@codingworks/blogs
🌏Kênh YouTube Publishing của CodingWorks - https://www.youtube.com/codingworks
🟣Xem phỏng vấn CodingWorks trên Inflearn In-focus: https://www.inflearn.com/pages/infocus-8-20230704

Thêm

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

Tất cả

56 bài giảng ∙ (16giờ 19phú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á

Tất cả

4 đánh giá

5.0

4 đánh giá

  • parkjb215682님의 프로필 이미지
    parkjb215682

    Đánh giá 11

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    Tôi là một developer đã làm việc trong môi trường có publisher, nhưng trong quá trình học React, tôi cảm thấy developer cũng cần phải hiểu về CSS nên đã quyết định tham gia khóa học này. Việc được biết đến khái niệm wireframe sẽ là một sự trợ giúp lớn cho công việc của tôi trong tương lai.

    • codingworks
      Giảng viên

      Cảm ơn bạn đã đánh giá khóa học.^^

  • kimkm67923205님의 프로필 이미지
    kimkm67923205

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    • codingworks
      Giảng viên

      Cảm ơn bạn đã đánh giá khóa học.

  • n5i4님의 프로필 이미지
    n5i4

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    32% đã tham gia

    • codingworks
      Giảng viên

      Cảm ơn bạn đã đánh giá khóa học.

Khóa học khác của codingworks

Hãy khám phá các khóa học khác của giảng viên!

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!