Thiết Kế Trang Web Bố Cục (layout) Tùy Biến Theo Từng Thiết Bị Màn ...

• Vuexy

• Giao diện Frontend
• Quản trị 2
  • Giáo dục
  • Xóa bộ nhớ Cache
• Quản lý Người dùng
• Người dùng
  • List
  • View
  • Edit
  • Danh sách
• Vai trò
  • Danh sách
• Nhật ký
• Log Viewer
  • Quản trị
  • Danh sách
• Quản trị Khách hàng
• Khách hàng
  • Danh sách
  • Danh sách đã xóa

• Đăng nhập

• Files

• 

  Two new item submitted

  Marketing Manager '17kb
• 

  52 JPG file Generated

  FontEnd Developer '11kb
• 

  25 PDF File Uploaded

  Digital Marketing Manager '150kb
• 

  Anna_Strong.doc

  Web Designer '256kb

• Members

• 

  John Doe

  UI designer
• 

  Michal Clark

  FontEnd Developer
• 

  Milena Gibson

  Digital Marketing Manager
• 

  Anna Strong

  Web Designer

• No results found.

• NỀN TẢNG

• Trang chủ
• Đào tạo
  • Lịch học
  • Bài tập
  • Quản lý Công việc
• Tin tức
  • Tin tức
  • Tuyển dụng
• Tiện ích
  • Công cụ
• Dịch vụ
  • Dịch vụ
• Giới thiệu/Liên hệ
  • Liên hệ
  • Kênh CHAT với giáo viên

Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive)

Chương 8-Bài 7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive) Tác giả: Dương Nguyễn Phú Cường #9805 Ngày đăng: Hồi xưa đó Lượt xem: 680 Xem định dạng IN

Khái niệm về Responsive

Responsive là một tiêu chuẩn thiết kế trang web hiện đại. Cho phép bố cục (layout) trang web có thể co bóp tương ứng theo chiều rộng (Width) của thiết bị màn hình của người dùng đang truy cập trang web.

Kích thước chiều rộng (Width) của các màn hình chuẩn

Theo thiết kế của Bootstrap. Xem chi tiết tại: https://getbootstrap.com/docs/4.6/layout/overview/

Kích thước phân chia các cột trong Bootstrap

Bootstrap là framework theo tiêu chí Mobile first, có nghĩa là sẽ thiết kế theo tiêu chuẩn màn hình nhỏ nhất (là mobile), sau đó sẽ tăng dần lên các thiết bị có màn hình rộng hơn. Cách đặt tên class cho các cột trong Bootstrap:

• .col-: có nghĩa là cột này sẽ đáp ứng cho thiết bị là mobile (khi để thẳng đứng).
• .col-sm-: có nghĩa là cột này sẽ đáp ứng cho thiết bị là mobile (khi để mobile nằm ngang).
• .col-md-: có nghĩa là cột này sẽ đáp ứng cho các thiết bị tablet như Ipad, Notebook, ...
• .col-lg-: có nghĩa là cột này sẽ đáp ứng cho các thiết bị là màn hình máy tính desktop có kích thước 17 inch trở xuống
• .col-xl-: có nghĩa là cột này sẽ đáp ứng cho các thiết bị là màn hình máy tính desktop có kích thước 19 inch trở lên

Ví dụ thiết kế layout tự co bóp theo thiết bị màn hình

Phân tích

1. Cột box 1, sẽ tùy biến theo màn hình:

• Nếu là thiết bị mobile thì sẽ là cột 12 => cần áp dụng class col-12
• Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6
• Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3

=> Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop): col-12 col-md-6 col-lg-3 2. Cột box 2, sẽ tùy biến theo màn hình:

• Nếu là thiết bị mobile thì sẽ là cột 12 => cần áp dụng class col-12
• Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6
• Nếu là thiết bị desktop trờ lên thì sẽ là cột 9 => cần áp dụng class col-lg-9

=> Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop): col-12 col-md-6 col-lg-9 3. Cột box 3, sẽ tùy biến theo màn hình:

• Nếu là thiết bị mobile thì sẽ là cột 12 => cần áp dụng class col-12
• Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6
• Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3

=> Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop): col-12 col-md-6 col-lg-3 4. Cột box 4, sẽ tùy biến theo màn hình:

• Nếu là thiết bị mobile thì sẽ là cột 12 => cần áp dụng class col-12
• Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6
• Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3

=> Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop): col-12 col-md-6 col-lg-3 5. Cột box 5, sẽ tùy biến theo màn hình:

• Nếu là thiết bị mobile thì sẽ là cột 6 => cần áp dụng class col-6
• Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6
• Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3

=> Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop): col-6 col-md-6 col-lg-3 6. Cột box 6, sẽ tùy biến theo màn hình:

• Nếu là thiết bị mobile thì sẽ là cột 6 => cần áp dụng class col-6
• Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6
• Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3

=> Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop): col-6 col-md-6 col-lg-3

Code mẫu

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="Nền tảng,HTML,CSS,XML,JavaScript, Lập trình C#, Lập trình, Web, Kiến thức, Đồ án"> <meta name="author" content="Dương Nguyễn Phú Cường"> <meta name="description" content="Cung cấp các kiến thức Nền tảng, cơ bản về Lập trình, Lập trình web, Lập trình di động, Cơ sở dữ liệu, ..."> <meta property="og:locale" content="vi_VN"> <meta property="og:type" content="website"> <meta property="og:title" content="Nền tảng Kiến thức"> <meta property="og:description" content="Cung cấp các kiến thức Nền tảng, cơ bản về Lập trình, Lập trình web, Lập trình di động, Cơ sở dữ liệu, ..."> <meta property="og:url" content="https://nentang.vn/"> <meta property="og:site_name" content="Nền tảng Kiến thức"> <title>Học cách thiết kế layout responsive Bootstrap | NenTang.vn</title> <!-- Liên kết CSS Bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <style> /* Class quy định định dạng Khối DIV thứ 1 */ .box1 { height: 200px; background-color: #FFE6CC; border: 3px solid #D79B00; color: #000; } /* Class quy định định dạng Khối DIV thứ 2 */ .box2 { height: 200px; background-color: #DAE8FC; border: 3px solid #6C8EBF; color: #000; } /* Class quy định định dạng Khối DIV thứ 3 */ .box3 { height: 200px; background-color: #60A917; border: 1px solid #2D7600; color: #fff; } /* Class quy định định dạng Khối DIV thứ 4 */ .box4 { height: 200px; background-color: #D80073; border: 1px solid #A50040; color: #fff; } /* Class quy định định dạng Khối DIV thứ 5 */ .box5 { height: 200px; background-color: #0050EF; border: 1px solid #001DBC; color: #fff; } /* Class quy định định dạng Khối DIV thứ 6 */ .box6 { height: 200px; background-color: #A20025; border: 1px solid #6F0000; color: #fff; } </style> </head> <body> <div class="container"> <div class="row"> <!-- Cột box 1, sẽ tùy biến theo màn hình: - Nếu là thiết bị mobile thì sẽ là cột 12 => cần áp dụng class col-12 - Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6 - Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3 => Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop) col-12 col-md-6 col-lg-3 --> <div class="box1 col-12 col-md-6 col-lg-3">Box 1</div> <!-- Cột box 2, sẽ tùy biến theo màn hình: - Nếu là thiết bị mobile thì sẽ là cột 12 => cần áp dụng class col-12 - Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6 - Nếu là thiết bị desktop trờ lên thì sẽ là cột 9 => cần áp dụng class col-lg-9 => Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop) col-12 col-md-6 col-lg-9 --> <div class="box2 col-12 col-md-6 col-lg-9">Box 2</div> </div> <div class="row"> <!-- Cột box 3, sẽ tùy biến theo màn hình: - Nếu là thiết bị mobile thì sẽ là cột 12 => cần áp dụng class col-12 - Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6 - Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3 => Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop) col-12 col-md-6 col-lg-3 --> <div class="box3 col-12 col-md-6 col-lg-3">Box 3</div> <!-- Cột box 4, sẽ tùy biến theo màn hình: - Nếu là thiết bị mobile thì sẽ là cột 12 => cần áp dụng class col-12 - Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6 - Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3 => Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop) col-12 col-md-6 col-lg-3 --> <div class="box4 col-12 col-md-6 col-lg-3">Box 4</div> <!-- Cột box 5, sẽ tùy biến theo màn hình: - Nếu là thiết bị mobile thì sẽ là cột 6 => cần áp dụng class col-6 - Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6 - Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3 => Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop) col-6 col-md-6 col-lg-3 --> <div class="box5 col-6 col-md-6 col-lg-3">Box 5</div> <!-- Cột box 6, sẽ tùy biến theo màn hình: - Nếu là thiết bị mobile thì sẽ là cột 6 => cần áp dụng class col-6 - Nếu là thiết bị tablet trở lên thì sẽ là cột 6 => cần áp dụng class col-md-6 - Nếu là thiết bị desktop trờ lên thì sẽ là cột 3 => cần áp dụng class col-lg-3 => Kết hợp tất cả ta sẽ có cột có thể tùy biến cho cả 3 thiết bị (nên viết code theo thứ tự áp dụng chiều rộng từ nhỏ đến lớn: mobile -> tablet -> desktop) col-6 col-md-6 col-lg-3 --> <div class="box6 col-6 col-md-6 col-lg-3">Box 6</div> </div> </div> <!-- Liên kết JavaScript Bootstrap --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> </body> </html>

Xem demo

Truy cập và thử điều chỉnh độ rộng của màn hình: http://frontend-basic.learning.nentang.vn/course-bootstrap/thiet-ke-layout-responsive/index.html Về trang chủ Về Khóa học Bài học trước Bài học tiếp theo

Mục lục

Chương trình học

1. Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
   1. Cài đặt trình soạn thảo code Visual Studio Code IDE #2594 Xem trước
   2. Cài đặt tiện ích mở rộng Live Server Extension cho Visual Studio Code #10229
2. HTML5 là gì? Các thẻ (tag) HTML cơ bản 19
   1. HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML #37
   2. Khác biệt giữa HTML và HTML5 #2623
   3. Cấu trúc file HTML5 cơ bản #32
   4. Các Quy tắc và Quy ước nên tuân theo khi lập trình web HTML5 CSS JS #10192
   5. Các thói quen cần có khi lập trình web sử dụng HTML #38
   6. Các thẻ (tag) định nghĩa mô tả (meta) cho trang web #2614
   7. Các thẻ (tag) định dạng Đề mục (Heading), Phân đoạn (Paragraph), Ngắt dòng (Break) cho văn bản (Text) #10249
   8. Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule) #10242
   9. Các thẻ (tag) định dạng kiểu font chữ #33
   10. Các thẻ (tag) định dạng hiển thị cho văn bản (text) #10260
   11. Phân biệt 2 họ font chữ phổ biến SERIF và SANS SERIF #10256
   12. Các thẻ (tag) tạo Siêu liên kết (hyperlink) #2615
   13. Các thẻ (tag) tạo Danh sách (list) #2618
   14. Các thẻ (tag) chèn hình ảnh vào trang web #10276
   15. Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web #9589
   16. Các thẻ (tag) làm thanh tự động cuộn nội dung trong trang web #9611
   17. Các ký tự đặc biệt trong HTML #2636
   18. Thẻ (tag) IFRAME để nhúng trang web khác vào trang web của mình #9996
   19. Các loại font chữ phổ biến trong thiết kế web SERIF, SANS SERIF, DISPLAY, HANDWRITING, MONOSPACE #10314
3. Thiết kế bố cục trang web (layout) 12
   1. Thẻ TABLE (TABLE tag) là gì? #39
   2. Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) #35
   3. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Đơn giản #9102
   4. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang chủ #8499
   5. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giới thiệu #8500
   6. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Liên hệ #8501
   7. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Danh sách Sản phẩm #8502
   8. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Sản phẩm chi tiết #8504
   9. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giỏ hàng #8506
   10. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Tìm kiếm #8509
   11. Thẻ DIV (DIV tag) là gì? #36
   12. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) #34
4. Tạo biểu mẫu nhập liệu sử dụng thẻ (tag) FORM 21
   1. Biểu mẫu nhập liệu (form) là gì? Thường được sử dụng vào mục đích gì? #44
   2. Tạo ô nhập liệu INPUT 1 dòng (single line text) #45
   3. Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text) #46
   4. Tạo ô nhập liệu INPUT dạng ẩn (hidden) #47
   5. Tạo nút bấm BUTTON #51
   6. Tạo ô nhập liệu CHECKBOX chọn 1 hoặc nhiều những tùy chọn #49
   7. Tạo ô nhập liệu RADIO chọn 1 trong những tùy chọn #48
   8. Tạo ô nhập liệu SELECT cho phép chọn lựa tùy chọn #50
   9. Tạo ô nhập liệu INPUT kiểu COLOR #59
   10. Tạo ô nhập liệu INPUT kiểu DATE #57
   11. Tạo ô nhập liệu INPUT kiểu EMAIL #52
   12. Tạo ô nhập liệu INPUT kiểu NUMBER #55
   13. Tạo ô nhập liệu INPUT kiểu RANGE #56
   14. Tạo ô nhập liệu INPUT kiểu TEL (số điện thoại) #54
   15. Tạo ô nhập liệu INPUT kiểu TIME #58
   16. Tạo ô nhập liệu INPUT kiểu URL #53
   17. Tạo thanh đo lường METER #61
   18. Tạo thanh tiến trình PROGRESS #60
   19. Tạo biểu mẫu (Form) đặt vé Máy bay #2641
   20. Tạo biểu mẫu (Form) Đăng nhập #2642
   21. Tạo biểu mẫu (Form) Đăng ký #2643
5. CSS là gì? 34
   1. CSS là gì? Cú pháp sử dụng CSS #62
   2. Các cách áp dụng CSS để định dạng trang web #40
   3. Các thuộc tính CSS định dạng font chữ #41
   4. Các thuộc tính CSS quy định màu sắc đối tượng #42
   5. Đơn vị đo lường trong CSS #43
   6. Bài tập - Tạo menu ngang đa cấp bằng CSS #8796
   7. Các thuộc tính quy định Kích thước và Khoảng cách của các phần tử #9153
   8. Tìm hiểu về Thuộc tính vị trí Position trong CSS #8923
   9. Tìm hiểu các thuộc tính quy định vị trí Trôi nổi, Dàn hàng ngang sử dụng Float Left, Float Right trong CSS #9724
   10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix #9733
   11. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 1 #9437
   12. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 2 #9458
   13. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 3 #9459
   14. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Call for Action #9462
   15. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Feature Product #9464
   16. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Services #9466
   17. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Team #9467
   18. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Experience #9470
   19. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 1 #9473
   20. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 2 #9475
   21. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 3 #9476
   22. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Statistic #9480
   23. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Testimonials #9482
   24. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Pricing Tables #9484
   25. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 1 #9486
   26. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 2 #9487
   27. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Footer #9490
   28. Bộ lựa chọn đặc biệt theo trạng thái Pseudo Class và Pseudo Element trong CSS #9754
   29. Bộ lựa chọn trong CSS (CSS Selector) #10020
   30. Sử dụng CSS để làm nhà sáng tạo Nghệ thuật sắp xếp trình bày chữ Typography #10155
   31. Hướng dẫn phân tích Bố cục (layout) Web bán hàng Thực phẩm Dinh dưỡng Organic #10330
   32. Tư duy Thiết kế Khung cần có khi xây dựng giao diện Một Trang web #10344
   33. Tìm hiểu toàn diện về thuộc tính trình diễn ảnh object-fit trong CSS #11632
   34. Bài tập - Thiết kế mẫu hóa đơn bán hàng cho máy in nhiệt khổ giấy K80 và K57 #12222
6. Javascript căn bản 9
   1. Javascript là gì? Ứng dụng của Javascript #2692
   2. Các cách sử dụng Javascript trong trang web #2693
   3. Biến trong Javascript #2694
   4. Hàm trong Javascript #2695
   5. Lab 01 - tạo chương trình tính toán cơ bản #7864
   6. Bài tập Ghép chuỗi String #8156
   7. Kiểm tra Kiến thức JS #8230
   8. Cấu trúc điều khiển sử dụng IF ELSE #8896
   9. Cách lấy dữ liệu Người dùng từ Biểu mẫu (FORM) #2696
7. JQuery căn bản 10
   1. Giới thiệu JQuery và ứng dụng của JQuery trong thiết kế, lập trình web #8243
   2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web #8245
   3. Tìm hiểu quy tắc vận hành của JQUERY #8244
   4. Toàn tập về Bộ lựa chọn (selector) #8248
   5. Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY #8995
   6. Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout #8996
   7. Bài tập Thực thi một hàm xử lý liên tục sau 1 khoảng thời gian bằng hàm setInterval #9020
   8. Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY #9033
   9. Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR #9037
   10. Tích hợp công cụ chọn Ngày Tháng Date Picker #9040
8. Bootstrap là gì? JQuery là cái chi? 8
   1. Giới thiệu Bootstrap #2698
   2. Cách sử dụng Bootstrap trong dự án của bạn #2699
   3. Hệ thống Lưới (GRID) của Bootstrap #2700
   4. Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap #2701
   5. Ràng buộc dữ liệu (validation) bằng Bootstrap #8270
   6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty #8332
   7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive) #9805
   8. Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query #10114
9. Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap 14
   1. Lộ trình (Roadmap) Thực hiện Đồ án #10356
   2. Khởi tạo thư mục dự án #2702
   3. Phân tích Bố cục (layout) #2703
   4. Xây dựng Trang chủ (index) #2704
   5. Xây dựng Trang Giới thiệu (about) #2705
   6. Xây dựng Trang Liên hệ (contact) #2706
   7. Xây dựng Trang Danh sách Sản phẩm (products) #2707
   8. Xây dựng Trang Chi tiết Sản phẩm (product_detail) #2708
   9. Xây dựng Trang Giỏ hàng (cart) #2709
   10. Xây dựng Trang Thanh toán (checkout) #2710
   11. Xây dựng Trang Đăng nhập (login) #2711
   12. Xây dựng Trang Đăng ký (register) #2712
   13. Xây dựng Trang Tìm kiếm (search) #2713
   14. Thưởng thức Kết quả (demo version) #2714
10. Kiểm tra
11. Tài liệu tham khảo 4
    1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend HTML CSS JS #2597
    2. SourceCode tham khảo Lập trình web Frontend HTML CSS JS #2610
    3. Các thể loại Menu trong Thiết kế Web #10110
    4. Tổng hợp các công cụ tự sinh Giao diện HTML, CSS, JS tuyệt vời dành cho Nhà phát triển thiết kế Web #10312
12. VueJS 7
    1. VueJS là gì? Ứng dụng của VueJS trong phát triển web FrontEnd #8237
    2. Tìm hiểu Kiến trúc Hệ thống Web MVVM - Model View ViewModel #10161
    3. Component trong VueJS #8238
    4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản #9406
    5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap #8354
    6. Bài tập - Sử dụng Bootstrap và VueJS để thiết kế Trang Tuyển dụng các Vị trí Việc làm Công nghệ #8271
    7. Test #8925
13. UI/UX trong lập trình Web 2
    1. Tìm hiểu về khái niệm UI/UX trong thiết kế ứng dụng #10125
    2. Quy trình Xây dựng, Thiết kế một trang Web #10126
14. CSS Flexbox 1
    1. Tạo cấu trúc Dòng x Cột trong CSS Flexbox #10341
15. Extras 2
    1. Bài tập xử lý lưu trữ dữ liệu với LocalStorage #10427
    2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS #10482
16. Video khóa học 1
    1. Video khóa học toàn tập #11572

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

1. Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
   1. Cài đặt trình soạn thảo code Visual Studio Code IDE #2594 Xem trước
   2. Cài đặt tiện ích mở rộng Live Server Extension cho Visual Studio Code #10229
2. HTML5 là gì? Các thẻ (tag) HTML cơ bản 19
   1. HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML #37
   2. Khác biệt giữa HTML và HTML5 #2623
   3. Cấu trúc file HTML5 cơ bản #32
   4. Các Quy tắc và Quy ước nên tuân theo khi lập trình web HTML5 CSS JS #10192
   5. Các thói quen cần có khi lập trình web sử dụng HTML #38
   6. Các thẻ (tag) định nghĩa mô tả (meta) cho trang web #2614
   7. Các thẻ (tag) định dạng Đề mục (Heading), Phân đoạn (Paragraph), Ngắt dòng (Break) cho văn bản (Text) #10249
   8. Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule) #10242
   9. Các thẻ (tag) định dạng kiểu font chữ #33
   10. Các thẻ (tag) định dạng hiển thị cho văn bản (text) #10260
   11. Phân biệt 2 họ font chữ phổ biến SERIF và SANS SERIF #10256
   12. Các thẻ (tag) tạo Siêu liên kết (hyperlink) #2615
   13. Các thẻ (tag) tạo Danh sách (list) #2618
   14. Các thẻ (tag) chèn hình ảnh vào trang web #10276
   15. Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web #9589
   16. Các thẻ (tag) làm thanh tự động cuộn nội dung trong trang web #9611
   17. Các ký tự đặc biệt trong HTML #2636
   18. Thẻ (tag) IFRAME để nhúng trang web khác vào trang web của mình #9996
   19. Các loại font chữ phổ biến trong thiết kế web SERIF, SANS SERIF, DISPLAY, HANDWRITING, MONOSPACE #10314
3. Thiết kế bố cục trang web (layout) 12
   1. Thẻ TABLE (TABLE tag) là gì? #39
   2. Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) #35
   3. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Đơn giản #9102
   4. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang chủ #8499
   5. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giới thiệu #8500
   6. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Liên hệ #8501
   7. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Danh sách Sản phẩm #8502
   8. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Sản phẩm chi tiết #8504
   9. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giỏ hàng #8506
   10. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Tìm kiếm #8509
   11. Thẻ DIV (DIV tag) là gì? #36
   12. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) #34
4. Tạo biểu mẫu nhập liệu sử dụng thẻ (tag) FORM 21
   1. Biểu mẫu nhập liệu (form) là gì? Thường được sử dụng vào mục đích gì? #44
   2. Tạo ô nhập liệu INPUT 1 dòng (single line text) #45
   3. Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text) #46
   4. Tạo ô nhập liệu INPUT dạng ẩn (hidden) #47
   5. Tạo nút bấm BUTTON #51
   6. Tạo ô nhập liệu CHECKBOX chọn 1 hoặc nhiều những tùy chọn #49
   7. Tạo ô nhập liệu RADIO chọn 1 trong những tùy chọn #48
   8. Tạo ô nhập liệu SELECT cho phép chọn lựa tùy chọn #50
   9. Tạo ô nhập liệu INPUT kiểu COLOR #59
   10. Tạo ô nhập liệu INPUT kiểu DATE #57
   11. Tạo ô nhập liệu INPUT kiểu EMAIL #52
   12. Tạo ô nhập liệu INPUT kiểu NUMBER #55
   13. Tạo ô nhập liệu INPUT kiểu RANGE #56
   14. Tạo ô nhập liệu INPUT kiểu TEL (số điện thoại) #54
   15. Tạo ô nhập liệu INPUT kiểu TIME #58
   16. Tạo ô nhập liệu INPUT kiểu URL #53
   17. Tạo thanh đo lường METER #61
   18. Tạo thanh tiến trình PROGRESS #60
   19. Tạo biểu mẫu (Form) đặt vé Máy bay #2641
   20. Tạo biểu mẫu (Form) Đăng nhập #2642
   21. Tạo biểu mẫu (Form) Đăng ký #2643
5. CSS là gì? 34
   1. CSS là gì? Cú pháp sử dụng CSS #62
   2. Các cách áp dụng CSS để định dạng trang web #40
   3. Các thuộc tính CSS định dạng font chữ #41
   4. Các thuộc tính CSS quy định màu sắc đối tượng #42
   5. Đơn vị đo lường trong CSS #43
   6. Bài tập - Tạo menu ngang đa cấp bằng CSS #8796
   7. Các thuộc tính quy định Kích thước và Khoảng cách của các phần tử #9153
   8. Tìm hiểu về Thuộc tính vị trí Position trong CSS #8923
   9. Tìm hiểu các thuộc tính quy định vị trí Trôi nổi, Dàn hàng ngang sử dụng Float Left, Float Right trong CSS #9724
   10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix #9733
   11. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 1 #9437
   12. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 2 #9458
   13. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 3 #9459
   14. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Call for Action #9462
   15. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Feature Product #9464
   16. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Services #9466
   17. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Team #9467
   18. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Experience #9470
   19. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 1 #9473
   20. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 2 #9475
   21. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 3 #9476
   22. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Statistic #9480
   23. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Testimonials #9482
   24. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Pricing Tables #9484
   25. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 1 #9486
   26. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 2 #9487
   27. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Footer #9490
   28. Bộ lựa chọn đặc biệt theo trạng thái Pseudo Class và Pseudo Element trong CSS #9754
   29. Bộ lựa chọn trong CSS (CSS Selector) #10020
   30. Sử dụng CSS để làm nhà sáng tạo Nghệ thuật sắp xếp trình bày chữ Typography #10155
   31. Hướng dẫn phân tích Bố cục (layout) Web bán hàng Thực phẩm Dinh dưỡng Organic #10330
   32. Tư duy Thiết kế Khung cần có khi xây dựng giao diện Một Trang web #10344
   33. Tìm hiểu toàn diện về thuộc tính trình diễn ảnh object-fit trong CSS #11632
   34. Bài tập - Thiết kế mẫu hóa đơn bán hàng cho máy in nhiệt khổ giấy K80 và K57 #12222
6. Javascript căn bản 9
   1. Javascript là gì? Ứng dụng của Javascript #2692
   2. Các cách sử dụng Javascript trong trang web #2693
   3. Biến trong Javascript #2694
   4. Hàm trong Javascript #2695
   5. Lab 01 - tạo chương trình tính toán cơ bản #7864
   6. Bài tập Ghép chuỗi String #8156
   7. Kiểm tra Kiến thức JS #8230
   8. Cấu trúc điều khiển sử dụng IF ELSE #8896
   9. Cách lấy dữ liệu Người dùng từ Biểu mẫu (FORM) #2696
7. JQuery căn bản 10
   1. Giới thiệu JQuery và ứng dụng của JQuery trong thiết kế, lập trình web #8243
   2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web #8245
   3. Tìm hiểu quy tắc vận hành của JQUERY #8244
   4. Toàn tập về Bộ lựa chọn (selector) #8248
   5. Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY #8995
   6. Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout #8996
   7. Bài tập Thực thi một hàm xử lý liên tục sau 1 khoảng thời gian bằng hàm setInterval #9020
   8. Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY #9033
   9. Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR #9037
   10. Tích hợp công cụ chọn Ngày Tháng Date Picker #9040
8. Bootstrap là gì? JQuery là cái chi? 8
   1. Giới thiệu Bootstrap #2698
   2. Cách sử dụng Bootstrap trong dự án của bạn #2699
   3. Hệ thống Lưới (GRID) của Bootstrap #2700
   4. Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap #2701
   5. Ràng buộc dữ liệu (validation) bằng Bootstrap #8270
   6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty #8332
   7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive) #9805
   8. Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query #10114
9. Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap 14
   1. Lộ trình (Roadmap) Thực hiện Đồ án #10356
   2. Khởi tạo thư mục dự án #2702
   3. Phân tích Bố cục (layout) #2703
   4. Xây dựng Trang chủ (index) #2704
   5. Xây dựng Trang Giới thiệu (about) #2705
   6. Xây dựng Trang Liên hệ (contact) #2706
   7. Xây dựng Trang Danh sách Sản phẩm (products) #2707
   8. Xây dựng Trang Chi tiết Sản phẩm (product_detail) #2708
   9. Xây dựng Trang Giỏ hàng (cart) #2709
   10. Xây dựng Trang Thanh toán (checkout) #2710
   11. Xây dựng Trang Đăng nhập (login) #2711
   12. Xây dựng Trang Đăng ký (register) #2712
   13. Xây dựng Trang Tìm kiếm (search) #2713
   14. Thưởng thức Kết quả (demo version) #2714
10. Kiểm tra
11. Tài liệu tham khảo 4
    1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend HTML CSS JS #2597
    2. SourceCode tham khảo Lập trình web Frontend HTML CSS JS #2610
    3. Các thể loại Menu trong Thiết kế Web #10110
    4. Tổng hợp các công cụ tự sinh Giao diện HTML, CSS, JS tuyệt vời dành cho Nhà phát triển thiết kế Web #10312
12. VueJS 7
    1. VueJS là gì? Ứng dụng của VueJS trong phát triển web FrontEnd #8237
    2. Tìm hiểu Kiến trúc Hệ thống Web MVVM - Model View ViewModel #10161
    3. Component trong VueJS #8238
    4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản #9406
    5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap #8354
    6. Bài tập - Sử dụng Bootstrap và VueJS để thiết kế Trang Tuyển dụng các Vị trí Việc làm Công nghệ #8271
    7. Test #8925
13. UI/UX trong lập trình Web 2
    1. Tìm hiểu về khái niệm UI/UX trong thiết kế ứng dụng #10125
    2. Quy trình Xây dựng, Thiết kế một trang Web #10126
14. CSS Flexbox 1
    1. Tạo cấu trúc Dòng x Cột trong CSS Flexbox #10341
15. Extras 2
    1. Bài tập xử lý lưu trữ dữ liệu với LocalStorage #10427
    2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS #10482
16. Video khóa học 1
    1. Video khóa học toàn tập #11572

Bài học trước Bài học tiếp theo Về trang chủ Về Khóa học

Menu Tiện ích

Trang chủ Chia sẻ Facebook Liên hệ Hỏi đáp/Chat trợ giúp

Menu Hướng dẫn Học tập

• Nhắc nhở
• Các bước cần thực hiện

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Thực hiện các bước tuần tự theo nội dung Bài học nhé!