Giới thiệu Wireframe & sắp xếp Folder cho Project
Lập trình Front End cơ bản với website Landing Page

Danh sách bài học
Giới thiệu Wireframe & sắp xếp Folder cho Project
Nội dung bài viết Học nhanh
Dẫn nhập
Ở các bài trước chúng ta đã cùng nhau làm quen với HTML và CSS căn bản.
Trong bài học này các bạn sẽ được giới thiệu về Wireframe, và cùng nhau tạo các folder cho project của chúng ta.
Nội dung
Để đọc hiểu bài này một cách tốt nhất, bạn nên có kiến thức về:
Trong bài này, Kteam sẽ giới thiệu đến bạn:
- Khái niệm Wireframe
- Wireframe của dự án thực hành
- Tạo các folder, các file cho project.
Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.
Khái niệm Wireframe
Wireframe là gì ?
Wireframe là một công cụ trực quan để trình bày cấu trúc và chức năng của website được đề xuất. Nó là bản phác thảo trang web của bạn (không chứa hiệu ứng, hình ảnh hay phối màu, … ), giúp bạn cũng như đối tác hoặc khách hàng có thể hiểu & trao đổi được về sản phẩm.
Dựa vào nó mà chúng ta có thể tạo ra trang web cũng như chỉnh sửa 1 cách hợp lí và dễ dàng. Tuy nhiên, nếu chưa từng coi wireframe là một phần dự án thì việc sử dụng nó làm bạn có cảm giác hơi tù túng do mọi hình ảnh,hiệu ứng, màu sắc của bạn đều như được bọc bởi các khối hộp, có vẻ hơi nhạt nhẽo so với một người làm Front End.
Nhưng bù lại, nó sẽ cho bạn cái nhìn tổng quan và dễ dàng định hướng phác thảo về trang web mà bạn muốn xây dựng; bạn sẽ ít bị rối loạn bởi các chi tiết phụ mà thực sự tập trung vào các cấu trúc, nội dụng, hệ thống phân cấp, chức năng & tương tác chính.
Tạo Wireframe như thế nào?
Để tạo ra wireframe bạn có thể:
- Vẽ tay ra giấy
- Sử dụng các công của hỗ trợ như Photoshop, Mockflow ….
Wireframe của dự án thực hành
Do website nhỏ nên wireframe làm khá đơn giản và 1 số chỗ không theo chuẩn thiết kế wireframe để cho các bạn dễ hiểu.
Các bạn có thể tham khảo các nguyên tắc chung khi thiết kế wireframe tại :
Wireframe của dự án:
Tạo các folders và files cho dự án
Nếu như bạn làm cho khách hàng, thường họ sẽ có cho bạn bản text mô tả nội dung từng phần, và cả kho ảnh cho từng phần đó.
Cấu trúc folders:
- Trong quá trình thiết kế trang HTML, thì việc sử dụng các file .css, .js bên ngoài để hỗ trợ là vô cùng hữu ích, đó là lí do tồn tại folder vendors.
- Các file ảnh các bạn vào phần download Project bên dưới để download về nhé.
Project tham khảo
Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!
Kết luận
Ờ bài này chúng ta đã cùng nhau tìm hiểu về wireframe và tạo các folders.
Ở bài sau chúng ta sẽ kết thúc quá trình chuẩn bị bằng việc SET UP CẤU TRÚC & CÁC CÚ PHÁP BAN ĐẦU CHO FILE HTML, CSS.
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập – Thử thách – Không ngại khó”.
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Giới thiệu Wireframe & sắp xếp Folder cho Project dưới dạng file PDF trong link bên dưới.
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé!
Thảo luận
Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.
Tải xuống
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Giới thiệu Wireframe & sắp xếp Folder cho Project dưới dạng file PDF trong link bên dưới.
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận
Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.
Tác giả/Dịch giả
Khóa học
Lập trình Front End cơ bản với website Landing Page
Nếu bạn yêu thích lập trình web nhưng còn lơ ngơ không biết bắt đầu từ đâu hay đã biết cơ bản mà chưa làm được một sản phẩm nhất định nào, thì đây chính là khóa học dành cho bạn – LẬP TRÌNH FRONT END CƠ BẢN VỚI WEBSITE LANDING PAGE.
Trong phần này, Kteam sẽ giới thiệu cho các bạn về nội dung chúng ta sẽ được hướng dẫn cho khóa học này, cũng như là project mà chúng ta sẽ cùng nhau thực hiện.
Nào! Bắt đầu thôi!
Đánh giá
nội dung rất hay, người mới bắt đầu như mình học rất dễ hiểu, cảm ơn Team
cho mình xin các file hình ảnh bạn
Ad ơi cho mình hỏi, các file tài liệu trong GG Driver mình xem được mà sao không tải về được nhỉ, trong khi link file tài liệu pdf thì mình tải đc bình thường.