1
00:00:03,260 --> 00:00:09,800
Chào mừng bạn đến với Frameworks giao diện người dùng Web Frameworks và công cụ: Bootstrap 4.

2
00:00:09,800 --> 00:00:13,565
Tôi rất vui vì bạn đã quyết định tham gia khóa học này để tìm hiểu

3
00:00:13,565 --> 00:00:18,265
về Framework Web giao diện người dùng phổ biến nhất: Bootstrap.

4
00:00:18,265 --> 00:00:20,995
Chúng ta sẽ xem xét các khía cạnh khác nhau của Bootstrap.

5
00:00:20,995 --> 00:00:29,520
Thông qua một số ví dụ, bạn sẽ học bằng cách thực hiện các bài tập như một phần của khóa học này.

6
00:00:29,520 --> 00:00:32,900
Hãy xem xét một số chi tiết tiếp theo.

7
00:00:32,970 --> 00:00:35,890
Trước khi bạn bắt đầu khóa học này,

8
00:00:35,890 --> 00:00:38,760
hãy chắc chắn rằng bạn có đủ nền tảng để có

9
00:00:38,760 --> 00:00:41,625
thể thành công trong khóa học này.

10
00:00:41,625 --> 00:00:44,455
Bạn nên có kiến thức tốt về HTML

11
00:00:44,455 --> 00:00:48,920
, CSS và JavaScript trước khi bắt đầu khóa học.

12
00:00:48,920 --> 00:00:54,225
Theo quan điểm của tôi, thiết kế và phát triển web bao gồm hai khía cạnh:

13
00:00:54,225 --> 00:00:58,320
một là thiết kế của trang web và trang web,

14
00:00:58,320 --> 00:01:04,610
thứ hai là xây dựng và triển khai thực tế của chính trang web.

15
00:01:04,610 --> 00:01:06,845
Từ góc độ thiết kế,

16
00:01:06,845 --> 00:01:13,625
ý tôi là thiết kế giao diện người dùng và trải nghiệm người dùng,

17
00:01:13,625 --> 00:01:16,815
thiết kế trực quan, tạo mẫu,

18
00:01:16,815 --> 00:01:20,164
các yếu tố của màu sắc,

19
00:01:20,164 --> 00:01:23,815
đồ họa và hoạt hình có thể được quan tâm.

20
00:01:23,815 --> 00:01:29,645
Trong chuyên môn này, chúng tôi không nhìn vào khía cạnh này của phát triển web.

21
00:01:29,645 --> 00:01:32,650
Thay vào đó, chúng ta đang nhìn vào khía cạnh thứ hai

22
00:01:32,650 --> 00:01:34,680
đó, đó là sự phát triển, xây dựng,

23
00:01:34,680 --> 00:01:40,825
và triển khai các trang web và trang web, sử dụng

24
00:01:40,825 --> 00:01:45,190
các công nghệ như khung giao diện người dùng web phía trước như Bootstrap,

25
00:01:45,190 --> 00:01:52,030
có thể là khung JavaScript như Angular hoặc thư viện như React

26
00:01:52,030 --> 00:01:55,700
và di động lai để thiết kế các

27
00:01:55,700 --> 00:02:00,950
ứng dụng di động và cũng phát triển phía máy chủ sử dụng Node

28
00:02:00,950 --> 00:02:06,670
, Express, MongoDB, ngăn xếp chính chi tiết hơn.

29
00:02:06,670 --> 00:02:09,530
Nếu bạn đang nhìn vào Chuyên môn hóa,

30
00:02:09,530 --> 00:02:13,035
suy nghĩ về khía cạnh thiết kế của trang web,

31
00:02:13,035 --> 00:02:16,260
sau đó bạn có thể muốn suy nghĩ lại.

32
00:02:16,260 --> 00:02:19,360
Chuyên môn hóa này tập trung vào

33
00:02:19,360 --> 00:02:25,115
việc xây dựng và triển khai trang web và trang web,

34
00:02:25,115 --> 00:02:31,065
một kiến thức hoàn toàn kỹ thuật về việc sử dụng các

35
00:02:31,065 --> 00:02:37,310
kỹ năng dựa trên HTML, CSS và JavaScript để phát triển trang web thực tế.

36
00:02:37,310 --> 00:02:43,080
Bạn cũng có thể tự hỏi về những gì có nghĩa là do phát triển web stack đầy đủ.

37
00:02:43,080 --> 00:02:48,385
Chúng ta sẽ xem xét thêm chi tiết về phát triển web stack đầy đủ trong bài học tiếp theo.

38
00:02:48,385 --> 00:02:52,835
Đặc biệt, nếu bạn đang xem xét cách khóa học này được

39
00:02:52,835 --> 00:02:57,665
định vị trong bối cảnh chung của phát triển web stack đầy đủ,

40
00:02:57,665 --> 00:03:02,790
trong khóa học này, chúng tôi đang đối phó với việc phát triển giao diện người dùng web fronend.

41
00:03:02,790 --> 00:03:07,565
Đặc biệt, giao diện người dùng Framework Bootstrap 4.

42
00:03:07,565 --> 00:03:10,245
Chúng tôi sẽ xem xét các khía cạnh còn lại của

43
00:03:10,245 --> 00:03:15,845
phát triển web stack đầy đủ trong phần còn lại của chuyên môn hóa này.

44
00:03:15,845 --> 00:03:19,640
Khóa học này xem xét Bootstrap rất chi tiết.

45
00:03:19,640 --> 00:03:23,640
Chúng tôi cũng sẽ xem xét thiết kế web đáp ứng và cách Bootstrap hỗ trợ

46
00:03:23,640 --> 00:03:27,750
thiết kế web đáp ứng thông qua hệ thống Bootstrap Grid.

47
00:03:27,750 --> 00:03:33,050
Chúng tôi sẽ xem xét các thành phần dựa trên CSS và JavaScript trong Bootstrap và cách bạn

48
00:03:33,050 --> 00:03:38,660
có thể sử dụng chúng trong việc xây dựng trang web và trang web của bạn.

49
00:03:38,660 --> 00:03:45,200
Trên đường đi, chúng ta sẽ tìm hiểu về việc phát triển web đó bằng cách sử dụng dòng lệnh.

50
00:03:45,200 --> 00:03:48,570
Vì vậy, chúng ta sẽ học được rất nhiều công cụ web

51
00:03:48,570 --> 00:03:52,635
dựa trên dòng lệnh và hệ sinh thái Node.js.

52
00:03:52,635 --> 00:03:54,630
Chúng tôi sẽ xem xét ngắn gọn Git,

53
00:03:54,630 --> 00:04:03,355
thêm Node.js và nhìn vào Noje.js dựa công cụ bao gồm các vận động viên nhiệm vụ như Grunt và Gulp.

54
00:04:03,355 --> 00:04:08,235
Khóa học này, chính nó, được cấu trúc thành các mô-đun đầy đủ.

55
00:04:08,235 --> 00:04:12,195
Mỗi mô-đun tương ứng với một tuần làm việc.

56
00:04:12,195 --> 00:04:13,830
Trong mô-đun đầu tiên,

57
00:04:13,830 --> 00:04:17,795
chúng tôi sẽ nhận được hình ảnh lớn về phát triển web stack đầy đủ,

58
00:04:17,795 --> 00:04:22,895
sau đó bạn sẽ nhận được một giới thiệu nhanh về Git và Node.js.

59
00:04:22,895 --> 00:04:29,450
Sau đó, chúng tôi sẽ giới thiệu bạn với Bootstrap và sau đó xem lại hệ thống Bootstrap Grid.

60
00:04:29,450 --> 00:04:34,180
Điều đó sẽ dẫn bạn đến nhiệm vụ đầu tiên trong khóa học này.

61
00:04:34,180 --> 00:04:38,520
Mô-đun thứ hai giao dịch với các thành phần Bootstrap CSS.

62
00:04:38,520 --> 00:04:42,445
Chúng ta sẽ xem xét thiết kế của thanh điều hướng Bootstrap

63
00:04:42,445 --> 00:04:46,875
và làm thế nào chúng ta có thể sử dụng nó để hỗ trợ điều hướng.

64
00:04:46,875 --> 00:04:51,565
Chúng ta sẽ xem xét đầu vào người dùng thông qua

65
00:04:51,565 --> 00:04:58,649
các nút và biểu mẫu sau đó chúng ta sẽ xem xét cách chúng ta có thể hiển thị nội dung bằng cách sử dụng bảng và thẻ.

66
00:04:58,649 --> 00:05:06,340
Sau đó, chúng ta sẽ xem xét cách chúng ta có thể đưa hình ảnh và phương tiện vào trang Web của chúng tôi bằng cách sử dụng hình ảnh, hình

67
00:05:06,340 --> 00:05:08,590
thu nhỏ và các đối tượng phương tiện.

68
00:05:08,590 --> 00:05:13,095
Và sau đó, cuối cùng, chúng ta nhìn vào cách chúng ta cảnh báo người dùng bằng cách sử dụng thẻ,

69
00:05:13,095 --> 00:05:14,680
cảnh báo và thanh tiến trình.

70
00:05:14,680 --> 00:05:19,615
Điều này sẽ dẫn bạn đến nhiệm vụ thứ hai của bạn.

71
00:05:19,615 --> 00:05:25,425
Mô-đun thứ ba giao dịch với các thành phần JavaScript Bootstrap.

72
00:05:25,425 --> 00:05:27,980
Chúng ta sẽ xem xét

73
00:05:27,980 --> 00:05:32,930
cách thức hoạt động của các thành phần Bootstrap JavaScript, chúng ta sẽ xem xét các tab,

74
00:05:32,930 --> 00:05:34,635
thuốc viên và điều hướng theo tab,

75
00:05:34,635 --> 00:05:40,874
sau đó chúng ta sẽ xem xét cách thu gọn và accordion có thể được sử dụng để hiển thị và ẩn nội dung.

76
00:05:40,874 --> 00:05:43,730
Và sau đó chúng ta sẽ xem xét việc sử dụng các chú giải công cụ,

77
00:05:43,730 --> 00:05:48,610
pover và phương thức để tiết lộ nội dung được hiển thị trong trang của bạn.

78
00:05:48,610 --> 00:05:52,230
Và sau đó chúng ta sẽ xem xét thành phần băng chuyền,

79
00:05:52,230 --> 00:05:58,235
cho phép bạn hiển thị thông tin trượt trên trang web của bạn.

80
00:05:58,235 --> 00:06:02,670
Điều này sẽ dẫn bạn đến nhiệm vụ thứ ba trong khóa học này.

81
00:06:02,670 --> 00:06:11,625
Các mô-đun cuối cùng giao dịch với Bootstrap và jQuery và các công cụ dev khác nhau.

82
00:06:11,625 --> 00:06:17,070
Đặc biệt, chúng ta sẽ xem xét cách Bootstrap và jQuery tương tác và cách bạn có thể

83
00:06:17,070 --> 00:06:23,535
viết mã jQuery và JavaScript để kiểm soát thành phần Bootstrap JavaScript của bạn.

84
00:06:23,535 --> 00:06:28,230
Chúng ta xem xét các phương pháp khác nhau được hỗ trợ bởi các thành phần JavaScript Bootstrap,

85
00:06:28,230 --> 00:06:31,510
có thể được tận dụng để viết

86
00:06:31,510 --> 00:06:35,735
mã JavaScript để kiểm soát hành vi của các thành phần này.

87
00:06:35,735 --> 00:06:44,509
Sau đó, chúng tôi sẽ xem xét CSS pre-processing ngôn ngữ giống như LESS và Sass.

88
00:06:44,509 --> 00:06:49,675
Sau đó, cuối cùng, chúng ta sẽ xem xét làm thế nào chúng ta có thể xây dựng và triển khai trang web của chúng tôi

89
00:06:49,675 --> 00:06:57,345
bằng cách sử dụng kịch bản NPM hoặc chạy tác vụ như Grunt và Gulp.

90
00:06:57,345 --> 00:07:03,485
Điều này sẽ đưa bạn đến tất cả các bài tập cuối cùng trong khóa học này.

91
00:07:03,485 --> 00:07:06,990
Tôi hy vọng bạn sẽ có rất nhiều niềm vui khi thực hiện

92
00:07:06,990 --> 00:07:12,920
các phần khác nhau của khóa học này và cũng có thể tận hưởng các bài tập mà bạn sẽ

93
00:07:12,920 --> 00:07:16,850
gặp phải ở mỗi giai đoạn cho phép bạn

94
00:07:16,850 --> 00:07:23,430
hiểu rõ hơn các khía cạnh khác nhau của khung giao diện người dùng web Bootstrap.