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

Bạn có thể nâng cao khả năng thiết kế web di động, một trong những kỹ năng cạnh tranh nhất khi tìm việc và làm việc thực tế trong lĩnh vực Publisher. Bạn sẽ được củng cố hầu hết các phương pháp và bí quyết để tạo ra một trang web di động với tư cách là một Publisher. Đặc biệt, để đáp ứng yêu cầu về khả năng thiết kế đối với Publisher và lập trình viên hiện nay, khóa học cũng giải thích chi tiết quy trình thiết kế UI cho web di động bằng Figma, giúp bạn bao quát được phần lớn kỹ năng này. Một trong những điểm mạnh nhất của lớp học xuất bản web di động này là hướng dẫn chi tiết cách lập HTML Wireframe cho từng trang một. Thông qua bài giảng, khả năng tạo HTML Wireframe của bạn sẽ được cải thiện đáng kể. Trong phần xuất bản web di động, thông qua việc học cách điều chỉnh bố cục hoàn hảo cho di động và máy tính bảng bằng cách sử dụng biến CSS (Var), bạn sẽ đạt được năng lực làm việc tương đương với thực tế. Bạn cũng sẽ được trang bị đầy đủ kỹ năng CSS thực chiến trình độ trung cao cấp, tập trung vào bố cục Flex.

(4.9) 25 đánh giá

439 học viên

Độ khó Cơ bản

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

HTML/CSS
HTML/CSS
Portfolio
Portfolio
Mobile App Design
Mobile App Design
Figma
Figma
jQuery
jQuery
HTML/CSS
HTML/CSS
Portfolio
Portfolio
Mobile App Design
Mobile App Design
Figma
Figma
jQuery
jQuery

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

4.9

5.0

나도할수있다

100% đã tham gia

Trước đây mình từng học về publishing nhưng đã tạm gác lại một thời gian, nhờ có bạn mà mình đã có thể tiếp cận lại với nó :) Bạn hướng dẫn rất tỉ mỉ, và các bài giảng cũng được cập nhật liên tục nên mình có thể hoàn thành khóa học mà không bỏ lỡ dù là chi tiết nhỏ nhất. Cảm ơn bạn đã tạo ra một khóa học tuyệt vời như vậy! :)

5.0

Richard Lee

100% đã tham gia

Không phải dạy những gì mình biết mà từ góc độ của một học giả, họ

5.0

jaekon seo

30% đã tham gia

Những lời khuyên rất hữu ích trong thực tế mà bạn đã chia sẻ đang giúp ích rất nhiều cho tôi.

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

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

  • Cấu trúc trang web di động/Cấu trúc thư mục/Địa chỉ tuyệt đối vs Địa chỉ tương đối

  • Cách viết chi tiết Wireframe HTML cho web di động

  • Lý thuyết và bí quyết thiết yếu trong xuất bản web di động, cùng với thực hành sản xuất thực tế

  • Thiết kế giao diện người dùng (UI) cho web di động bằng Figma

  • Lưu ý và những điều cần chú ý khi thiết kế UI và publishing web di động  

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

  • Bố cục phù hợp cho di động và máy tính bảng sử dụng biến CSS (Var)

  • Sử dụng Inline JavaScript với tính ứng dụng cao

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

  • Học tập các tương tác jQuery đủ dùng trong thực tế và áp dụng vào dự án thực tế

  • Ứng dụng thực tế các lớp giả (pseudo-class) đa dạng như ::before và ::after

  • Quy tắc chuẩn về Clean Coding để thiết kế web chuyên nghiệp như người có kinh nghiệm


"Lý thuyết thiết yếu và bí quyết thiết kế UI cũng như phát triển Mobile Web
Thực hành sản xuất một cách hệ thống"

Step 1. 피그마(Figma)로 모바일 웹 UI 디자인 제작
Step 2. 모바일 웹 HTML 와이어프레임 모든 페이지 상세한 제작
Step 3. CSS 변수(Var) 활용한 다양한 레이아웃의 다수 페이지 퍼블리싱 제작
Step 4. 완성된 퍼블리싱 결과물을 더 완벽하게 하는 퍼블리싱 마무리 작업

Khóa học này chứa đựng những bí quyết sản xuất Mobile Web Publishing mà Coding Works đã giảng dạy cho vô số học viên tại các trung tâm offline từ trước đến nay. Tôi chắc chắn rằng sau khi hoàn thành khóa học, kỹ năng publishing của bạn sẽ được nâng cao hơn một bậc!

🌿🌿🌿

🚩 Cập nhật bài giảng (2024.09.25)

  • Scroll padding, thay đổi thiết kế sau khi cuộn (jQuery), sử dụng hình ảnh tạm thời
  • Phát hiện trình duyệt di động bằng JavaScript (Arrow Function, User Agent)

🚩 Cập nhật bài giảng (2023.07.06)

  • Hiển thị giỏ hàng trống & Chọn/Bỏ chọn tất cả hộp kiểm trong giỏ hàng như một công việc bổ sung

🌿🌿🌿

Chủ đề bài giảng 📖

Thông qua khóa học <Mobile Web Publishing Portfolio với Figma> 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 trong việc tìm việc làm cũng như trong nghiệp vụ thực tế của một người 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. Web di động là sản phẩm quan trọng nhất trong danh mục hồ sơ năng lực (portfolio) của một người cắt web (publisher)
  2. Trang bị khả năng thiết kế UI cho Publisher và Developer thông qua việc thực hành thiết kế Figma thực tế!
  3. Không chỉ học lý thuyết mà còn ứng dụng biến CSS (Var) vào thực tế
  4. Cách sử dụng Slick Slider và bí quyết thay đổi CSS
  5. Tạo và sử dụng bản mô phỏng (Mockup) di động tuyệt đẹp bằng HTML+CSS
  6. Tiêu chuẩn của Clean Coding để lập trình web chuyên nghiệp như người có kinh nghiệm
  7. Nâng cao năng lực thực hành CSS trung và cao cấp, tập trung vào việc tạo bố cục Flex.
  8. Học tập hoàn hảo các tương tác jQuery thiết yếu, cực kỳ cần thiết trong thực tế!
  9. Cung cấp tất cả tài liệu chế tác (File thiết kế Figma, file mã nguồn publishing, PDF tài liệu bài giảng, bản hoàn thiện publishing)

 


▲ Thiết kế giao diện người dùng (UI) cho web di động bằng Figma

▲ Xuất bản web di động nhất quán bằng cách sử dụng biến CSS (Var)

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


▲ Sản xuất Mockup di động bằng HTML+CSS (Cung cấp 3 bản hoàn thiện Mockup di động)


▲ Quy tắc chuẩn về Clean Coding để lập trình như một người có kinh nghiệm

▲ Cách viết chi tiết Wireframe HTML cho web di động


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

📝 File thiết kế Figma, file nguồn, bản hoàn thiện publishing

  1. Cung cấp tất cả các nguồn tài nguyên để hoàn thành khóa học Mobile Web Publishing Portfolio with Figma.
  2. Nguồn thiết kế, nguồn publishing, bản thiết kế hoàn thiện, bản publishing hoàn thiện
  3. [Tải xuống] HTML+CSS Mobile Mockup.zip
  4. [Tải xuống] Nguồn thiết kế UI di động (Today's Meal Kit) - Nguồn thiết kế & Bản hoàn thiện.zip
  5. [Tải xuống] Mobile Web Publishing (Bắt đầu) cùng với tài liệu tham khảo & nguồn công việc.zip
  6. [Tải xuống] Mobile Web Publishing (Bản hoàn thiện) Publishing Only.zip


📝 Cung cấp tài liệu bài giảng PPT được sử dụng trong video bài giảng

  1. Để hỗ trợ học viên trong quá trình học tập, chúng tôi cung cấp file PDF của bài giảng PPT đã được giải thích trong video bài giảng.
  2. [Ghi chú bài giảng] Portfolio Mobile Web Publishing với Figma.pdf
  3. [Công đoạn hoàn thiện] Mobile Web Publishing (Sửa, Thêm, Xóa).pdf

Tiêu chuẩn của Coding sạch🧽

<Hồ sơ năng lực xuất bản Web di động với Figma> Tôi tin rằng thông qua việc theo học khóa học này, kỹ năng của bạn sẽ phát triển về nhiều mặt như khả năng thiết kế UI trên Figma, khả năng tạo HTML Wireframe, và khả năng sử dụng Flex để xuất bản web. Những phần này đều rất quan trọng, nhưng phần quan trọng nhất trong số đó chính là bạn sẽ được học về 'Tiêu chuẩn của Clean Coding (Lập trình sạch) để xuất bản web như một người có kinh nghiệm'. Tất cả các nội dung xuất bản trong bài giảng đều được soạn thảo dựa trên nguyên tắc này.

<Quy tắc chuẩn về Clean Coding để publishing như người có kinh nghiệm> là việc đặt 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 phần Common CSS để thuận tiện cho việc bảo trì sau này.. Nếu bạn học được những nguyên tắc và thói quen lập trình này, chúng sẽ giúp ích rất nhiều trong công việc thực tế. Đặc biệt, khi xin việc, người phụ trách nhân sự hoặc người có chuyên môn tương đương sẽ xem xét mã nguồn (Source Code) sau khi xem kết quả publishing của ứng viên. Trong trường hợp này, chỉ cần nhìn qua mã nguồn là họ có thể đánh giá được kỹ năng cơ bản về publishing 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 thiết kế UI cho web di động thông qua việc thực hành chế tác thực tế bằng Figma.
  2. Bạn sẽ được học cách lập kế hoạch Wireframe HTML chi tiết để cải thiện đáng kể kỹ năng xuất bản (publishing) của mình.
  3. Bạn sẽ được học các tiêu chuẩn về Clean Coding để có thể lập trình web (publishing) 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.


Toàn bộ thiết kế UI/
Publishing Web di động
 📚


▲ 프리로딩 페이지 / 로그인 페이지 / 회원가입 페이지

 

🚩 Trang Preloading

  1. Thiết kế UI bằng Figma và xây dựng cấu trúc HTML Wireframe
  2. Trang đầu tiên của web di động cho người dùng thấy được bản sắc của trang web di động đó
  3. Tự động chuyển đến trang được chỉ định bằng setTimeout trong JavaScript
  4. Sử dụng JavaScript inline để liên kết tệp HTML cho toàn bộ thẻ div

🚩 Trang đăng nhập

  1. Thiết kế UI bằng Figma và tạo cấu trúc Wireframe HTML
  2. Thiết kế các thành phần form đa dạng trên Figma và thực hiện công việc publishing giống hệt với kết quả thiết kế
  3. Tìm hiểu chi tiết về các đặc điểm và thuộc tính của các thành phần biểu mẫu (Form) trong HTML
  4. Học về tương tác CSS để thiết kế Custom Checkbox hoặc Custom Radio từ các thành phần biểu mẫu đơn điệu
  5. Tạo tệp riêng cho GNB ở phía dưới và thực hiện tác vụ Include (tác vụ component) bằng cách Load với jQuery
  6. Cách sử dụng hình ảnh SVG
  7. Cách sử dụng và ứng dụng Font biểu tượng (Bootstrap Icons)

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

  1. Thiết kế UI bằng Figma và xây dựng cấu trúc wireframe HTML
  2. Tương tự như trang đăng nhập, thiết kế các thành phần biểu mẫu đa dạng trên Figma
  3. Học chi tiết về các đặc điểm và thuộc tính của các thành phần biểu mẫu (Form) trong HTML
  4. Áp dụng các thuộc tính CSS để thiết kế đẹp mắt cho các thành phần form đơn điệu
  5. Sử dụng pseudo-class cho các thành phần form (:focus ::placeholder)
  6. Tạo Header ở trên cùng thành một tệp riêng biệt và thực hiện tác vụ Load bằng jQuery


▲ Trang cá nhân / Slider trang chủ / Tab menu trang chủ & Footer

🚩 Trang cá nhân

  1. Thiết kế UI bằng Figma và xây dựng cấu trúc Wireframe HTML
  2. Cách tái sử dụng các UI thẻ (card UI) đã tạo trước đó dưới nhiều hình thức khác nhau
  3. Thiết kế Badge và thiết kế & xuất bản giao diện Card mới
  4. Cách sử dụng và ứng dụng bố cục Flex (Flex Layout)
  5. Sử dụng Unicode của Font Icon với các lớp giả (pseudo-class) :before và :after

🚩 Trang chủ

  1. Thiết kế UI bằng Figma và tạo cấu trúc Wireframe HTML
  2. Cách quản lý cấu trúc HTML phức tạp và tạo cấu trúc phân cấp được sắp xếp hợp lý (Clean Coding)
  3. Cách sử dụng Slick Slider và cách trang trí Slick Slider đẹp mắt bằng Custom CSS
  4. Không chỉ làm slider chính mà còn tạo ra các slider phức tạp dưới dạng giao diện thẻ (Card UI)
  5. Tạo Slider đáp ứng (Responsive Slider) hoạt động trên cả điện thoại nhỏ, điện thoại lớn và máy tính bảng
  6. Tạo menu tab CSS tương tác để mở rộng nội dung trên web di động
  7. Cách sử dụng thực tế của thuộc tính CSS Object-fit
  8. Các phương thức tương tác jQuery thiết yếu (kiểm soát class, chọn phần tử, trình xử lý sự kiện, v.v.)
  9. Cách sử dụng JavaScript inline thiết yếu
  10. Thiết kế đánh số danh sách (Numbering) bằng cách sử dụng counter-reset với giả lớp (pseudo-class) CSS


▲ Trang chi tiết (Slider, Accordion liên quan đến sản phẩm, tương tác nút mua hàng)

🚩 Trang chi tiết sản phẩm

  1. Thiết kế UI bằng Figma và xây dựng cấu trúc HTML Wireframe
  2. Cách quản lý cấu trúc HTML phức tạp và phương pháp tạo cấu trúc phân cấp ngăn nắp (Clean Coding)
  3. Cách sử dụng Slick Slider và cách trang trí Slick Slider đẹp mắt bằng Custom CSS
  4. Publishing thanh điều hướng accordion liên quan đến sản phẩm ở phía dưới bằng jQuery
  5. Modal Jquery phân nhánh thành Giỏ hàng và Mua ngay khi nhấn nút Mua hàng
  6. Thiết kế tương tác nút yêu thích (wish) bằng icon font (toggleClass)
  7. Tạo Header mới thành một tệp riêng biệt và thực hiện tải (Load) bằng jQuery


▲ Trang danh mục / Trang giỏ hàng / Trang tìm kiếm

🚩 Trang danh mục

  1. Thiết kế UI trên Figma và xây dựng cấu trúc HTML Wireframe
  2. Tạo accordion danh mục bằng jQuery
  3. Thay đổi style CSS theo phần tử đã chọn
  4. Sử dụng Unicode của Font Icon với các lớp giả :before :after

🚩 Trang giỏ hàng

  1. Thiết kế UI bằng Figma và xây dựng cấu trúc HTML wireframe
  2. Thiết kế UI và publishing thẻ giỏ hàng
  3. Tạo các thành phần form hiện có bằng CSS tùy chỉnh (chọn số lượng select)
  4. Xóa từng mục và xóa tất cả vật phẩm trong giỏ hàng sử dụng jQuery
  5. Các thuộc tính CSS3 đa dạng (accent-color, zoom)

🚩 Trang tìm kiếm

  1. Thiết kế UI bằng Figma và xây dựng cấu trúc Wireframe HTML
  2. Chèn biểu tượng font vào phần tử biểu mẫu tìm kiếm và sử dụng :focus ::placeholder
  3. Sử dụng counter-reset bằng cách dùng giả lớp (pseudo-class) CSS
  4. Xóa kết quả tìm kiếm và xóa tất cả bằng cách sử dụng jQuery
  5. Thiết kế đánh số danh sách (Numbering) bằng cách sử dụng counter-reset với giả lớp (pseudo-class) CSS


▲ Bí quyết thay đổi CSS cho Slick Slider và kiểm tra GNB Navigation

🚩 Bí quyết thay đổi CSS cho Slick Slider

  1. Học cách xác định chính xác vị trí và bộ chọn (selector) cần chỉnh sửa thông qua công cụ dành cho nhà phát triển (Developer Tools).
  2. Học hỏi bí quyết khai báo bộ chọn CSS để ngăn chặn xung đột khi sử dụng nhiều Slick Slider cùng lúc
  3. Custom CSS Slider (điều hướng dấu chấm, điều hướng trước sau, v.v.)

🚩 Kiểm tra điều hướng GNB

  1. Tệp được nhấp sẽ mở ra và kiểm tra thiết kế khác về vị trí của tệp đó thông qua điều hướng GNB (phương thức giống như ứng dụng Coupang)
  2. Tự động hóa nút quay lại (back button) ở Header bằng JavaScript inline


▲ Hoàn tất công việc publishing

🚩 Hoàn tất công việc publishing(Công việc chỉnh sửa, bổ sung sau khi hoàn tất tất cả publishing)

  1. Vấn đề overlay chi tiết sản phẩm (goods-detail.html)
  2. Điều chỉnh kích thước toàn chiều rộng (375px → 100%)
  3. Lỗi biểu tượng thông báo GNB(gnb.html) không cố định
  4. Vấn đề chiều cao của slider phía trước & tạo khoảng cách margin bên dưới nội dung
  5. Sử dụng CDN cho Slick Slider
  6. Liên kết tệp HTML bằng Javascript inline
  7. Liên kết đi tới và quay lại bằng Javascript inline
  8. Liên kết tệp GNB & Hiển thị tất cả các trang công việc không thiếu sót
  9. Kiểm tra điều hướng (navigation) đang hoạt động trong tệp được kết nối với GNB
  10. Bố cục phù hợp với kích thước di động lớn và máy tính bảng sử dụng biến (Var)
  11. Tạo mockup di động đẹp mắt bằng HTML+CSS và sử dụng bằng iframe

💡 Cách sử dụng tệp tải xuống và nội dung thư mục

① Hãy tải xuống khi bắt đầu công việc thiết kế.
② Hãy tải xuống khi bắt đầu công việc xuất bản (publishing).
③ Hãy tải xuống nếu muốn so sánh với mã nguồn của học viên trong quá trình học xuất bản.
④ Hãy tải xuống nếu muốn tạo mô hình di động (mobile mockup).

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

Bài giảng này <Mobile Web Publishing Portfolio with Figma> là Visual Studio Code đượ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 học <Phần 3. Chi tiết Mobile Web Publishing (HTML+CSS+JS)>.

Tải xuống Visual Studio Code


Hỏi & Đáp 👨‍🏫

Ngoài các câu hỏi dự kiến dưới đây, nếu bạn có bất kỳ thắc mắc nào khác, vui lòng đặt câu hỏi trên bảng tin cộng đồng của khóa học này, tôi sẽ cố gắng hết sức để giải đáp.

Q. Có cần kiến thức tiên quyết hay chuẩn bị gì không?

Không có 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 để xuất bản web di động hiệu quả

Q. Tôi không có kinh nghiệm sử dụng các chương trình đồ họa, liệu tôi có thể thiết kế Figma được không?

Như đã đề cập trong video giới thiệu, Figma mang lại hiệu quả cực kỳ tốt so với nỗ lực bỏ ra. Nếu bạn có thể sử dụng PowerPoint ở mức độ nhất định, bạn hoàn toàn có thể theo kịp lớp học thiết kế Figma. Tuy nhiên, để tiếp thu bài học tốt hơn, vui lòng <[Bắt buộc đọc] Khóa học cơ bản về Figma thiết kế UI Web di động> hãy xem video này và học trước thông qua kênh YouTube đã được giới thiệu.

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

Đây là bài giảng thiết kế ở mức độ mà một người không có kiến thức chuyên môn vẫn có thể sử dụng tốt Figma chứ không phải dành cho chuyên gia thiết kế, vì vậy lớp học thiết kế Figma trong <phần 1. thiết kế mobile web ui với figma> phù hợp cho người mới bắt đầu hơn là dành cho chuyên gia. </phần>
Tuy nhiên, <phần 2. cấu trúc html wireframe cho mobile web publishing></phần><phần 3. publishing chi tiết mobile web (html+css+js)></phần> là những bài giảng được giảng dạy bằng phương pháp bài bản và chắc chắn nhất để nâng cao kỹ năng publishing, đúc kết từ kinh nghiệm của một giảng viên đã dạy publishing trong thời gian dài. Và tôi tin rằng cốt lõi của khóa học này là được thiết kế để dẫn dắt người học từng bước tạo ra những sản phẩm chất lượng cao từ công việc publishing web di động vốn còn xa lạ và khó khăn.

Q. Đây có phải là bài giảng mà người không chuyên về thiết kế cũng có thể theo học không?

Hoàn toàn có thể. Như đã đề cập trong video <[Bắt buộc đọc] Khóa học cơ bản về Figma thiết kế UI Mobile Web> ở Phần 1, nếu bạn sử dụng tốt PowerPoint thì sẽ không gặp bất kỳ trở ngại nào trong việc học và sử dụng Figma. Bản thân tôi cũng đã học cách sử dụng Figma trong một thời gian ngắn để chuẩn bị cho bài giảng này nhưng vẫn có thể tạo ra những kết quả thiết kế tốt.

Q. Là một nhà thiết kế nên tôi đã giỏi Figma rồi, vậy tôi có cần phải học phần thiết kế Figma ở Chương 1 không?

Như tôi đã đề cập trong video giới thiệu, tôi không phải là người đã sử dụng Figma lâu năm hay quá giỏi về nó. Vì vậy, nếu bạn là người tự tin với các thao tác trên Figma, bạn có thể bỏ qua <Phần 1. Thiết kế UI cho Mobile Web với Figma> và bắt đầu học ngay từ <Phần 2. Cấu trúc HTML Wireframe để xuất bản Mobile Web>.

Q. Tại sao phải học quy trình sản xuất xuất bản web di động 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. Do đó, 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. Không chỉ đóng vai trò là portfolio 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. Từ góc độ của các công ty này, nếu bạn có một portfolio 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 tuyệt vời cho việc xin việc hoặc chuyển công tá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. Do đó, 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à portfolio 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 portfolio web di động được hoàn thiện tốt, đó sẽ là một tài liệu tham khảo tuyệt vời cho việc tuyển dụng hoặc nhảy 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ắn là 'khả năng tạo cấu trúc HTML Wireframe 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 rè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 có 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 cùng nhau thực hiện.

<Phần 2. Cấu trúc wireframe HTML cho xuất bản web di động> Trong phần này, chúng ta sẽ tạo nhiều cấu trúc HTML wireframe khác nhau và thông qua bước áp dụng xuất bản web di động thực tế trong <Phần 3. Xuất bản chi tiết web di động (HTML+CSS+JS)>, bạn sẽ trở nên tự tin trong việc tạo ra hầu hết các bố cục UI web sau này.

Q. Nội dung khóa học sẽ bao gồm đến trình độ nào?

Do đặc thù của web di động nên số lượng tệp 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ù tiêu chuẩn về "mức độ nào" tùy thuộc vào mỗi người, nhưng nội dung bài học được thiết kế ở mức đủ để làm portfolio cá nhân cho một Publisher. Không chỉ vậy, nội dung này còn hoàn toàn đủ để xem là tương đương với trình độ làm việc thực tế về web di động.

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

Tổng thời gian video bài giảng là khoảng 24 giờ, được chuẩn bị đầy đủ để phục vụ cho việc học tập chuyên sâu. Nhìn chung, các công đoạn chuẩn bị và thực hiện xuất bản (publishing) chiếm gần 80% tổng thời lượng, tương đương khoảng 18 giờ.
Thiết kế UI Figma - 5 giờ 40 phút / Cấu trúc HTML Wireframe - 4 giờ 30 phút / Publishing - 14 giờ 15 phút

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 không lướt qua mà không giải thích đầy đủ, trái lại tôi sẽ giải thích rất chi tiết. Tôi tin rằng các bạn sẽ theo kịp. Tuy nhiên, tôi cực kỳ khuyến khích các bạn nên trang bị môi trường màn hình kép thay vì chỉ học với một màn hình đơn. Lý do tại sao kỹ năng publishing không tiến bộ so với nỗ lực bỏ ra trong phần [Nhất định phải đọc] của Phần 2 đã được trình bày chi tiết trong video, vui lòng tham khảo nhé.


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

<Mobile Web Publishing Portfolio with Figma> Khóa học được tạo bởi Coding Works, đơn vị cho đến nay đã giảng dạy lý thuyết, ứng dụng và xây dựng trang web portfolio cá nhân cho hơn 300 học viên trong các khóa học xuất bản (publishing) do nhà nước hỗ trợ. Đặ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 quy trình chuẩn bị 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 các bài giảng về 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 trên nền tảng này.

 

❤ Tin vui trúng tuyển vị trí Publisher từ học viên Coding Works


▲ Đây là một học viên đã học khóa học xuất bản (publishing) hỗ trợ từ ngân sách nhà nước do tôi giảng dạy trong khoảng 4 tháng rưỡi, và em ấy đã nhắn tin KakaoTalk báo tin trúng tuyển.


▲ Tôi đã nhận được tin nhắn KakaoTalk về kết quả phỏng vấn và việc làm của học viên khóa học offline sản xuất portfolio cá nhân của Coding Works. (24.04.2023)

 

❤ Email của học viên Coding Works gửi sau khi trúng tuyển vị trí Publisher

Chào thầy ạ :)

Chào thầy, em là Kim O Jeong, học viên từng theo học bài giảng của thầy trên Infrun đây ạ.
Em là học viên đã gửi email để xin lời khuyên về portfolio cá nhân vào mùa hè năm nay.
Không biết thầy còn nhớ em không ạ? hehe

Không có gì khác ngoài việc,
em gửi email này để báo tin vui với thầy rằng em đã xin được việc làm Publisher nhờ vào bản portfolio mà thầy đã cho lời khuyên ạ!

Thậm chí!!
Phía công ty đã chủ động liên hệ trước sau khi xem hồ sơ năng lực (portfolio) mà em đăng trên Saramin, và em đã trúng tuyển sau khi phỏng vấn qua Zoom!
Công ty đã đáp ứng mức lương mong muốn và em đã được vào một công ty mà mình có thể làm đúng công việc của một Publisher thực thụ, không phải kiêm nhiệm thiết kế hay lập trình.

Đó là một công ty đang tìm kiếm nhân viên xuất bản (publisher) có kinh nghiệm, nhưng họ đã liên lạc với một người mới như tôi. Khi tôi hỏi tại sao lại liên lạc với mình, họ nói rằng
họ đã xem rất nhiều hồ sơ năng lực của những người khác, nhưng "bản định nghĩa tính năng" trong hồ sơ của tôi đã gây ấn tượng mạnh nên họ đã liên lạc.

Tôi nghĩ rằng tất cả những điều này đều nhờ vào bài giảng của thầy.
Nếu không nghe bài giảng của thầy, có lẽ tôi cũng chỉ có một bản hồ sơ năng lực bình thường, nhưng nhờ những bí quyết mà thầy đã chia sẻ, tôi đã có thể xin việc thành công!

Mặc dù chưa từng gặp mặt trực tiếp,
nhưng trong suốt quá trình làm portfolio, em đã vừa xem bài giảng của thầy vừa dựa dẫm và tin tưởng rất nhiều để nỗ lực hoàn thành nó!

Tôi cảm thấy kỹ năng của mình trong 3 tháng làm portfolio sau khi nghe bài giảng của thầy đã tăng lên đáng kể so với những gì tôi tích lũy được trong suốt thời gian dài học tại trung tâm.

Tôi đã khao khát điều đó,
và khi tin tưởng làm theo những gì thầy đã nói, tôi đã nhận được kết quả thực sự tốt.

Em thực sự cảm ơn thầy/cô rất nhiều!

Hãy cẩn thận với dịch bệnh nhé
và hy vọng sẽ được gặp lại thầy trong những bài giảng tuyệt vời khác :)


Chào thầy ạ~ Em là OOO, học viên trên Inflearn đây ạ~ Em biết địa chỉ email của thầy sau khi xem câu trả lời cho học viên khác ạ.. hehe

Em muốn gửi lời cảm ơn đến thầy ạ ㅎㅎ

Cho đến nay, sau khi học các bài giảng của thầy và trải qua khoảng 2 tuần vất vả nộp hồ sơ xin việc..
em đã trúng tuyển phỏng vấn tại một công ty và chuẩn bị đi làm rồi ạ.. Em thực sự cảm ơn thầy rất nhiều..ㅠㅠ

Thật ra vì tôi đã 32 tuổi nên đã lo lắng rất nhiều. Tôi đã nộp rất nhiều CV nhưng không thấy có phản hồi...
Thế nhưng người phụ trách nhân sự của công ty này nói rằng bản thân họ không thích những người xuất thân từ các trung tâm đào tạo cho lắm ㅎㅎ
Công ty mà tôi quyết định vào làm tuy nhỏ nhưng có cả lập trình viên và thiết kế web.
Họ có hình thức đào tạo trong 3 tháng rồi mới đưa vào làm việc thực tế.
Dù khoảng cách hơi xa và mức lương cũng thấp... nhưng tôi sẽ học tập chăm chỉ để nâng cao mức lương của mình~ ㅎㅎ

Trong thời gian qua em thực sự rất cảm ơn thầy. Thầy đã giải đáp thắc mắc rất tận tình, và việc học online như thế này mà có thể xin được việc làm khiến em cảm thấy thật kỳ diệu..

Em sẽ tiếp tục vừa học vừa nghe bài giảng của thầy để nâng cao năng lực hơn nữa trong tương lai. Cố lên~!

 

🙋🏻‍♂️ 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 gửi kèm nội dung phần không hoạt động, 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 đượ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.


▲ Vui lòng kiểm tra trước mục Câu hỏi thường gặp của cộng đồng bài giảng tương ứng nhé~

 

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

Vui lòng học song song 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 bạn nên tìm kiếm theo ví dụ dưới đây để tìm được video mình cần.

Kênh YouTube Publishing của CodingWorks: https://www.youtube.com/codingworks

 

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

CodingWorks đã và đang giảng dạy lý thuyết xuất bản (publishing), ứng dụng và hướng dẫn làm trang web portfolio 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ị từ A đến Z để 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 các bài giảng về 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 trên nền tảng này.

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,043

Học viên

784

Đá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ả

86 bài giảng ∙ (26giờ 5phú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ả

25 đánh giá

4.9

25 đánh giá

  • reallife4341님의 프로필 이미지
    reallife4341

    Đánh giá 5

    Đá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

  • tingoat3746775님의 프로필 이미지
    tingoat3746775

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    Những lời khuyên rất hữu ích trong thực tế mà bạn đã chia sẻ đang giúp ích rất nhiều cho tôi.

    • codingworks
      Giảng viên

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

  • cyji66님의 프로필 이미지
    cyji66

    Đánh giá 8

    Đánh giá trung bình 4.9

    5

    30% đã tham gia

    • codingworks
      Giảng viên

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

  • letoinfor8410님의 프로필 이미지
    letoinfor8410

    Đánh giá 6

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Không phải dạy những gì mình biết mà từ góc độ của một học giả, họ

    • codingworks
      Giảng viên

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

    • Tôi đang viết đánh giá khóa học thì bất ngờ bị upload nên để lại đánh giá khóa học ở đây. Đây là khóa học không chỉ dạy những gì giảng viên biết mà còn cho học viên biết những gì cần phải biết. Nghe mà không biết thời gian trôi qua như thế nào. Tài liệu cũng được chuẩn bị chu đáo.. chỉ cần click là mọi thứ đều được giải quyết. Cảm ơn anh.

  • bless2089님의 프로필 이미지
    bless2089

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Trước đây mình từng học về publishing nhưng đã tạm gác lại một thời gian, nhờ có bạn mà mình đã có thể tiếp cận lại với nó :) Bạn hướng dẫn rất tỉ mỉ, và các bài giảng cũng được cập nhật liên tục nên mình có thể hoàn thành khóa học mà không bỏ lỡ dù là chi tiết nhỏ nhất. Cảm ơn bạn đã tạo ra một khóa học tuyệt vời như vậy! :)

    • codingworks
      Giảng viên

      Cảm ơn bạn đã để lại đá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!

2.204.542 ₫