Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Publishing

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

Trang 19, tổng cộng 22 kiểu bố cục di động khác nhau Khi tạo ra nhiều kiểu bố cục di động khác nhau, bạn có thể cải thiện khả năng tạo trang web di động có tính cạnh tranh nhất trong công việc xuất bản và thực hành xuất bản. Bạn có thể rèn luyện hầu hết các phương pháp và bí quyết tạo trang web di động để trở thành nhà xuất bản. Trong lớp học xuất bản trang web di động, chúng tôi sẽ giải thích chi tiết về cách tạo khung HTML, một trong những phần mạnh nhất của khóa học. Khả năng tạo khung HTML của bạn sẽ được cải thiện đáng kể thông qua khóa học này. Đặc biệt, bạn có thể học cách lồng CSS (Nesting) một cách đầy đủ. Bạn sẽ có được khả năng thực hành CSS cấp trung bình đến cao cấp dựa trên bố cục Flex.

(5.0) 2 đánh giá

29 học viên

  • codingworks
실습 중심
퍼블리싱
Mobile App Design
HTML/CSS
wireframe
slick-slider
iframes

Dịch cái này sang tiếng Việt

  • 순수 CSS lồng nhau (Nesting) khả năng xuất bản

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

  • Trang 19, tổng cộng 22 kiểu bố cục di động khác nhau

  • Các lý thuyết và bí quyết thiết yếu cho sản xuất xuất bản web di động, sản xuất thực tế

  • CSS biến (Var) được sử dụng để tạo bố cục tối ưu cho thiết bị di động

  • Clean Coding: Xuất bản như một chuyên gia giàu kinh nghiệm

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

  • HTML+CSS tạo mẫu di động (Mockup) sau đó sử dụng iframe

" Phương pháp lồng CSS cho sản xuất xuất bản web di động
Lý thuyết và bí quyết thiết yếu, sản xuất thực tế có hệ thống "

Bước 01. Sản xuất chi tiết các khung lưới HTML cho tổng cộng 19 trang và 22 bố cục di động khác nhau
Bước 02. Tạo nhiều layout xuất bản khác nhau bằng phương pháp lồng CSS
Bước 03. Xuất bản hoàn thiện để kết quả xuất bản hoàn thiện hơn

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

Nó chỉ có thể được sử dụng trong SCSS (SASS)
Mã hóa kiểu lồng nhau CSS bằng CSS thuần túy!


Bài giảng này [Danh mục xuất bản web di động với CSS Nesting] được tạo bằng công nghệ lồng CSS mới nhất, thay vì phương pháp mã hóa CSS tiêu chuẩn. CSS Nesting chỉ khả dụng trong SCSS (SASS) cho đến một năm trước, nhưng hiện nay nó có thể được sử dụng mà không cần sử dụng SCSS (SASS). Tôi nghĩ bạn sẽ thấy sự phát triển đáng kể khi bạn xuất bản các dự án web di động của mình bằng CSS Nesting.

Cần phải chuẩn bị để sử dụng SCSS hiện có (SASS). Cùng với quá trình chuẩn bị, nó cũng trải qua một quá trình gọi là biên dịch để trở thành CSS mà trình duyệt có thể nhận dạng được. Lý do phổ biến nhất để sử dụng SCSS (SASS) là lồng ghép bộ chọn. Tất nhiên, SCSS (SASS) có nhiều tính năng hơn nữa, nhưng tính năng quan trọng nhất là lồng nhau. Bây giờ, bạn có thể mã hóa bằng lồng nhau CSS mà không cần sử dụng SCSS (SASS).

Chủ đề bài giảng 📖

Thông qua <Danh mục xuất bản web di động với CSS Nesting> của Codingworks, bạn có thể cải thiện kỹ năng sản xuất web di động của mình, đây là kỹ năng cạnh tranh nhất trong việc tuyển dụng và thực hành của nhà xuất bản. Và với tư cách là nhà xuất bản, bạn có thể họ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.

  1. Khả năng xuất bản lồng nhau của CSS thuần túy

  2. Mã hóa thực tế CSS trung cấp đến nâng cao tập trung vào bố cục Flex & Grid

  3. Các lý thuyết và bí quyết thiết yếu cho sản xuất xuất bản web di động, sản xuất thực tế

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

  5. Tạo bố cục được tối ưu hóa cho thiết bị di động bằng cách sử dụng các biến CSS (Var)

  6. Cách sử dụng Slick Slider và thay đổi kiến ​​thức về CSS


  7. Clean Coding: Xuất bản như một chuyên gia giàu kinh nghiệm

Được hỗ trợ đầy đủ trên tất cả các trình duyệt
Mã hóa kiểu lồng nhau của CSS

Nếu hiển thị màu xanh lá cây thì có nghĩa là trình duyệt hỗ trợ đầy đủ .

Tìm hiểu thêm trên trang web Can i Use: https://caniuse.com/?search=css%20nesting

▲ Tạo một bản mô phỏng di động để sử dụng cho danh mục đầu tư cá nhân và sau đó sử dụng iframe

Tổng cộng có 19 trang, tổng cộng 22 khung lưới HTML bố cục di động khác nhau đã được tạo chi tiết

Cung cấp nhiều tập tin khác nhau 🗂

📝 File thiết kế, file nguồn, phiên bản đã xuất bản, ghi chú bài giảng

  1. [CSS Nesting] Nguồn hình ảnh thiết kế

  2. [CSS Nesting] Khung lưới HTML Web di động (TXT)

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

  4. [Tải xuống] 3 HTML+CSS Mobile Mockups (iPhone, Galaxy)

  5. Thiết kế màn hình riêng lẻ (PNG) [CSS Nesting] Thiết kế web di động Màn hình riêng lẻ (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 lồng nhau CSS - Tài liệu bài giảng PPT được sử dụng trong các bài giảng video được cung cấp

Những điều cơ bản về mã hóa sạch 🧽

Tôi tin rằng bằng cách tham gia khóa học <Mobile Web Publishing Portfolio with CSS Nesting> , tôi sẽ có thể cải thiện kỹ năng của mình theo nhiều cách, chẳng hạn như khả năng tạo khung lưới HTML và khả năng sử dụng Flex để xuất bản. Những phần này cũng rất quan trọng, nhưng phần quan trọng nhất là bạn sẽ học được ' Nguyên tắc viết mã sạch để xuất bản như một người có kinh nghiệm '. Mọi thông tin xuất bản trong bài giảng đều được thực hiện theo những nguyên tắc này.

Phần <Nguyên tắc mã hóa sạch để xuất bản như một chuyên gia> bao gồm việc chèn các bình luận cần thiết khi cần thiết, mã hóa các bộ chọn CSS theo đúng thứ tự xuất hiện trong HTML và trong trường hợp các bộ chọn CSS thông thường, để bảo trì sau này. Tổ chức nó trong cái gọi là CSS chung... Nếu bạn học những nguyên tắc và thói quen lập trình này, nó sẽ giúp ích rất nhiều cho công việc của bạn. Đặc biệt, khi nộp đơn xin việc, người quản lý nhân sự hoặc người tương tự sẽ xem xét kết quả đã công bố của ứng viên và mã nguồn. Trong những trường hợp này, bạn có thể đánh giá năng lực xuất bản của ứng viên chỉ bằng cách xem mã nguồn.

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

  1. Bạn có thể có được khả năng tạo mã bằng công nghệ mới, CSS Nesting.

  2. Tìm hiểu các kỹ thuật viết HTML wireframe chi tiết giúp cải thiện đáng kể kỹ năng xuất bản của bạn.

  3. Tìm hiểu những kiến ​​thức cơ bản về Clean Coding và xuất bản như một chuyên gia của CodingWorks.

  4. Tài liệu này có nhiều bài tập và ví dụ, lời giải thích dễ hiểu và giải thích sâu sắc về các khái niệm.

  5. Giải thích mọi thứ sinh viên cần biết về xuất bản web di động.

Thiết kế giao diện người dùng đầy đủ cho Web di động

Xuất bản lồng nhau CSS 📚


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

🚩 Trang giới thiệu có lớp phủ

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

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

  3. Hiển thị/Ẩn lớp phủ Toast

🚩 Trang giới thiệu

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Giới thiệu Slick Slider

  3. Bắt đầu


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


🚩 Trang chào mừng

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

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

🚩 Trang đăng nhập

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Xử lý các thành phần biểu mẫu


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

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

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Xử lý các thành phần biểu mẫu

🚩 Trang lấy lại mật khẩu

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Xử lý các thành phần biểu mẫu


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

🚩 Trang chủ mới của tôi

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Sử dụng biểu tượng phông chữ, sử dụng ::before ::after

🚩 Xem trang thông tin thành viên

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Sử dụng biểu tượng phông chữ, sử dụng ::before ::after


▲ Trang xác nhận thông tin thành viên / Trang sửa đổi thông tin thành viên

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

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

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

🚩 Trang sửa đổi thông tin thành viên

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

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

  4. Nút chuyển đổi tùy chỉnh CSS

  5. Hộp kiểm tùy chỉnh CSS


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

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

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex


🚩 Trang giỏ hàng

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

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

  4. Xử lý các thành phần biểu mẫu


▲ Trang thanh toán đơn hàng / Trang danh sách mong muốn

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

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

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

  4. Sử dụng biểu tượng phông chữ Unicode với các lớp ảo :before và :after


🚩 Trang danh sách mong muốn

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex


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

🚩 Các trang sản phẩm đã xem gần đây

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Sử dụng biểu tượng phông chữ, sử dụng ::before ::after


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

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Sử dụng biểu tượng phông chữ, sử dụng ::before ::after


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

🚩 Trang tìm kiếm

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Sử dụng biểu tượng phông chữ, sử dụng ::before ::after


🚩 Trang danh mục

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

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

  4. Sử dụng biểu tượng phông chữ Unicode với các lớp ảo :before và :after


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

🚩 Trang chủ Trang chính

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Trang chủ Thanh trượt chính Slick

  3. Thanh trượt danh sách sản phẩm

  4. Vị trí bố trí Flex

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

  6. Thiết kế huy hiệu


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

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

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

  4. Di chuyển mượt mà lên đầu tính năng JavaScript

  5. Sử dụng biểu tượng phông chữ, ::trước ::sau khi sử dụng


▲ Trang Chi tiết sản phẩm (Đánh giá) / Trang Chi tiết sản phẩm (Yêu cầu)

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

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

  3. Sử dụng biểu tượng phông chữ, sử dụng ::before ::after

  4. Thiết kế huy hiệu


🚩 Chi tiết sản phẩm (Yêu cầu) Trang

  1. Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting

  2. Vị trí bố trí Flex

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

  4. Sử dụng biểu tượng phông chữ Unicode với các lớp ảo :before và :after

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

Bài giảng này, <Danh mục xuất bản web di động với CSS Nesting>, đượ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.
Vui lòng tìm hiểu cách sử dụng và xuất bản cơ bản thông qua video YouTube của Coding Works bên dưới.

Tải xuống Visual Studio Code

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

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

  3. Cài đặt và sử dụng tiện ích mở rộng Visual Studio Code Essential (Xem video)

  4. Ngăn chặn Full Reload tăng lên khi chỉnh sửa CSS trong Visual Studio Code (Xem video)


Chủ đề Visual Studio Code được sử dụng để tạo bài giảng: One Dark Pro

Hỏi & Đáp 👨‍🏫

Nếu bạn có bất kỳ câu hỏi nào, vui lòng đăng lên diễn đàn Hỏi & Đáp của cộng đồng dành cho bài giảng có liên quan và chúng tôi sẽ cố gắng hết sức để trả lời.


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

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

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


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

[Danh mục xuất bản web di động với CSS Nesting] Khóa học này được tạo bằng công nghệ lồng CSS mới nhất, thay vì phương pháp mã hóa CSS tiêu chuẩn. CSS Nesting chỉ khả dụng trong SCSS (SASS) cho đến một năm trước, nhưng hiện nay nó có thể được sử dụng mà không cần sử dụng SCSS (SASS). Tôi nghĩ bạn sẽ thấy sự phát triển đáng kể khi bạn xuất bản các dự án web di động của mình bằng CSS Nesting.

Là một giảng viên đã giảng dạy các lớp xuất bản trực tuyến và ngoại tuyến trong một thời gian dài, tôi giảng dạy theo cách đáng tin cậy và có hệ thống nhất để cải thiện kỹ năng xuất bản. Và tôi nghĩ điều quan trọng là khóa học được thiết kế để giúp bạn dần đạt được kết quả chất lượng cao từ nhiệm vụ khó khăn và xa lạ là xuất bản web trên thiết bị di động.


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

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

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

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

Tạo nhiều cấu trúc khung lưới HTML khác nhau trong quá trình sản xuất chi tiết nhiều khung lưới HTML bố cục di động khác nhau. Chúng tôi đào tạo bạn đến giai đoạn áp dụng thực tế vào xuất bản web di động , giúp bạn tự tin hơn khi tạo nhiều bố cục giao diện người dùng web khác nhau trong tương lai.


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

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


H. Nó khác gì so với bài giảng hiện tại [Danh mục xuất bản web di động với Figma]?

Cả bài giảng về web di động hiện tại và bài giảng về web di động này đều giống nhau ở chỗ chúng tạo ra web di động bằng CSS. Sự khác biệt lớn nhất là các bài giảng hiện tại nói về phương pháp CSS liệt kê các phần tử cha mọi lúc, trong khi bài giảng này nói về phương pháp lồng nhau CSS chỉ sử dụng các phần tử cha một lần. Mức độ khó cao hơn 1,5 lần so với các bài giảng hiện có, do đó bạn sẽ có thể tạo nhiều trang hơn và bố cục đa dạng hơn, qua đó cải thiện hơn nữa kỹ năng xuất bản web trên thiết bị di động của mình.

Sự khác biệt giữa khóa học phát triển web di động này

  • Không được thiết kế Figma trong lớp.

  • Tạo khung HTML và xuất bản ngay lập tức trong khi xem thiết kế đã hoàn thiện

  • Phong cách mã hóa lồng nhau của CSS

  • Tăng gấp đôi lượng sản xuất và học tập (9 trang cho bài giảng cơ bản, 19 trang cho bài giảng này)

  • Tạo 22 bố cục khác nhau, tất cả đều khác nhau

  • Nhiều phương pháp tạo thanh trượt khác nhau (Slick Slider)



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

Tổng thời lượng bài giảng video là khoảng 16 giờ, cung cấp đủ thời lượng bài giảng cho việc học chuyên sâu.

  • Cách tạo cấu trúc Wireframe HTML cho video và web di động đã đọc trước - 2 giờ

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

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

  • [Tham khảo] Sử dụng web di động đã hoàn thiện làm danh mục đầu tư - 1 giờ


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

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

Mục 1. Giới thiệu về khóa học

  • [Giới thiệu khóa học] Portfolio xuất bản web di động với CSS Nesting

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

  • [Phải đọc] Pure CSS Selector Nesting 01 - Cách sử dụng cơ bản của CSS Nesting

  • [Phải đọc] Pure CSS Selector Nesting 02 - Ví dụ sử dụng CSS Nesting (Biểu mẫu đăng nhập)


Phần 2. [Phải đọc] Cách tạo cấu trúc Wireframe HTML cho web di động

  • [Phải Đọc] Tại sao Kỹ năng Xuất bản Không Cải thiện Mặc dù Đã Nỗ lực

  • [Phải đọc] Cách tạo cấu trúc Wireframe HTML và kiến ​​thức chuyên môn

  • [Thực hành] Thực hành tạo wireframe HTML (form đăng nhập checkbox tùy chỉnh)

  • [Phải đọc] Cấu trúc Wireframe HTML (Mẹo đặt tên hộp viền và lớp)

  • [Tham khảo] Tìm hiểu khái niệm web di động và ứng dụng di động


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

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

  • Cấu trúc Wireframe HTML (Myfresh 01 - Myfresh Main)

  • Cấu trúc Wireframe HTML (Myfresh 02 - Xem thông tin thành viên Xác nhận sửa đổi)

  • 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 - Danh sách mong muốn, Sản phẩm đã xem gần đây, Danh sách đặt hàng)

  • Cấu trúc Wireframe HTML (Tìm kiếm, Thể loại)

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

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

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

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


Mục 4. [Thực hành sản xuất] Xuất bản chi tiết trên web di động với CSS Nesting

  • [Phải đọc] Thiết lập chiều rộng và chiều cao trong xuất bản web di động

  • [Phải đọc] Tạo cấu trúc thư mục, Đặt lại, Biến

  • [Sản xuất xuất bản thực tế] Intro 01 (Màn hình giới thiệu, Thanh trượt, Thanh trượt CSS tùy chỉnh)

  • [Sản xuất xuất bản thực tế] Giới thiệu 02 (Lớp phủ Toast, Địa chỉ tuyệt đối so với Địa chỉ tương đối)

  • [Sản xuất xuất bản thực tế] Tham gia 01 (Chào mừng

  • [Sản xuất xuất bản thực tế] Tham gia 02 (Đăng nhập)

  • [Sản xuất xuất bản thực tế] Tham gia 03 (đăng ký thành viên, lấy lại mật khẩu)

  • [Sản xuất xuất bản thực tế] My Fresh Main 01 (Tiêu đề trang, Bố cục nội dung)

  • [Sản xuất xuất bản thực tế] My Fresh Main 02 (Nội dung chi tiết, gnb)

  • [Sản xuất xuất bản thực tế] My Fresh Main 03 (bao gồm gnb)

  • [Sản xuất xuất bản thực tế] Tổ chức chiều cao container (tự động, 100vh)

  • [Sản xuất xuất bản thực tế] Thông tin thành viên 01 (Xem thông tin thành viên)

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

  • [Sản xuất xuất bản thực tế] Thông tin thành viên 03 (Sửa đổi thông tin thành viên)

  • [Sản xuất xuất bản thực tế] Quản lý địa chỉ giao hàng

  • [Sản xuất xuất bản thực tế] Sửa đổi mã trung gian (CSS chung)

  • [Sản xuất xuất bản thực tế] Giỏ hàng

  • [Sản xuất xuất bản thực tế] Thanh toán đơn hàng (:không :có Lớp học ảo)

  • [Sản xuất xuất bản thực tế] Danh sách mong muốn

  • [Sản xuất xuất bản thực tế] Sản phẩm đã xem gần đây

  • [Sản xuất xuất bản thực tế] Danh sách đơn hàng

  • [Sản xuất xuất bản thực tế] Tìm kiếm, Thể loại

  • [Thực hành sản xuất xuất bản] Trang chủ 01 - Thanh trượt chính, Thể loại, Biểu ngữ, Chân trang

  • [Sản xuất xuất bản thực tế] Trang chủ 02 - SNS, Ppakkomi Product Slider

  • [Sản xuất xuất bản thực tế] Mô tả sản phẩm 01 - Kiểm tra nút tab, chức năng menu tab và nút danh sách mong muốn

  • [Sản xuất xuất bản thực tế] Mô tả sản phẩm 02 - Chi tiết sản phẩm, Thông tin sản phẩm

  • [Sản xuất xuất bản thực tế] Mô tả sản phẩm 03 - Đánh giá sản phẩm, Yêu cầu sản phẩm

  • [Sản xuất xuất bản thực tế] Điều chỉnh và sửa đổi chiều rộng và chiều cao trên mỗi trang (kiểm tra trên thiết bị di động)

  • [Xuất bản sửa đổi và bổ sung] Di chuyển trơn tru lên đầu trang mô tả sản phẩm

  • [Xuất bản sửa đổi và bổ sung] - Liên kết tệp & Kiểm tra điều hướng GNB

  • [Sửa đổi và Bổ sung Xuất bản] Trang chủ Thanh trượt chính Số lượng, Thanh trượt sản phẩm Kích thước máy tính bảng


Mục 5. [Tham khảo] Sử dụng web di động đã hoàn thành làm danh mục đầu tư

  • Tạo một bản mockup di động đẹp

  • Sử dụng iframe cho mô hình di động (nhiều chế độ xem, chế độ xem đơn)

  • Phát hiện trình duyệt di động JavaScript (Chức năng mũi tên, User Agent)

  • Áp dụng web di động được tạo sau khi hoàn thành vào danh mục đầu tư (Xem danh mục đầu tư của sinh viên Coding Works)


Mục 6. [Tải xuống] Tài liệu tham khảo cho sinh viên

  • [Download] Tải tài liệu tham khảo cho học sinh (Mobile Web with CSS Nesting)

  • [Sách giáo khoa PDF] Mobile Web - HTML Wireframe (PDF)

  • [Sách giáo khoa PDF] Mobile Web - Bài giảng

🙋🏻‍♂️ 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.

 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

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

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

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

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

  • 모바일 웹 UI thiết kế và xuất bản portfolio

  • Bất kỳ ai cần kinh nghiệm thực tế trong công việc xuất bản web di động trong lĩnh vực này

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

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

Xin chào
Đây là

12,542

Học viên

738

Đánh giá

2,105

Trả lời

4.9

Xếp hạng

23

Các khóa học

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

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ả

2 đánh giá

5.0

2 đánh giá

  • 김경민님의 프로필 이미지
    김경민

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    • 코딩웍스(Coding Works)
      Giảng viên

      수강평 감사합니다.

  • bellmore님의 프로필 이미지
    bellmore

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

1.671.538 ₫

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!