Step 1: Tạo cấu trúc thư mục dự án

  • Mục tiêu của việc tạo cấu trúc dự án giúp cho Việc quản lý các tập tin (các file code HTML, CSS, JS; các file Media, Hình ảnh, Âm thanh, Video) được gọn gàng, dễ dàng phát triển, thuận lợi trong làm việc nhóm.
  • Có nhiều cách tạo cấu trúc thư mục dự án, sau đây là gợi ý về cách tổ chức Source code.
  • Tạo cấu trúc thư mục dự án theo đề nghị như sau:
website-netashop/                            <- Thư mục gốc của dự án
+---assets/                                  <- Thư mục chứa các file Css, Js, Image, Video, ...
|   \---img/                                 <- Thư mục chứa các ảnh dùng cho Trang web  
|   \---video/                               <- Thư mục chứa các file video dùng cho Trang web
|   \---css/                                 <- Thư mục chứa các file CSS do chúng ta tự viết
|   \---js/                                  <- Thư mục chứa các file JS do chúng ta tự viết
\---vendor/                                  <- Thư mục chứa các thư viện (library) do các nhà cung cấp (vendor) / bên thứ 3 (3rd party)
    +---bootstrap/                           <- Thư viện Bootstrap
    |   +---css/
    |   \---js/
    \---jquery/                              <- Thư viện JQuery
    \---popperjs/                            <- Thư viện PopperJS
\---index.html                               <- File sẽ được chạy đầu tiên khi truy cập vào Trang web, thường đặt tên là index (hay còn gọi là Trang chủ)
  • Hoặc download file "CauTrucThuMucDuAn_WebCoBan.zip" và giải nén ra: duan

Step 2: download resources (ảnh, video, âm thanh, ...) sử dụng trong Dự án

Step 3: download thư viện Bootstrap và JQuery

Bootstrap

Jquery

  • Bootstrap sử dụng cú pháp Jquery để viết. Nên chúng ta sẽ cần thư viện Jquery đi kèm.
  • Truy cập: https://jquery.com/ hoặc "Click vào đây" (phiên bản mới nhất 3.4.1)
  • Lưu vào trong /vendor/jquery/jquery.min.js

Font Awesome 4.7

  • FontAwesome là thư viện về icon nổi tiếng trong cộng động thiết kế web. Icon được thiết kế như là font chữ, nên chúng ta có thể dễ dàng tùy chỉnh màu sắc, kích cỡ bằng các thuộc tính của CSS như color, font-size
  • Truy cập: https://fontawesome.com/v4.7.0 hoặc "Click vào đây" (phiên bản 4.7)
  • Giải nén, chép vào thư mục /vendor/font-awesome/

PopperJS

Step 4: tạo một trang HTML đơn giản

  • Tạo file index.html vời nội dung như sau:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap lesson 1</title>
</head>

<body>
    
</body>

</html>

Step 5: liên kết thư viện Bootstrap, JQuery, Font Awesome và PopperJS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap lesson 1 | Nền tảng Kiến thức</title>

    <!-- Liên kết CSS Bootstrap -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

    <!-- Font awesome -->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css" type="text/css">

    <!-- Custom css - Các file css do chúng ta tự viết -->
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
</head>

<body>
    

    <!-- Liên kết Jquery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- Liên kết PopperJS -->
    <script src="vendor/popperjs/popper.min.js"></script>

    <!-- Liên kết Bootstrap -->
    <script src="vendor/bootstrap/js/bootstrap.js"></script>

    <!-- Custom script - Các file js do mình tự viết -->
    <script src="assets/js/app.js"></script>
</body>

</html>