
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)
코딩웍스(Coding Works)
HTML+CSS+JS 실전 포트폴리오(시즌3)는 퍼블리싱 실전 예제를 제작하는 과정입니다. 다양한 실전 예제 제작을 통해서 퍼블리싱 실력을 중상급으로 성장할 수 있습니다. 34시간 이상의 충분한 강의 시간과 다양한 종류의 실전 제작 과정이므로 제작 노하우와 응용 방법을 충분히 익힐 수 있습니다.
초급
HTML/CSS, JavaScript, jQuery
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.
29 học viên
순수 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
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.
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).
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.
Khả năng xuất bản lồng nhau của CSS thuần túy
Mã hóa thực tế CSS trung cấp đến nâng cao tập trung vào bố cục Flex & Grid
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ế
Sau khi tạo bản mô phỏng di động HTML+CSS, hãy sử dụng iframe
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)
Cách sử dụng Slick Slider và thay đổi kiến thức về CSS
Clean Coding: Xuất bản như một chuyên gia giàu kinh nghiệm
▲ 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
📝 File thiết kế, file nguồn, phiên bản đã xuất bản, ghi chú bài giảng
[CSS Nesting] Nguồn hình ảnh thiết kế
[CSS Nesting] Khung lưới HTML Web di động (TXT)
[CSS Nesting] Thiết kế web di động (PSD)
[Tải xuống] 3 HTML+CSS Mobile Mockups (iPhone, Galaxy)
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)
Văn bản nguồn và trang web tham khảo [CSS Nesting]
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
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?
Bạn có thể có được khả năng tạo mã bằng công nghệ mới, CSS Nesting.
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.
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.
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.
Giải thích mọi thứ sinh viên cần biết về xuất bản web di động.
▲ Trang giới thiệu với Overlay / Trang giới thiệu
🚩 Trang giới thiệu có lớp phủ
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Bố cục toàn màn hình
Hiển thị/Ẩn lớp phủ Toast
🚩 Trang giới thiệu
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Giới thiệu Slick Slider
Bắt đầu
▲ Trang chào mừng / Trang đăng nhập
🚩 Trang chào mừng
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Thiết kế nút đăng nhập
🚩 Trang đăng nhập
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Xử lý các thành phần biểu mẫu
🚩 Trang lấy lại mật khẩu
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ, sử dụng ::before ::after
🚩 Xem trang thông tin thành viên
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ, sử dụng bộ chọn liền kề
Nút chuyển đổi tùy chỉnh CSS
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ỉ
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
🚩 Trang giỏ hàng
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ, sử dụng ::before ::after
🚩 Trang danh sách đơn hàng
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ, sử dụng ::before ::after
🚩 Trang danh mục
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ
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
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Trang chủ Thanh trượt chính Slick
Thanh trượt danh sách sản phẩm
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ, sử dụng ::before ::after
Thiết kế huy hiệu
🚩 Trang mô tả sản phẩm
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng tính năng nội dung menu tab
Di chuyển mượt mà lên đầu tính năng JavaScript
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á)
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ, sử dụng ::before ::after
Thiết kế huy hiệu
🚩 Chi tiết sản phẩm (Yêu cầu) Trang
Tạo cấu trúc khung lưới HTML bằng cách sử dụng CSS Nesting
Vị trí bố trí Flex
Sử dụng biểu tượng phông chữ
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.
Cài đặt và sử dụng tiện ích mở rộng Visual Studio Code Essential (Xem video)
Ngăn chặn Full Reload tăng lên khi chỉnh sửa CSS trong Visual Studio Code (Xem video)
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.
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
[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.
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.
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.
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)
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ờ
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
Nếu bạn có bất kỳ thắc mắc nào trong khi học, hãy hỏi. Khi đặt câu hỏi, bạn phải tải lên nội dung không hoạt động, mã và ảnh chụp màn hình kết quả của trình duyệt. Đối với mã, bạn phải tải lên tất cả mã HTML, CSS và JS để chúng tôi có thể đưa ra câu trả lời chính xác.
Nếu bạn chỉ mô tả vấn đề của mình bằng văn bản mà không đưa bất kỳ mã nào vào câu hỏi, sẽ rất khó để đưa ra câu trả lời chính xác, trừ khi vấn đề thực sự đơn giản. Sau đó, tôi không còn lựa chọn nào khác ngoài việc trả lời lại rằng 'Vui lòng tải lên mã HTML, CSS, JS và trình duyệt~', điều này gây ra nhiều phiền phức và mất nhiều thời gian hơn để tìm ra giải pháp.
Vui lòng 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
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.
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
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
Tất cả
56 bài giảng ∙ (16giờ 19phút)
Tài liệu khóa học:
Tất cả
2 đánh giá
5.0
2 đánh giá
1.671.538 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!