Nhập môn thiết kế web mobile: Hiện thực hóa hoàn hảo thiết kế Figma với Javascript

Triển khai trang web di động bằng HTML/CSS và Javascript, tham khảo thiết kế Figma. Phân tích thiết kế dành cho thiết bị di động của bạn để tạo ra một trang web dễ bảo trì.

Bạn có thể học khóa học này dễ dàng hơn nếu có kiến ​​thức cơ bản về HTML, CSS và Javascript.

Vui lòng kiểm tra các liên kết bên dưới để tìm hiểu về từng phần.

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

• Cơ bản về CSS: https://inf.run/h8H9G

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

  
  

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

Khóa học này dựa trên khái niệm tạo ra danh mục đầu tư phục vụ mục đích tuyển dụng.

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

Khi bạn truy cập vào một trang web hoàn chỉnh trên PC, trang đó sẽ được hiển thị trong bản mô phỏng trên thiết bị di động. Lúc này, javascript được sử dụng để xác định xem thiết bị được kết nối có phải là thiết bị di động hay không.

.

Trên thực tế, thay vì tạo một bản mô phỏng di động như thế này, toàn bộ màn hình sẽ được sử dụng hoặc triển khai theo cách phản hồi. Nếu bạn tò mò về việc triển khai một trang web phản hồi, vui lòng tham khảo bài giảng tại https://inf.run/CZ1az .

Nếu thiết bị được kết nối là thiết bị di động, bản mô phỏng sẽ biến mất và chỉ nội dung được tối ưu hóa cho thiết bị đó và được hiển thị. Bài viết này giới thiệu phương pháp triển khai trang web di động thích ứng.

Đây là cấu trúc tập tin của phiên bản hoàn thiện.

Khi truy cập qua PC, index.html trong thư mục gốc sẽ được mở để hiển thị nội dung trong bản mô phỏng di động và khi truy cập qua thiết bị di động, index.html trong thư mục di động chứ không phải thư mục gốc sẽ được truy cập.

• Cài đặt các plugin cần thiết

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

  • Photoroom - AI và Xóa Nền

  • Máy quét phông chữ

Thiết kế Figma để tham khảo

Hoàn thành trang bên dưới bằng cách tham khảo thiết kế Figma.

• Trang giới thiệu

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

• đăng nhập

• tham gia 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

Tìm hiểu cách sử dụng javascript để phát hiện thiết bị của người dùng và chuyển hướng họ đến bản mẫu hoặc trang dành riêng cho thiết bị di động dựa trên thiết bị của họ. Tại thời điểm này, bạn sẽ học cách phân biệt chúng bằng cách kiểm tra giá trị của thuộc tính navigator.userAgent duy nhất của trình duyệt mà người dùng đang sử dụng.

Sử dụng các tham số Swiper JS

Triển khai các slide tự động bằng swiper.js, thư viện javascript được sử dụng rộng rãi nhất và thay đổi kiểu của thanh phân trang, mặc định là hình tròn.

📒 Trang mục Đăng nhập - Đăng ký

Chỉ định nhiều hình ảnh nền cho một phần tử và định vị chúng sao cho phù hợp với thiết kế.

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

Sử dụng linear-gradient để chỉ định nền của tiêu đề trang. Tạo kiểu bằng cách kiểm tra các thuộc tính nền trong thiết kế.

Trong số các phần tử đầu vào, hộp kiểm không thể thay đổi kiểu duy nhất của trình duyệt. Các thành phần không thể thay đổi sẽ bị xóa khỏi màn hình và áp dụng kiểu cho các thành phần khác để phù hợp với thiết kế.

📒 Trang chủ sản phẩm

Triển khai số lượng cho cửa sổ thông báo và biểu tượng giỏ hàng bằng cách sử dụng thuộc tính người dùng.

Thực hiện hoạt ảnh chuyển động của đường nổi bật khi nhấp vào bằng CSS và Javascript.

Nhấp vào nút Chế độ xem lưới để thay đổi bố cục sản phẩm và nhấp vào nút Thêm vào danh sách mong muốn để thay đổi màu sắc.

Nhấp vào nút bên phải để hiển thị Trang của tôi

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

Khi bạn thay đổi xếp hạng sao, xếp hạng sẽ được hiển thị trên màn hình, hãy 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 chúng. Cuối cùng, khi bạn nhấp vào nút Thanh toán ngay, các tùy chọn thanh toán sẽ xuất hiện.

📒 Hoàn thiện

Khóa học này không nhằm mục đích triển khai một trung tâm mua sắm thực tế. Là một nhà xuất bản web, đây là quá trình tạo khung cho màn hình cuối cùng bằng cách tham khảo thiết kế. Vì vậy, khi bạn nhập thông tin vào phần đăng nhập và nhấn nút gửi, trên thực tế, bạn cần triển khai một quy trình để xác minh thông tin bạn đã nhập, truy vấn máy chủ cơ sở dữ liệu, xác định xem thông tin có khớp không, sau đó chuyển đến trang chính, nhưng trong bài giảng này, chúng ta tạm thời kết nối nó như giá trị của thuộc tính hành động.

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

Trong thực tế của nhà xuất bản, không cần phải thực hiện bất kỳ công việc nào để liên kết dữ liệu đầu vào trong biểu mẫu. Nhà phát triển front-end hoặc back-end hoàn thành công việc của nhà xuất bản web bằng cách viết kết nối DB và tập lệnh phía máy chủ.

Nếu bạn tò mò về quy trình xuất bản web->frontend->backend, vui lòng tham khảo video triển khai bảng thông báo hoặc trung tâm mua sắm trên kênh YouTube của tôi.

Cửa sổ giao tiếp (khảo sát, phòng trò chuyện mở 1:1) ✒

Học sinh có thể cung cấp ý kiến ​​và câu hỏi của mình bất kỳ lúc nào thông qua khảo sát của Google và phòng trò chuyện mở 1:1 được giới thiệu trong phần Có gì mới .