Khóa học UX UI Coding
Lịch khai giảng
-
Sắp có lịch mới
Liên hệ Keyframe để được hỗ trợ
Mô tả Khóa học UX UI Coding
Khóa học UX UI Coding giúp bạn hiện thực hóa sản phẩm đang thiết kế từ UI Design thành Live Product.
Sau khi hoàn thành khóa học Khóa học UX UI Coding này chắc chắn bạn sẽ:
- Nắm vững các kiến thức lập trình cơ bản để tối ưu cho hiệu quả thiết kế UI UX.
- Sở hữu tư duy lập trình và tư duy giải quyết vấn đề để hỗ trợ Team Dev và làm việc với Team IT hiệu quả hơn.
- Khả năng xây dựng hoàn chỉnh cấu trúc và dữ liệu của trang Web trước khi bắt đầu thiết kế.
- Hiểu sâu về quy trình làm việc của một team phát triển sản phẩm, để có kế hoạch tối ưu cho quá trình làm dự án.
- Tự mình xây dựng một trang Web từ UI đến khi sản phẩm hoạt động thực tế trên tên miền bằng Webflow.
- Trở thành một UXUI Designer Full Stack với kỹ năng Semi Developer.
Khóa học UX UI Coding phù hợp với những ai?
- UI/UX Designer muốn hiện thực Landing Page, Website… từ file Figma Design bằng phương án NoCode, LowCode.
- Digital Product Designer muốn hoàn chỉnh tư duy và kiến thức về Ui Coding trong quy trình làm sản phẩm.
- UI Designer muốn mở rộng kỹ năng và tư duy liên quan đến Lập Trình Frontend (CSS Animation & JS Library).
*Khóa học yêu cầu học viên cần có nền tảng về UI Design trước khi học. Nếu bạn là người mới, hãy tham gia Khóa học Figma UI Design hoặc Lộ trình học UX/UI Product Design Completed tại Keyframe trước nhé.
Giảng viên
-
Giảng viên Phúc Huỳnh có hơn 8 năm kinh nghiệm làm việc trong lĩnh vực lập trình ứng dụng và UIUX Design. Có nền tảng là Software Engineer phát triển các ứng dụng web, di động trên Android, iOS. Hiện GV Phúc Huỳnh là UI/UX Designer có kinh nghiệm phát triển các ứng dụng về Bất Động Sản, Giáo dục, Du lịch, Sự kiện, Ecommerce, Blockchain, DApp & Game-Fi, ect….
Giáo trình
-
1 Buổi
Buổi 01 - Giới thiệu về Frontend và Team Development
- Giới thiệu về lập trình về Team IT (Front-end, Back-end).
- Quy trình phát triển sản phẩm.
- So sánh các công việc giữa các bộ phận trong Team.
- HTML, CSS, Javascript (Các thư viện JS) và các ngôn ngữ khác.
- So sánh Web Design và Web Development.
- Tìm hiểu về các ngôn ngữ, thư viện lập trình hiện tại đang phổ biến.
- Tìm hiểu về các vị trí và xu hướng dành cho UI/UX Design.
- Bài tập về nhà.
-
1 Buổi
Buổi 02 - Cách code một layout cơ bản
- Dựng Information Architecture trang web và ứng dị động.
- Dựng layout cơ bản bằng code dựa trên IA đã thiết kế.
- Giới thiệu về Boostrap và cách sử dụng.
- Thực hành Code 1 trang layout cơ bản dự trên IA đã dựng.
- Bài tập.
-
1 Buổi
Buổi 03 - Grid và Breakpoints
- Kiến thức về Grids trong lập trình.
- Ứng dụng Grid vào Breakpoint.
- Các dạng Grid phổ biến hiện nay trong lập trình.
- Dựng Layout Breakpoint dựa vào Grid.
- Thực hành thiết kế hệ thống Grid trên Figma.
- Bài tập.
-
1 Buổi
Buổi 04 - Breakpoints, Adapt Web và Mobile Application
- Kiến thức về Grids của Breakpoints, Reponsive và Mobile Application.
- Hướng dẫn code Breakpoints và Responsive dùng thư viện Bootstrap.
- Thực hành layout cơ bản đã build ở bài trước để Responsive.
- Thực hành áp dụng kiến thức cơ bản của Breakpoint, Responsive vào Layout.
- Bài tập.
-
1 Buổi
Buổi 05 - Auto Layout và Flex Box
- Kiến thức về Flexbox.
- Áp dụng Flexbox để Auto Layout trong Figma.
- Những ứng dụng của Flexbox trong Layout.
- Thực hành Auto Layout áp dụng để code giao diện.
- Bài tập.
-
1 Buổi
Buổi 06 - Design System và cách ứng dụng thực tế
- Spacing trong lập trình.
Cách thiết lập visualize và hình ảnh dữ liệu mang lại hiệu suất tối ưu cho trang web hoặc ứng dụng. - Cấu trúc chung của các component trong Design System.
- Thực hành build các Component đơn giản dựa trên cấu trúc của code.
- Bài tập.
- Spacing trong lập trình.
-
1 Buổi
Buổi 07 - Design System Advance
- Export và build Icon Library thành source code.
- Sử dụng tool để build Design System thành code.
- Sử dụng Design System trong code.
- Thực hành build các component đơn giản dựa trên cấu trúc của code.
- Bài tập.
-
1 Buổi
Buổi 08 - Nocode, LowCode, CMS và Dev Mode trên figma
- Giới thiệu các nền tảng No-code, Low-code, CMS phổ biến.
- Ứng dụng các công cụ trên hỗ trợ Designer.
- Dev Mode trên Figma và cách connect với visual studio code.
- Thực hành kết nối Figma với tool no-code, low-code để xây dựng website.
- Triển khai dự án cá nhân.
-
1 Buổi
Buổi 09 - CSS Animation và Thư viện JS
- Giới thiệu về CSS Animation.
- Giới thiệu về Animation trên ứng dụng web và mobile.
- Cách làm animation hiệu quả trên trang web.
- Thực hành animation css cơ bản.
- Thực hành animtion bằng thư viện JS.
- Mentor dự án cá nhân.
-
1 Buổi
Buổi 10 - Interactive Design Dev Mode trên figma Advance
- Giới thiệu về các phương pháp tương tác trên ứng dụng.
- Thiết kế tương tác trên figma.
- Hướng dẫn xây dựng prototype bằng code.
- Thực hành thiết kế tương tác file figma thành code.
- Mentor dự án cá nhân.
-
1 Buổi
Buổi 11 - Mentor dự án cá nhân
- Ôn tập kiến thức đã học.
- Cách giao tiêp và giải quyết vấn đề với team code.
- Mentor dự án cá nhân.
-
1 Buổi
Buổi 12 - Present dự án & Tổng kết
- Trình bày dự án cá nhân.
- Tổng kết khóa học.
- Hỏi đáp, chia sẻ cuối khoá.
-
1 Buổi
Buổi 01 - Giới thiệu về Frontend và Team Development
Lớp: 25RK01P - Remote
Khai giảng ngày: 18/03/2025
Giảng viên: Phúc Huỳnh
Thời lượng: 12 buổi học
Trình độ: Cơ bản - Trung cấp
Học phí: 5,800,000đ
Địa điểm: Học trực tuyến với giảng viên qua Zoom/ Meet/ Classin...
Hỗ trợ thư viện video bài giảng. Giúp bạn sở hữu trọn vẹn kiến thức dù có vắng học.
Thông tin chi tiết
Tại sao nên học Thiết kế UXUI tại Keyframe?
- Ứng dụng phương pháp đào tạo Portfolio Mentoring 100% thực hành trực tiếp với giảng viên, dễ dàng trao đổi và hỗ trợ khi gặp khó khăn.
- Được mentor 1:1 thực hiện dự án xuyên suốt khóa học. Mục tiêu là hoàn thiện sản phẩm khi hoàn thành khóa học để xây dựng Portfolio.
- Được hỗ trợ thư viện video bài học, giúp bạn sở hữu trọn vẹn kiến thức dù cho có vắng học đột xuất.
- Hỗ trợ kiến thức mãi mãi, được tham gia vào group riêng của lớp.
- Keyframe cấp chứng chỉ khi hoàn thành khóa học.
Khóa học UX UI Coding
có trong chương trình học
Chương trình học UI/UX Product Design Completed
Lộ trình: 4 - 12 tháng
FAQ
-
Quy trình đặt chỗ học
Đóng học phí trực tiếp tại Keyframe
- HCM: Lầu M, 06 Phan Đình Giót, P. 2, Q. Tân Bình, TP. HCM (Xem bản đồ)
- Từ thứ 2 đến thứ 7 : 09h00 – 21h00
- Chủ nhật : 09h00 - 17h00
- Hà Nội: Số 1, Ngõ 21, Lê Văn Lương, P. Nhân Chính, Q. Thanh Xuân, Hà Nội (Xem bản đồ)
- Từ thứ 2 đến thứ 7 : 15h00 – 21h00
Đóng học phí thông qua chuyển khoản nhanh
- Vietcombank
- Tô Dương Phương Bình – 0071004405302
- HCM: Lầu M, 06 Phan Đình Giót, P. 2, Q. Tân Bình, TP. HCM (Xem bản đồ)
-
Học xong có được giới thiệu việc làm không?
- Keyframe cam kết giới thiệu việc làm đối với học viên hoàn thành lộ trình toàn diện của các chương trình học.
-
Giá trị bằng cấp tại Keyframe
- Keyframe cấp chứng chỉ đối với học viên đạt tiêu chuẩn hoàn thành khoá học Offline/ Remote Teaching tại Keyframe (Chứng chỉ này có giá trị xác nhận đã hoàn thành học tại Keyframe)
- Keyframe không cấp chứng chỉ đối với học viên tham gia khoá học Online Video.
