1
00:00:00,000 --> 00:00:04,879
[MUSIC]

2
00:00:04,879 --> 00:00:11,307
Front-end Web UI Frameworks đang trở thành phương pháp tiếp cận của họ để

3
00:00:11,307 --> 00:00:16,320
thiết kế và triển khai các trang web gần đây của họ.

4
00:00:16,320 --> 00:00:20,220
Hãy tự hỏi chính xác những gì là Front-end Web UI Frameworks,

5
00:00:20,220 --> 00:00:24,150
và tìm hiểu thêm một chút chi tiết về chúng.

6
00:00:24,150 --> 00:00:27,700
Tiếp theo, vì vậy rõ ràng

7
00:00:27,700 --> 00:00:33,090
trong bài học này chúng ta sẽ tự hỏi mình, các khuôn khổ front-end là gì?

8
00:00:33,090 --> 00:00:34,050
Chúng chứa những gì?

9
00:00:35,130 --> 00:00:38,780
Một số khung giao diện người dùng front-end phổ biến là gì?

10
00:00:38,780 --> 00:00:44,130
Và tại sao chúng ta cần sử dụng khuôn khổ giao diện người dùng front-end khi chúng tôi thiết kế

11
00:00:44,130 --> 00:00:46,460
các trang web của mình?

12
00:00:46,460 --> 00:00:50,410
Vì vậy, Framework giao diện người dùng web front-end là gì?

13
00:00:50,410 --> 00:00:52,800
Chúng ta hãy lùi lại một bước, và

14
00:00:52,800 --> 00:00:57,580
tưởng tượng rằng bạn chỉ biết HTML, CSS và JavaScript.

15
00:00:57,580 --> 00:01:03,540
Nếu bạn được yêu cầu thiết kế một trang web mới, bạn rõ ràng sẽ đi về xây dựng

16
00:01:03,540 --> 00:01:08,510
và triển khai toàn bộ trang web Sử dụng các kỹ năng kỹ thuật mà

17
00:01:08,510 --> 00:01:13,490
bạn có dựa trên kiến thức của bạn về HTML, CSS và JavaScript.

18
00:01:13,490 --> 00:01:16,880
Bạn thường nhận ra rằng có rất nhiều

19
00:01:16,880 --> 00:01:21,580
thành phần lặp đi lặp lại mà bạn sẽ sử dụng trên trang web của bạn.

20
00:01:21,580 --> 00:01:27,590
Và bạn sẽ kết thúc thiết kế tập hợp các lớp CSS của riêng bạn.

21
00:01:27,590 --> 00:01:30,730
Bạn sẽ được thiết kế thành phần dựa trên JavaScript.

22
00:01:30,730 --> 00:01:34,940
Và sau đó một khi bạn có được một nhóm của chúng với nhau,

23
00:01:36,180 --> 00:01:40,770
mỗi khi bạn cần thiết kế một trang web mới, bạn sẽ được sử dụng các

24
00:01:40,770 --> 00:01:45,670
tập hợp được xác định trước của CSS và các

25
00:01:45,670 --> 00:01:49,549
thành phần dựa trên JavaScript để nhanh chóng thực hiện một trang web mới.

26
00:01:50,740 --> 00:01:53,480
Tại sao không đưa điều này đến kết luận hợp lý của nó?

27
00:01:54,750 --> 00:02:00,610
Làm thế nào về, nếu chúng ta thiết kế một toàn bộ khuôn khổ bao gồm

28
00:02:00,610 --> 00:02:07,522
sẵn sàng để sử dụng các thành phần giao diện người dùng HTML, CSS và JavaScript đặt.

29
00:02:07,522 --> 00:02:12,930
Vì vậy, ở đây, một khuôn khổ giao diện người dùng web front-end

30
00:02:12,930 --> 00:02:17,850
có thể xác định một loạt các lớp CSS mà

31
00:02:17,850 --> 00:02:22,905
sẽ cho phép chúng tôi bao gồm các thành phần như Buttons, T

32
00:02:22,905 --> 00:02:27,985
ables, Navigation bar, Dropdowns, Alerts,

33
00:02:27,985 --> 00:02:32,615
Modals, Tabs, Accordions và nhiều hơn nữa.

34
00:02:33,687 --> 00:02:39,027
Và nhanh chóng cho phép chúng tôi thiết kế và thực hiện một trang web.

35
00:02:39,027 --> 00:02:43,887
Vì vậy, đây là những gì một khuôn khổ giao diện người dùng web front-end hoàn thành.

36
00:02:43,887 --> 00:02:47,693
Nó là một bộ sưu tập của tất cả các thành phần này.

37
00:02:47,693 --> 00:02:51,903
Không chỉ vậy, nó còn cung cấp cho bạn một phương pháp xác định

38
00:02:52,903 --> 00:02:58,443
kiểu chữ phù hợp mà bạn có thể sử dụng cho toàn bộ thiết kế trang web của mình.

39
00:02:59,611 --> 00:03:05,702
Và cho phép bạn nhanh chóng giàn giáo

40
00:03:05,702 --> 00:03:09,501
ra một trang web hoặc sân.

41
00:03:10,651 --> 00:03:15,191
Nếu bạn tìm kiếm các framework web front-end,

42
00:03:15,191 --> 00:03:20,341
bạn sẽ tìm thấy rất nhiều trong số họ trên Internet.

43
00:03:21,750 --> 00:03:26,387
Bây giờ một số người đã thực hiện dịch vụ riêng của họ về

44
00:03:26,387 --> 00:03:30,573
tất cả các khung giao diện người dùng web khác nhau, và

45
00:03:30,573 --> 00:03:37,170
đã xuất bản mười danh sách các khung giao diện người dùng front-end hàng đầu của họ.

46
00:03:37,170 --> 00:03:40,290
Đây là một trong những như vậy mà bạn có thể hoặc

47
00:03:40,290 --> 00:03:45,707
có thể không đồng ý với bảng xếp hạng này, nhưng

48
00:03:45,707 --> 00:03:53,920
Bootstrap xảy ra là phổ biến nhất trong số tất cả các khuôn khổ giao diện người dùng web front-end.

49
00:03:53,920 --> 00:03:57,140
Bootstrap luôn xếp hạng là số một

50
00:03:57,140 --> 00:04:01,380
trong nhiều danh sách các khung giao diện người dùng web kết thúc phía trước.

51
00:04:01,380 --> 00:04:06,879
Phần còn lại trong danh sách này có thể khác nhau, nhưng bạn thường sẽ tìm thấy ngữ nghĩa UI,

52
00:04:06,879 --> 00:04:12,450
Foundation by Zerp, Materialize, Material UI, và

53
00:04:12,450 --> 00:04:17,249
một số trong những người khác xuất hiện trong nhiều những danh sách top end.

54
00:04:18,330 --> 00:04:20,060
Câu hỏi rõ ràng tiếp theo là,

55
00:04:20,060 --> 00:04:24,230
tại sao bạn muốn sử dụng khung giao diện người dùng web front-end?

56
00:04:24,230 --> 00:04:30,830
Đầu tiên và quan trọng nhất, họ cung cấp cho bạn một cách nhất quán để thiết kế trang web.

57
00:04:30,830 --> 00:04:34,010
Và, hầu hết các khung front-end này

58
00:04:34,010 --> 00:04:36,730
hỗ trợ những gì được gọi là thiết kế web đáp ứng.

59
00:04:38,040 --> 00:04:43,299
Chúng tôi sẽ xem xét nhiều hơn về thiết kế web đáp ứng trong bài học tiếp theo, nhưng

60
00:04:43,299 --> 00:04:50,610
nhanh chóng tóm tắt nó, bạn không nhận ra rằng trang web

61
00:04:51,780 --> 00:04:56,320
của bạn có thể được truy cập từ nhiều loại thiết bị khác nhau của các trình bảo vệ màn hình khác nhau,

62
00:04:56,320 --> 00:05:01,850
từ điện thoại di động nhỏ đến đến một máy tính để bàn đầy đủ.

63
00:05:01,850 --> 00:05:07,070
Bạn muốn có thể thiết kế trang web của bạn để tự động thích ứng

64
00:05:07,070 --> 00:05:12,260
để phục vụ cho các hạn chế kích thước của mỗi

65
00:05:12,260 --> 00:05:16,490
thiết bị khác nhau, từ đó trang web của bạn đang được truy cập.

66
00:05:16,490 --> 00:05:21,870
Vì vậy, thiết kế web đáp ứng là quan tâm đến khía cạnh này.

67
00:05:21,870 --> 00:05:26,310
Vấn đề thứ hai mà hầu hết các Framework Franken cố gắng

68
00:05:26,310 --> 00:05:30,740
giải quyết là khả năng tương thích chéo trình duyệt.

69
00:05:30,740 --> 00:05:35,790
Nếu bạn đã chơi xung quanh với các trình duyệt nhiều như tôi đã làm,

70
00:05:35,790 --> 00:05:38,930
tôi khá chắc chắn rằng bạn đã nhận ra rằng

71
00:05:38,930 --> 00:05:43,090
không có hai trình duyệt hiển thị cùng một trang web chính xác theo cùng một cách.

72
00:05:43,090 --> 00:05:46,710
Vì vậy, khi bạn thiết kế một trang web để hiển thị nhất quán trên

73
00:05:46,710 --> 00:05:51,466
nhiều trình duyệt khác nhau, bạn sẽ phải đối mặt với một trận chiến khó khăn.

74
00:05:51,466 --> 00:05:56,980
Bây giờ các khung front-end này đã quản lý để giải quyết hầu hết các đặc trưng

75
00:05:56,980 --> 00:06:02,930
của các trình duyệt khác nhau theo cách mà bạn có thể cung cấp kết

76
00:06:02,930 --> 00:06:09,740
xuất phù hợp của trang web của bạn trên các trình duyệt khác nhau.

77
00:06:09,740 --> 00:06:13,290
Vì vậy, đó là lý do thứ hai tại sao bạn có thể muốn sử

78
00:06:13,290 --> 00:06:17,000
dụng khuôn khổ giao diện người dùng Front-End Web.

79
00:06:17,000 --> 00:06:22,930
Và khía cạnh thứ ba của tất nhiên là khi bạn cần thiết kế một trang web,

80
00:06:22,930 --> 00:06:27,050
bạn sẽ luôn phải chịu áp lực thời gian khủng khiếp.

81
00:06:27,050 --> 00:06:29,680
Vì vậy, tăng năng suất của bạn

82
00:06:29,680 --> 00:06:35,450
để bạn không lãng phí năng lượng và thời gian của bạn vào

83
00:06:35,450 --> 00:06:40,600
các vấn đề cấu hình lãng phí của các thành phần riêng lẻ của trang web của bạn.

84
00:06:40,600 --> 00:06:43,470
Thay vào đó, hãy để điều đó được thực hiện

85
00:06:43,470 --> 00:06:47,430
bởi một khuôn khổ giao diện người dùng web front-end được thiết kế nhất quán.

86
00:06:47,430 --> 00:06:53,400
Vì vậy, điều đó giúp bạn tiết kiệm rất nhiều thời gian trong việc triển khai trang web của bạn.

87
00:06:53,400 --> 00:06:54,850
Họ đã bị sa thải.

88
00:06:54,850 --> 00:06:56,450
Và cuối cùng, tất nhiên,

89
00:06:56,450 --> 00:07:03,010
hầu hết các khuôn khổ giao diện người dùng front-end mà tất cả đều có cộng đồng riêng của họ.

90
00:07:03,010 --> 00:07:08,900
Họ là những người dùng sử dụng các khuôn khổ này để triển khai các trang web.

91
00:07:08,900 --> 00:07:14,700
Vì vậy, cộng đồng người dùng này sẽ cung cấp cho bạn một

92
00:07:14,700 --> 00:07:19,560
cách rất hiệu quả để có thể giải quyết các vấn đề mà bạn có thể

93
00:07:19,560 --> 00:07:25,050
gặp phải khi bạn áp dụng bất cứ ai trong khuôn khổ này cho thiết kế trang web của bạn.

94
00:07:25,050 --> 00:07:30,610
Vì vậy, với những lợi thế khác nhau,

95
00:07:30,610 --> 00:07:36,080
tại sao bạn không muốn sử dụng một khuôn khổ giao diện người dùng web front-end?

96
00:07:36,080 --> 00:07:40,697
Với sự hiểu biết này về khung giao diện người dùng web front-end,

97
00:07:40,697 --> 00:07:45,315
bây giờ chúng ta hãy tiếp tục tìm hiểu thêm về Bootstrap,

98
00:07:45,315 --> 00:07:48,840
khung giao diện người dùng web front-end phổ biến nhất.

99
00:07:48,840 --> 00:07:51,809
[ NHẠC]