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

2
00:00:04,879 --> 00:00:11,307
Front-End-Web-UI-Frameworks werden zu ihrem Go-to-Ansatz für die

3
00:00:11,307 --> 00:00:16,320
Gestaltung und Implementierung ihrer aktuellen Websites.

4
00:00:16,320 --> 00:00:20,220
Lassen Sie uns fragen, was genau Front-End-Web-UI-Frameworks sind,

5
00:00:20,220 --> 00:00:24,150
und lernen Sie ein wenig mehr Details über sie.

6
00:00:24,150 --> 00:00:27,700
Als nächstes werden

7
00:00:27,700 --> 00:00:33,090
wir uns also natürlich in dieser Lektion fragen, was sind Front-End-Frameworks?

8
00:00:33,090 --> 00:00:34,050
Was enthalten sie?

9
00:00:35,130 --> 00:00:38,780
Was sind einige der beliebten Front-End-UI-Frameworks?

10
00:00:38,780 --> 00:00:44,130
Und warum müssen wir Front-End-UI-Frameworks nutzen, wenn wir

11
00:00:44,130 --> 00:00:46,460
unsere Websites entwerfen?

12
00:00:46,460 --> 00:00:50,410
Was sind Front-End-Web-UI-Frameworks?

13
00:00:50,410 --> 00:00:52,800
Machen wir einen Schritt rückwärts und

14
00:00:52,800 --> 00:00:57,580
stellen Sie sich vor, dass Sie nur HTML, CSS und JavaScript kennen.

15
00:00:57,580 --> 00:01:03,540
Wenn Sie aufgefordert werden, eine neue Website zu entwerfen, würden Sie natürlich über die Konstruktion

16
00:01:03,540 --> 00:01:08,510
und Implementierung der gesamten Website gehen. Verwenden Sie die technischen Fähigkeiten, die

17
00:01:08,510 --> 00:01:13,490
Sie auf Ihren Kenntnissen in HTML, CSS und JavaScript basieren.

18
00:01:13,490 --> 00:01:16,880
Sie würden oft erkennen, dass es viele

19
00:01:16,880 --> 00:01:21,580
wiederholte Komponenten, die Sie auf Ihrer Website verwenden würden.

20
00:01:21,580 --> 00:01:27,590
Und Sie würden am Ende Ihren eigenen Satz von CSS-Klassen entwerfen.

21
00:01:27,590 --> 00:01:30,730
Sie werden JavaScript-basierte Komponente entwerfen.

22
00:01:30,730 --> 00:01:34,940
Und dann, wenn Sie eine Gruppe von diesen zusammen bekommen,

23
00:01:36,180 --> 00:01:40,770
jedes Mal, wenn Sie eine neue Website entwerfen müssen, würden Sie diese

24
00:01:40,770 --> 00:01:45,670
vordefinierten Sätze von CSS-Klassen und

25
00:01:45,670 --> 00:01:49,549
JavaScript-basierten Komponenten verwenden, um schnell eine neue Website zu implementieren.

26
00:01:50,740 --> 00:01:53,480
Warum nicht zu seiner logischen Schlussfolgerung führen?

27
00:01:54,750 --> 00:02:00,610
Wie wäre es, wenn wir ein ganzes Framework entwerfen, das

28
00:02:00,610 --> 00:02:07,522
bereit ist, HTML, CSS und JavaScript platziert Web-UI-Komponenten zu verwenden.

29
00:02:07,522 --> 00:02:12,930
Also, hier, ein Front-End-Web-UI-Framework

30
00:02:12,930 --> 00:02:17,850
kann eine Reihe von CSS-Klassen definieren,

31
00:02:17,850 --> 00:02:22,905
die es uns ermöglichen, Komponenten wie Buttons,

32
00:02:22,905 --> 00:02:27,985
Tabellen, Navigationsleisten, Dropdowns, Warnungen,

33
00:02:27,985 --> 00:02:32,615
Modals, Tabs, Akkordeons und viele mehr einzubeziehen.

34
00:02:33,687 --> 00:02:39,027
Und ermöglichen es uns schnell, eine Website zu entwerfen und zu implementieren.

35
00:02:39,027 --> 00:02:43,887
Dies ist also, was ein Front-End-Web-UI-Framework erreicht.

36
00:02:43,887 --> 00:02:47,693
Es ist eine Sammlung all dieser Komponenten.

37
00:02:47,693 --> 00:02:51,903
Nicht nur das, es gibt Ihnen eine Methode,

38
00:02:52,903 --> 00:02:58,443
konsistente Typografie zu definieren, die Sie für Ihr gesamtes Website-Design verwenden können.

39
00:02:59,611 --> 00:03:05,702
Und ermöglicht es Ihnen, schnell Gerüst

40
00:03:05,702 --> 00:03:09,501
aus einer Website oder dem Spielfeld.

41
00:03:10,651 --> 00:03:15,191
Wenn Sie nach Front-End-Web-Frameworks

42
00:03:15,191 --> 00:03:20,341
suchen, würden Sie eine Fülle von ihnen im Internet finden.

43
00:03:21,750 --> 00:03:26,387
Nun haben mehrere Leute ihren eigenen Dienst für

44
00:03:26,387 --> 00:03:30,573
all diese verschiedenen Web-UI-Frameworks gemacht und

45
00:03:30,573 --> 00:03:37,170
ihre Top-Ten-Listen von Front-End-UI-Frameworks veröffentlicht.

46
00:03:37,170 --> 00:03:40,290
Dies ist eine solche, dass Sie

47
00:03:40,290 --> 00:03:45,707
mit diesem Ranking einverstanden sind oder nicht, aber

48
00:03:45,707 --> 00:03:53,920
Bootstrap ist zufällig das beliebteste unter allen Front-End-Web-UI-Frameworks.

49
00:03:53,920 --> 00:03:57,140
Bootstrap wird

50
00:03:57,140 --> 00:04:01,380
in vielen Listen der Front-End-Web-UI-Frameworks konsequent als Nummer eins eingestuft.

51
00:04:01,380 --> 00:04:06,879
Die verbleibenden unter dieser Liste können variieren, aber Sie würden oft Semantic-UI,

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

53
00:04:12,450 --> 00:04:17,249
einige dieser anderen in vielen dieser Top-End-Listen erscheinen.

54
00:04:18,330 --> 00:04:20,060
Die nächste offensichtliche Frage ist,

55
00:04:20,060 --> 00:04:24,230
warum sollten Sie Front-End-Web-UI-Frameworks verwenden?

56
00:04:24,230 --> 00:04:30,830
In erster Linie bieten sie Ihnen eine konsistente Art und Weise, Websites zu gestalten.

57
00:04:30,830 --> 00:04:34,010
Und die meisten dieser Front-End-Frameworks

58
00:04:34,010 --> 00:04:36,730
unterstützen das sogenannte Responsive Webdesign.

59
00:04:38,040 --> 00:04:43,299
Wir werden mehr über responsive Webdesign in der nächsten Lektion untersuchen, aber

60
00:04:43,299 --> 00:04:50,610
schnell zusammenfassen, Sie wissen nicht, dass auf Ihre Website von

61
00:04:51,780 --> 00:04:56,320
verschiedenen Arten von Geräten verschiedener Bildschirmschoner zugegriffen werden kann,

62
00:04:56,320 --> 00:05:01,850
von kleinen Mobiltelefonen bis hin zu einem vollwertigen Desktop.

63
00:05:01,850 --> 00:05:07,070
Sie möchten in der Lage sein, Ihre Website so zu gestalten, dass sie

64
00:05:07,070 --> 00:05:12,260
sich automatisch an die Größenbeschränkungen jedes dieser

65
00:05:12,260 --> 00:05:16,490
verschiedenen Geräte anpassen kann, von denen aus auf Ihre Website zugegriffen wird.

66
00:05:16,490 --> 00:05:21,870
Responsive Webdesign ist also besorgt über diesen Aspekt.

67
00:05:21,870 --> 00:05:26,310
Das zweite Problem, das die meisten dieser Franken Frameworks zu

68
00:05:26,310 --> 00:05:30,740
adressieren versuchen, ist die Cross-Browser-Kompatibilität.

69
00:05:30,740 --> 00:05:35,790
Wenn Sie so viel wie ich mit Browsern gespielt haben,

70
00:05:35,790 --> 00:05:38,930
bin ich mir ziemlich sicher, dass Sie gekommen sind, um zu erkennen, dass

71
00:05:38,930 --> 00:05:43,090
keine zwei Browser die gleiche Website genau auf die gleiche Weise rendern.

72
00:05:43,090 --> 00:05:46,710
Also, wenn Sie eine Website entwerfen, um konsequent über

73
00:05:46,710 --> 00:05:51,466
viele verschiedene Browser zu rendern, werden Sie vor einem Anstieg Kampf.

74
00:05:51,466 --> 00:05:56,980
Nun haben diese Front-End-Frameworks es geschafft, die meisten dieser

75
00:05:56,980 --> 00:06:02,930
Eigenheiten der verschiedenen Browser so anzugehen, dass Sie

76
00:06:02,930 --> 00:06:09,740
konsistentes Rendern Ihrer Website auf verschiedenen Browsern liefern können.

77
00:06:09,740 --> 00:06:13,290
Das ist also der zweite Grund, warum Sie möglicherweise auf

78
00:06:13,290 --> 00:06:17,000
ein Front-End-Web-UI-Framework zurückgreifen möchten.

79
00:06:17,000 --> 00:06:22,930
Und der dritte Aspekt ist natürlich, dass Sie, wenn Sie eine Website entwerfen müssen,

80
00:06:22,930 --> 00:06:27,050
immer unter schrecklichem Zeitdruck stehen.

81
00:06:27,050 --> 00:06:29,680
So steigern Sie Ihre Produktivität

82
00:06:29,680 --> 00:06:35,450
, damit Sie Ihre Energie und Zeit nicht mit verschwenderischen

83
00:06:35,450 --> 00:06:40,600
Konfigurationsproblemen dieser einzelnen Komponenten Ihrer Website verschwenden.

84
00:06:40,600 --> 00:06:43,470
Lassen Sie sich stattdessen von

85
00:06:43,470 --> 00:06:47,430
einem konsistent entworfenen Front-End-Web-UI-Framework kümmern.

86
00:06:47,430 --> 00:06:53,400
So sparen Sie viel Zeit in Bezug auf die Implementierung Ihrer Website.

87
00:06:53,400 --> 00:06:54,850
Sie haben geplündert.

88
00:06:54,850 --> 00:06:56,450
Und schließlich, natürlich,

89
00:06:56,450 --> 00:07:03,010
die meisten dieser Front-End-UI-Frameworks, die alle dort sind, haben ihre eigene Community.

90
00:07:03,010 --> 00:07:08,900
Sie sind Benutzer, die diese Frameworks für die Implementierung von Websites verwenden.

91
00:07:08,900 --> 00:07:14,700
Diese Community von Benutzern bietet Ihnen eine sehr

92
00:07:14,700 --> 00:07:19,560
effiziente Möglichkeit, Probleme zu lösen, die

93
00:07:19,560 --> 00:07:30,610
auftreten können, wenn Sie jemanden dieser Frameworks für Ihr Website-Design anwenden.

94
00:07:30,610 --> 00:07:36,080
Warum sollten Sie angesichts dieser verschiedenen Vorteile nicht auf ein Front-End-Web-UI-Framework zurückgreifen?

95
00:07:36,080 --> 00:07:40,697
Mit diesem Verständnis von Front-End-Web-UI-Frameworks,

96
00:07:40,697 --> 00:07:45,315
lassen Sie uns jetzt fortfahren, um mehr über Bootstrap zu erfahren,

97
00:07:45,315 --> 00:07:48,840
das beliebteste Front-End-Web-UI-Framework.

98
00:07:48,840 --> 00:07:51,809
( MUSIK)