1
00:00:04,040 --> 00:00:09,465
Đây là thời gian cho bài tập đầu tiên của bạn trong khóa học này.

2
00:00:09,465 --> 00:00:10,975
Trong bài tập đầu tiên,

3
00:00:10,975 --> 00:00:18,605
chúng tôi sẽ cung cấp cho bạn với trang aboutus.html unstyled.

4
00:00:18,605 --> 00:00:22,130
Tệp zip chứa

5
00:00:22,130 --> 00:00:25,670
trang aboutus.html đó có sẵn cho bạn trong hướng dẫn gán.

6
00:00:25,670 --> 00:00:30,530
Vì vậy, bạn cần phải tải về trang và sau đó di chuyển trang đó vào thư mục Fusion con của bạn.

7
00:00:30,530 --> 00:00:33,060
Sau đó, bạn sẽ áp dụng

8
00:00:33,060 --> 00:00:40,970
các lớp Bootstrap và lưới Bootstrap Flexbox để tạo kiểu trang,

9
00:00:41,110 --> 00:00:47,780
sau đó bạn di chuyển trang đến thư mục Con Fusion,

10
00:00:47,780 --> 00:00:52,095
sau đó bạn có thể xem trang trong trình duyệt của bạn bằng cách gõ

11
00:00:52,095 --> 00:01:01,810
localhost:3000/aboutus.html và máy chủ ánh sáng của bạn xây dựng máy chủ lên trang aboutus.html,

12
00:01:01,810 --> 00:01:05,310
vì vậy đây là cách duy nhất bạn có thể xem trang này.

13
00:01:05,310 --> 00:01:06,545
Vì vậy, để bắt

14
00:01:06,545 --> 00:01:08,775
đầu, trang sẽ trông như thế này,

15
00:01:08,775 --> 00:01:12,520
một trang hoàn toàn Unstyle mà chỉ chứa nội dung.

16
00:01:12,520 --> 00:01:20,165
Bây giờ công việc của bạn là trải qua ba nhiệm vụ để định dạng trang này.

17
00:01:20,165 --> 00:01:23,245
Hãy xem xét ba nhiệm vụ một cách chi tiết hơn.

18
00:01:23,245 --> 00:01:26,890
Nhiệm vụ đầu tiên của bạn là áp dụng

19
00:01:26,890 --> 00:01:32,850
Bootstraps CSS và các lớp Javascript vào

20
00:01:32,850 --> 00:01:42,415
trang aboutus.html để trang này sẽ được chuyển đổi ngay lập tức thành trang này,

21
00:01:42,415 --> 00:01:48,470
nơi ngay sau khi bạn thêm các lớp Bootstraps CSS và JavaScript,

22
00:01:48,470 --> 00:01:54,115
đầu trang và chân trang sẽ tự động được định dạng một cách chính xác,

23
00:01:54,115 --> 00:01:59,170
bởi vì tôi đã chỉ đơn giản sao chép tiêu đề trong chân trang từ index.html vào

24
00:01:59,170 --> 00:02:05,140
trang này và tôi đã để lại tất cả các định dạng Bootstrap như vậy,

25
00:02:05,140 --> 00:02:10,955
nhưng nội dung thực tế của trang vẫn còn không được phong cách.

26
00:02:10,955 --> 00:02:14,580
Vì vậy, bây giờ, như là nhiệm vụ thứ hai,

27
00:02:14,580 --> 00:02:19,580
bạn sẽ áp dụng các Bootstraps Flexbox lưới bao gồm Container,

28
00:02:19,580 --> 00:02:23,190
các hàng và các lớp cột cho

29
00:02:23,190 --> 00:02:28,430
nội dung này hoặc trang để bạn có thể phong cách nó đúng cách.

30
00:02:28,430 --> 00:02:30,345
Bây giờ, khi áp dụng các lớp học,

31
00:02:30,345 --> 00:02:36,430
bạn sẽ áp dụng các lớp hàng và cột cho aboutus để chỉ để nó như vậy.

32
00:02:36,430 --> 00:02:40,390
Sau đó, bạn sẽ áp dụng các lớp hàng và cột cho

33
00:02:40,390 --> 00:02:45,445
nội dung này để nội dung này chỉ chiếm một nửa màn hình,

34
00:02:45,445 --> 00:02:48,740
và sau đó bạn sẽ áp dụng các lớp hàng và cột cho

35
00:02:48,740 --> 00:02:53,245
nội dung này để đã chiếm toàn bộ chiều rộng màn hình.

36
00:02:53,245 --> 00:03:00,300
Vì vậy, chọn các lớp hàng và cột một cách chính xác để áp dụng cho điều này.

37
00:03:00,300 --> 00:03:05,220
Bạn có thể sử dụng các lớp CSS tùy chỉnh mà chúng tôi đã

38
00:03:05,220 --> 00:03:10,510
thực hiện cho index.html bằng cách thêm các tập tin style.css,

39
00:03:10,510 --> 00:03:14,765
cũng để phong cách nội dung trong trang này.

40
00:03:14,765 --> 00:03:18,010
Vì vậy, khi bạn hoàn thành nhiệm vụ thứ hai,

41
00:03:18,010 --> 00:03:21,990
trang của bạn sẽ kết thúc được phong cách như thế này.

42
00:03:21,990 --> 00:03:27,290
Vì vậy, bạn có thể thấy rằng trang aboutus tồn tại trong riêng của nó.

43
00:03:27,290 --> 00:03:31,505
Sau đó, phần Lịch sử của chúng tôi,

44
00:03:31,505 --> 00:03:37,800
nhận thấy rằng trên một kích thước màn hình nhỏ đến lớn,

45
00:03:37,800 --> 00:03:43,815
Lịch sử của chúng tôi sẽ chỉ chiếm một nửa chiều rộng màn hình.

46
00:03:43,815 --> 00:03:51,850
Sau đó, phần Lãnh đạo Công ty chiếm toàn bộ chiều rộng màn hình trong trường hợp này.

47
00:03:51,850 --> 00:03:56,000
Đây là nhiệm vụ thứ hai mà bạn cần phải hoàn thành trong nhiệm vụ của mình.

48
00:03:56,000 --> 00:03:59,660
Đối với nhiệm vụ thứ ba như bạn có thể thấy,

49
00:03:59,660 --> 00:04:05,380
bố cục nội dung này có vẻ tốt cho kích thước màn hình lớn hơn,

50
00:04:05,380 --> 00:04:13,240
nhưng khi bạn đi đến kích thước màn hình nhỏ thêm đặc biệt như thế này,

51
00:04:13,240 --> 00:04:20,415
bạn nhận thấy rằng nội dung là quá nhiều trong phần này.

52
00:04:20,415 --> 00:04:27,670
Vì vậy, những gì chúng tôi muốn làm là sử dụng một lớp Bootstrap cung cấp cho chúng tôi gọi là,

53
00:04:27,670 --> 00:04:31,615
[không nghe được] và khối DSM.

54
00:04:31,615 --> 00:04:37,865
Có một liên kết đến các lớp học đáp ứng trong các tài nguyên phân công,

55
00:04:37,865 --> 00:04:44,550
vì vậy bạn có thể kiểm tra tài liệu cho khối [không nghe được] và DSM.

56
00:04:44,550 --> 00:04:49,440
Bạn cần phải áp dụng những điều này để mô tả này sẽ được

57
00:04:49,440 --> 00:04:54,400
ẩn trong các kích thước màn hình nhỏ thêm.

58
00:04:54,400 --> 00:04:59,955
Vì vậy, khi bạn các lớp học để phần lãnh đạo công ty này,

59
00:04:59,955 --> 00:05:06,040
cùng một nội dung bây giờ sẽ được đặt ra mà không có mô tả,

60
00:05:06,040 --> 00:05:10,465
vì vậy nó sẽ được ẩn trong kích thước màn hình nhỏ thêm.

61
00:05:10,465 --> 00:05:14,170
Nhưng khi bạn đi đến kích thước màn hình lớn nhỏ,

62
00:05:14,170 --> 00:05:16,335
nội dung sẽ trở nên hiển thị.

63
00:05:16,335 --> 00:05:21,200
Vì vậy, bạn có thể nhận thấy rằng đối với kích thước màn hình nhỏ thêm,

64
00:05:21,200 --> 00:05:23,760
nội dung bị ẩn,

65
00:05:23,760 --> 00:05:26,170
nhưng đối với kích thước màn hình nhỏ,

66
00:05:26,170 --> 00:05:30,475
nội dung mô tả đó sẽ được hiển thị rõ ràng.

67
00:05:30,475 --> 00:05:35,310
Vì vậy, đây là nhiệm vụ thứ ba của bạn trong nhiệm vụ của bạn.

68
00:05:35,310 --> 00:05:40,175
Trong khi bạn đang ở đó, bạn cũng có thể áp dụng các lớp học tương tự cho

69
00:05:40,175 --> 00:05:45,810
các mô tả trong trang index.html của chúng tôi để

70
00:05:45,810 --> 00:05:51,480
các mô tả chi tiết cho các mục nội dung cũng sẽ được ẩn

71
00:05:51,480 --> 00:05:57,645
trong trang index.html khi nó được xem trên các kích thước màn hình nhỏ thêm.

72
00:05:57,645 --> 00:06:02,090
Điều này hoàn thành nhiệm vụ đầu tiên của bạn.

73
00:06:02,090 --> 00:06:04,965
Ngoài ra, khi bạn gửi bài tập của bạn,

74
00:06:04,965 --> 00:06:14,460
vui lòng chụp ảnh toàn trang bố cục của bạn

75
00:06:14,460 --> 00:06:19,615
ở cả

76
00:06:19,615 --> 00:06:25,930
kích thước màn hình nhỏ đến lớn và kích thước màn hình nhỏ,

77
00:06:25,930 --> 00:06:29,230
và sau đó bao gồm nó như là một phần của bài nộp của bạn.

78
00:06:29,230 --> 00:06:32,420
Để chụp ảnh màn hình đầy đủ trang trong Chrome,

79
00:06:32,420 --> 00:06:36,000
bạn có thể sử dụng tiện ích mở rộng Chrome có sẵn cho chúng tôi,

80
00:06:36,000 --> 00:06:39,305
liên kết đến tiện ích mở rộng Chrome được cung cấp trong

81
00:06:39,305 --> 00:06:45,325
các tài nguyên gán theo mô tả nhiệm vụ.

82
00:06:45,325 --> 00:06:48,555
Sau khi bạn hoàn thành nhiệm vụ của bạn,

83
00:06:48,555 --> 00:06:52,610
trong trường hợp bạn đang lưu các thay đổi của bạn vào một kho Git,

84
00:06:52,610 --> 00:06:55,750
vui lòng đừng quên cam kết các thay đổi vào

85
00:06:55,750 --> 00:07:00,090
kho Git của bạn với Message Assignment One.