Nhập môn phát triển web di động: Hiện thực hóa hoàn hảo thiết kế Figma bằng Javascript

Tham khảo thiết kế Figma, sử dụng HTML/CSS và Javascript để xây dựng website dành cho thiết bị di động. Hãy phân tích thiết kế di động và thử xây dựng một website dễ bảo trì.

Bạn có thể học thuận lợi hơn nếu đã có kiến thức cơ bản về HTML, CSS và Javascript.

Vui lòng tham khảo các liên kết bên dưới để học từng phần.

• Cơ bản về HTML: https://inf.run/DL3EM

• Kiến thức cơ bản về CSS: https://inf.run/doqvG

• Bố cục linh hoạt:
  https://youtu.be/_PSy66fkQ7U
  https://youtu.be/N27SvfJMXMs

  
  

• JavaScript cơ bản: https://inf.run/yNXhi

📱 Hãy hoàn thiện thiết kế Figma thành một website di động thực tế!

Dự án thực hành xây dựng website: chuyển thiết kế thành mã nguồn

HTML, CSS, JavaScript đã học nhưng bạn chưa có nhiều kinh nghiệm tự mình xây dựng một website thực tế từ đầu phải không?

Bạn đã từng băn khoăn không biết nên bắt đầu từ đâu khi xem thiết kế Figma, thiết kế cấu trúc HTML như thế nào, và nên viết CSS cùng JavaScript theo thứ tự nào chưa?

Trong khóa học này, bạn sẽ trải nghiệm toàn bộ quy trình từ phân tích thiết kế cửa hàng thời trang trên thiết bị di động được tạo bằng Figma đến triển khai thành một website thực tế.

Từ phân tích thiết kế, trích xuất hình ảnh, thiết kế cấu trúc HTML, tạo kiểu CSS đến triển khai tương tác bằng JavaScript, bạn sẽ thực hành từng bước.

Đây không chỉ là việc làm theo giao diện có sẵn, mà là quá trình làm quen với quy trình xuất bản web thực tế và hoàn thiện một sản phẩm có thể sử dụng làm portfolio.

📱 Hãy hoàn thiện thiết kế Figma thành một website di động thực tế!

Dự án web publishing thực tế: Biến thiết kế thành mã nguồn

Bạn đã học HTML, CSS, JavaScript nhưng chưa có nhiều kinh nghiệm tự tạo một website hoàn chỉnh từ đầu?

Bạn đã từng băn khoăn không biết nên bắt đầu công việc từ đâu khi xem thiết kế Figma, thiết kế cấu trúc HTML như thế nào, cũng như nên viết CSS và JavaScript theo thứ tự nào chưa?

Trong khóa học này, bạn sẽ trải nghiệm toàn bộ quy trình phân tích thiết kế cửa hàng thời trang trên di động được tạo bằng Figma và triển khai thành một website thực tế.

Từ phân tích thiết kế, trích xuất hình ảnh, thiết kế cấu trúc HTML, tạo kiểu CSS cho đến triển khai tương tác bằng JavaScript, bạn sẽ thực hành từng bước.

Đây không chỉ là việc làm theo giao diện, mà là quá trình làm quen với quy trình công việc xuất bản web thực tế và hoàn thiện sản phẩm có thể sử dụng làm portfolio.

🎯 Dự án sẽ hoàn thành trong khóa học này

Cửa hàng thời trang di động 'Geeta'

Dựa trên thiết kế Figma, bạn sẽ xây dựng các trang chính của một trang mua sắm trên thiết bị di động và sử dụng JavaScript để triển khai nhiều tương tác người dùng khác nhau.

Thực hiện tổng cộng 8 màn hình.

1. Trang giới thiệu

2. Trang lựa chọn đăng nhập · đăng ký thành viên

3. Trang đăng nhập

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

5. Trang chủ sản phẩm

6. Trang chi tiết sản phẩm

7. Trang giỏ hàng

8. Trang của tôi

Viết HTML và CSS theo bản thiết kế mẫu, đồng thời thêm nhiều tương tác thường được sử dụng trên các website di động thực tế.

Đặc biệt, website hoàn chỉnh sẽ phân biệt môi trường PC và thiết bị di động để hiển thị theo những cách khác nhau.

• Truy cập bằng PC: Hiển thị website di động bên trong mockup điện thoại thông minh

• Truy cập bằng thiết bị di động: Hiển thị trang riêng được tối ưu hóa cho thiết bị di động mà không cần mockup

Qua đó, bạn có thể trải nghiệm phương thức nhận diện thiết bị bằng JavaScript và triển khai web di động thích ứng.

※ Đây không phải là quá trình kết nối xác thực thành viên thực tế, cơ sở dữ liệu sản phẩm và hệ thống thanh toán. Nội dung tập trung vào việc triển khai giao diện cần thiết cho web publishing và xây dựng các tương tác frontend.

💡 Khóa học này phù hợp với những ai:

1. Dành cho những người đã học HTML/CSS/JavaScript nhưng còn thiếu kinh nghiệm thực hiện dự án

Bạn có thể tích lũy kinh nghiệm áp dụng tổng hợp các cú pháp cơ bản vào việc xây dựng website thực tế.

2. Dành cho những người muốn triển khai thiết kế Figma thành mã nguồn

Trải nghiệm quy trình phân tích thiết kế, trích xuất các hình ảnh cần thiết và xây dựng thành trang web thực tế.

3. Dành cho những người đang chuẩn bị xin việc với vai trò lập trình viên web

Phù hợp với những ai muốn vượt ra ngoài các ví dụ đơn giản và hoàn thiện một dự án portfolio gồm nhiều trang cùng các tương tác.

4. Dành cho những ai muốn nâng cao năng lực xây dựng giao diện web di động

Bạn có thể học về bố cục và tương tác phù hợp với màn hình di động, cũng như cách hiển thị trên màn hình của từng thiết bị.

🚀 Bạn sẽ học được gì?

BƯỚC 01. Phân tích thiết kế Figma và chuẩn bị dự án

Trước khi xây dựng website, hãy xem xét thiết kế trên Figma và chuẩn bị các tài nguyên cần thiết.

• Xem trước dự án hoàn chỉnh

• Phân tích thiết kế Figma

• Trích xuất hình ảnh và chuẩn bị các tài nguyên hình ảnh cần thiết

• Cấu trúc thư mục và tệp của dự án

Xem xét thiết kế, lập kế hoạch cho các công việc cần thiết và chuẩn bị tài nguyên để sử dụng trong quá trình xây dựng giao diện web.

BƯỚC 02. Triển khai cấu trúc và kiểu dáng chung của web di động

Triển khai các thành phần được sử dụng chung trên từng trang của website di động.

• Viết CSS reset và các kiểu dáng chung

• Sử dụng biến CSS

• Áp dụng phông chữ web và thiết lập hệ thống phân cấp phông chữ

• Xây dựng bố cục bằng Flexbox và Grid

• Tạo kiểu cho các phần tử biểu mẫu như Input, Checkbox, Radio

Học cách xây dựng một website nhất quán trong khi quản lý có hệ thống các thành phần dùng chung.

BƯỚC 03. Hoàn thiện tương tác trên thiết bị di động bằng JavaScript

Áp dụng JavaScript vào thiết kế tĩnh để triển khai giao diện người dùng di động thực sự có khả năng tương tác.

Trang giới thiệu

Sử dụng thư viện Swiper.js để triển khai các slide tự động chuyển đổi và chỉnh sửa các thành phần hiển thị trang phù hợp với thiết kế.

Màn hình đăng nhập và đăng ký

Học cách sử dụng hình nền và gradient, đồng thời thay đổi ô checkbox mặc định theo thiết kế mong muốn.

Trang chủ sản phẩm

Triển khai hiệu ứng động làm nổi bật khi chọn danh mục và chức năng thay đổi chế độ xem lưới sản phẩm.

Cũng triển khai tương tác mở và đóng trang My Page.

Trang chi tiết sản phẩm

Triển khai các tương tác người dùng như hiển thị số sao đánh giá sản phẩm, thay đổi số lượng và lựa chọn kích thước.

Màn hình giỏ hàng và thanh toán

Thực hiện tương tác thay đổi số lượng và xóa sản phẩm trong giỏ hàng, đồng thời xây dựng màn hình tùy chọn thanh toán.

Sau khi viết cấu trúc HTML và kiểu CSS cho từng chức năng, chúng ta sẽ bổ sung JavaScript để hoàn thiện từng bước.

BƯỚC 04. Triển khai web thích ứng phân biệt PC và thiết bị di động

Học cách sử dụng JavaScript để hiển thị trang web khác nhau tùy theo thiết bị truy cập.

• Nhận diện thiết bị bằng navigator.userAgent

• Hiển thị trang di động bằng mô hình điện thoại thông minh trên PC

• Hiển thị trang dành riêng cho thiết bị di động trên thiết bị di động

• Xử lý chuyển trang theo thiết bị

Bạn sẽ trải nghiệm cách hiển thị một thiết kế di động duy nhất phù hợp với các môi trường truy cập khác nhau.

✅ Sau khi hoàn thành khóa học, bạn có thể làm được những điều sau_久久爱

• Bạn có thể phân tích thiết kế Figma và chuẩn bị các tài nguyên cần thiết cho việc dàn trang web.

• Bạn có thể tạo bố cục website di động bằng HTML và CSS.

• Có thể triển khai UI nhất quán bằng cách sử dụng các biến CSS và kiểu dáng dùng chung.

• Bạn có thể triển khai nhiều tương tác khác nhau bằng JavaScript, chẳng hạn như menu, slide và lựa chọn sản phẩm.

• Có thể xây dựng website di động thích ứng, phân biệt giao diện theo thiết bị truy cập.

• Bạn có thể sử dụng sản phẩm web mobile publishing gồm nhiều trang làm portfolio.

Khóa học này lấy việc xây dựng portfolio phục vụ xin việc làm ý tưởng chủ đạo.

Khóa học này giới thiệu quy trình tạo một website dành riêng cho thiết bị di động.

Khi truy cập trang web hoàn chỉnh bằng PC, trang sẽ được hiển thị bên trong mockup di động. Lúc này, sử dụng javacript để xác định thiết bị truy cập có phải là thiết bị di động hay không.

.

Trong thực tế, thay vì tạo mockup di động như thế này, người ta tận dụng toàn bộ màn hình hoặc triển khai theo kiểu responsive. Nếu bạn muốn tìm hiểu cách triển khai trang web responsive, hãy tham khảo khóa học https://inf.run/Gx3Ty.

Nếu thiết bị truy cập là điện thoại di động, phần mockup sẽ biến mất và chỉ nội dung được tối ưu hóa phù hợp với thiết bị đó. Đây là cách triển khai một trang web di động thích ứng.

Đây là cấu trúc tệp của phiên bản hoàn chỉnh.

Khi truy cập bằng PC, index.html trong thư mục gốc sẽ được mở để hiển thị nội dung trên mockup di động; còn khi truy cập bằng thiết bị di động, hãy triển khai để truy cập index.html trong thư mục mobile thay vì thư mục gốc.

• Cài đặt plugin bắt buộc

  • Xuất hình ảnh gốc

  • Photoroom - AI and Background Remove

  • Font Scanner

Thiết kế Figma cần tham khảo

Tham khảo thiết kế Figma và hoàn thiện các trang dưới đây.

• Trang giới thiệu

• Trang lựa chọn Đăng nhập - Đăng ký

• Đăng nhập

• Đăng ký thành viên

• Trang chủ sản phẩm

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

• Giỏ hàng

• Trang của tôi

Giới thiệu nội dung học tập chính.

📒Trang giới thiệu

Phát hiện thiết bị di động

JavaScript를 활용하여 사용자 기기를 구분하는 방법을 학습하고 기기에 따라 목업 또는 모바일 전용 페이지로 이동시킵니다. 이때 사용자가 사용하는 브라우저의 고유 속성 navigator.userAgent 값을 확인하여 구분하는 방법을 학습하게 됩니다.

Tận dụng các tham số của Swiper JS

Tận dụng thư viện JavaScript tiêu biểu và được sử dụng rộng rãi nhất là swiper.js để triển khai tính năng trượt tự động, đồng thời thay đổi kiểu dáng của bộ phân trang vốn được cung cấp mặc định dưới dạng hình tròn.

📒Trang phân biệt Đăng nhập - Đăng ký thành viên

Chỉ định nhiều hình nền cho một phần tử và sắp xếp vị trí của từng hình sao cho khớp với thiết kế.

📒Đăng nhập, Đăng ký

Sử dụng linear-gradient để chỉ định nền cho phần đầu trang. Kiểm tra thuộc tính nền trong thiết kế và viết kiểu tương ứng.

Trong số các phần tử input, checkbox không thể thay đổi kiểu dáng mặc định của trình duyệt. Đối với những phần tử không thể thay đổi, hãy làm cho chúng biến mất khỏi màn hình và tạo kiểu cho phần tử khác để triển khai sao cho phù hợp với thiết kế.

📒Trang chủ sản phẩm

Sử dụng thuộc tính người dùng để triển khai cửa sổ thông báo và số đếm trên biểu tượng giỏ hàng.

Triển khai bằng CSS và JavaScript hiệu ứng hoạt ảnh trong đó đường highlight di chuyển khi nhấp.

Nhấp vào nút chế độ xem lưới để thay đổi bố cục sản phẩm, và khi nhấp vào nút yêu thích, màu sắc sẽ thay đổi.

Nhấp vào nút bên phải, trang “Trang của tôi” sẽ xuất hiện.

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

Khi thay đổi số sao, số sao sẽ được hiển thị trên màn hình, đồng thời có thể thay đổi số lượng sản phẩm và chọn kích thước.

📒Trang giỏ hàng

Bạn có thể thay đổi số lượng sản phẩm trong giỏ hàng và xóa sản phẩm. Cuối cùng, khi nhấp vào nút thanh toán, các tùy chọn thanh toán sẽ xuất hiện.

📒Hoàn tất

Khóa học này không phải là quá trình xây dựng một trang mua sắm trực tuyến thực tế. Đây là quá trình mà một web publisher tham khảo thiết kế và chỉ xây dựng đến phần khung của màn hình cuối cùng. Vì vậy, khi nhập thông tin ở trang đăng nhập và nhấn nút gửi, trong thực tế cần kiểm tra nội dung đã nhập, truy vấn máy chủ cơ sở dữ liệu để xác định thông tin có khớp hay không, sau đó chuyển đến trang chính. Tuy nhiên, trong bài giảng này, chúng tôi tạm thời liên kết bằng giá trị của thuộc tính action.

Vì đây là trang tĩnh được triển khai chỉ bằng HTML, CSS và Javascript, nên các chức năng như đăng nhập, đăng ký thành viên, thêm vào giỏ hàng, xóa, tiến hành thanh toán... đều chỉ được viết ở mức liên kết giữa các trang. Vui lòng lưu ý.

Trong công việc thực tế của nhà phát triển web, không cần phải thực hiện đến cả phần kết nối khi nhập dữ liệu trong form. Lập trình viên frontend hoặc backend sẽ hoàn thiện sản phẩm do nhà phát triển web thực hiện bằng cách tích hợp DB và viết các script phía máy chủ.

Nếu bạn muốn tìm hiểu về quy trình web publishing -> frontend -> backend, hãy tham khảo bảng tin trên kênh YouTube của tôi hoặc video hướng dẫn xây dựng một cửa hàng trực tuyến.

Kênh trao đổi (khảo sát, phòng trò chuyện mở 1:1)✒

Học viên có thể gửi ý kiến và câu hỏi bất cứ lúc nào thông qua Google Form và phòng trò chuyện mở 1:1 được giới thiệu trong mục Tin mới.