Web front-end (24) - HTML - Tập làm dự án_DA1 (thiết kế)

-----

1.1       Tập làm dự án

Bạn đã xem các clip, đọc các bài viết, hiểu các nội dung, và làm các bài tập từ đầu cuốn sách tới đây là bạn đã rất kiên trì. Kiên trì là một trong những phẩm chất quan trọng, giúp bạn trở thành một người làm việc chuyên nghiệp.

Khi bạn muốn đi thực tập hay vào làm việc tại các công ty, họ thường yêu cầu bạn gửi cho họ CV (curriculum vitae – hồ sơ ứng tuyển). Trong CV, bạn sẽ cho họ biết quá trình học của bạn, các bài tập lớn, đồ án, và dự án bạn đã làm.

Bạn sẽ không thể làm được một dự án lớn, nếu bạn không bắt đầu từ mỗi bài tập nhỏ. Sau các bài tập nhỏ sẽ là các dự án nhỏ. Sau các dự án nhỏ sẽ là các dự án lớn. Từng bước một, bạn sẽ thấy mình trưởng thành hơn trong con đường nghề nghiệp.

Có một số cách để làm các dự án:

 (theo thứ tự từ dễ đến khó)

– [1] Xem clip/đọc hướng dẫn và làm theo

– [2] Mở một trang web, dùng Developer tools để xem mã nguồn HTML và viết lại

– [3] Tải mã nguồn một website về, đọc hiểu mã nguồn và viết lại

– [4] Tự viết một trang web

– [5] Tham gia vào một dự án thật

Tùy theo sở thích và khả năng, bạn có thể chọn/kết hợp một hoặc nhiều trong các cách trên.

1.1.1       Dự án 1

Cách làm dự án đơn giản nhất là lên mạng, tìm một dự án về chủ đề mà bạn muốn làm, sau đó đọc/hoặc xem và làm theo. Vì đang trong quá trình học, nên bạn có thể ghi lại quá trình làm, các khái niệm, các kiến thức mà bạn quan tâm. Vừa để hệ thống kiến thức, vừa tạo thành sổ tay nghề nghiệp của bạn, và cũng tạo một thói quen làm việc bài bản, có hệ thống. Sau này, bạn có thể sẽ cần tra cứu các thông tin đã được ghi chép.

Ví dụ, bạn có thể xem và làm theo clip: https://www.youtube.com/watch?v=kUMe1FH4CHE&t=12316s

Mã nguồn theo clip: https://github.com/gitdagray/html_course/tree/main/10_lesson

Bạn có thể tham khảo mã nguồn và làm theo y chang clip. Tuy nhiên, bạn cũng có thể dựa vào nó để tự làm một sản phẩm theo ý bạn. Ở đây chúng ta sẽ kết hợp cách [1] và [4].

Làm một website mua-bán sách cũ

Như ở phần đầu của cuốn sách đã đề cập về quy trình làm ra một sản phẩm, chúng ta sẽ bắt đầu bằng việc Phân tích yêu cầu, Phân tích hệ thống (thiết kế UX) > sau đó đến Thiết kế giao diện (thiết kế UI) > Lập trình (lập trình web front-end) > Kiểm thử > Triển khai, vận hành.

Phân tích yêu cầu, phân tích hệ thống

– Sử dụng HTML để tạo ra một website mua-bán sách cũ

– Website gồm các chức năng: giới thiệu về tiệm sách, sách mới nhập, các loại sách đang bán, thời gian mở cửa, liên hệ.

– Khi khách hàng mở trang chủ (index.html):

+ Họ sẽ thấy các cuốn sách mới nhập về, thông tin giới thiệu về tiệm sách, các loại sách đang bán

+ Có hệ thống menu để khách có thể nhảy tới mục Giới thiệu về tiệm sách, Các loại sách đang bán; xem thời gian mở cửa và có thể gửi thông tin liên hệ để mua-bán sách cũ.

– Thời gian mở cửa được để ở một trang web riêng (thoiGianMoCua.html), gửi thông tin liên hệ cũng được để ở một trang riêng (lienHe.html)

Thiết kế giao diện

[giao diện trang chủ]

[giao diện khi người dùng bấm vào mục Thời-gian-mở-cửa, trang thoiGianMoCua.html]

[giao diện khi người dùng bấm vào mục Liên-hệ, trang lienHe.html]

----

Cập nhật: 9/3/2023

Tải tài liệu đầy đủ: Tự học HTML căn bản