1 00:00:03,260 --> 00:00:09,800 Willkommen bei Front-End-Web-UI-Frameworks und Tools: Bootstrap 4. 2 00:00:09,800 --> 00:00:13,565 Ich bin froh, dass Sie sich für diesen Kurs entschieden haben, um mehr 3 00:00:13,565 --> 00:00:18,265 über das beliebteste Front-End-Web-UI-Framework zu erfahren: Bootstrap. 4 00:00:18,265 --> 00:00:20,995 Wir werden uns verschiedene Aspekte von Bootstrap ansehen. 5 00:00:20,995 --> 00:00:29,520 Anhand mehrerer Beispiele lernen Sie, indem Sie Übungen im Rahmen dieses Kurses durchführen. 6 00:00:29,520 --> 00:00:32,900 Schauen wir uns ein paar Details als nächstes an. 7 00:00:32,970 --> 00:00:35,890 Bevor Sie mit diesem Kurs beginnen, 8 00:00:35,890 --> 00:00:38,760 stellen Sie bitte sicher, dass Sie über ausreichende Hintergrundinformationen verfügen, 9 00:00:38,760 --> 00:00:41,625 um in diesem Kurs erfolgreich sein zu können. 10 00:00:41,625 --> 00:00:44,455 Sie sollten über gute Kenntnisse in HTML, 11 00:00:44,455 --> 00:00:48,920 CSS und JavaScript verfügen, bevor Sie den Kurs beginnen. 12 00:00:48,920 --> 00:00:54,225 Aus meiner Sicht besteht das Webdesign und die Entwicklung aus zwei Aspekten: 13 00:00:54,225 --> 00:00:58,320 der eine ist das Design der Website und der Webseite, 14 00:00:58,320 --> 00:01:04,610 der zweite ist der eigentliche Aufbau und die Bereitstellung der Webseite selbst. 15 00:01:04,610 --> 00:01:06,845 Aus der Designperspektive 16 00:01:06,845 --> 00:01:13,625 meine ich das Design der Benutzeroberfläche und der Benutzererfahrung, 17 00:01:13,625 --> 00:01:16,815 das visuelle Design, das Prototyping, 18 00:01:16,815 --> 00:01:20,164 die Elemente von Farben, 19 00:01:20,164 --> 00:01:23,815 Grafiken und Animationen, die von Interesse sein könnten. 20 00:01:23,815 --> 00:01:29,645 In dieser Spezialisierung betrachten wir diesen Aspekt der Webentwicklung nicht. 21 00:01:29,645 --> 00:01:32,650 Stattdessen betrachten wir diesen zweiten Aspekt, der 22 00:01:32,650 --> 00:01:34,680 die Entwicklung, den Aufbau und die 23 00:01:34,680 --> 00:01:40,825 Bereitstellung von Websites und Webseiten ist, wobei Technologien 24 00:01:40,825 --> 00:01:45,190 wie die Front-End-Web-UI-Frameworks wie Bootstrap, 25 00:01:45,190 --> 00:01:52,030 vielleicht JavaScript-Framework wie Angular oder eine Bibliothek wie React 26 00:01:52,030 --> 00:01:55,700 und Hybrid Mobile verwendet werden Frameworks, um 27 00:01:55,700 --> 00:02:00,950 mobile Anwendungen zu entwerfen und auch serverseitige Entwicklung mit Node 28 00:02:00,950 --> 00:02:06,670 , Express, MongoDB, dem Hauptstack im Detail. 29 00:02:06,670 --> 00:02:09,530 Wenn Sie sich die Spezialisierung ansehen, 30 00:02:09,530 --> 00:02:13,035 über den Designaspekt der Website nachdenken, 31 00:02:13,035 --> 00:02:16,260 dann möchten Sie vielleicht noch einmal überdenken. 32 00:02:16,260 --> 00:02:19,360 Diese Spezialisierung konzentriert sich auf 33 00:02:19,360 --> 00:02:25,115 die Entwicklung Aufbau und Bereitstellung von Webseiten und Webseiten, 34 00:02:25,115 --> 00:02:31,065 ein rein technisches Wissen über die Verwendung der HTML 35 00:02:31,065 --> 00:02:37,310 , CSS und JavaScript-basierten Fähigkeiten für die eigentliche Website-Entwicklung. 36 00:02:37,310 --> 00:02:43,080 Sie fragen sich wahrscheinlich auch darüber, was mit der Full-Stack-Webentwicklung gemeint ist. 37 00:02:43,080 --> 00:02:48,385 In der nächsten Lektion werden wir uns weitere Details zur vollständigen Stack-Webentwicklung ansehen. 38 00:02:48,385 --> 00:02:52,835 Insbesondere, wenn Sie sich ansehen, wie dieser Kurs 39 00:02:52,835 --> 00:02:57,665 im allgemeinen Kontext der Full-Stack-Webentwicklung positioniert ist, 40 00:02:57,665 --> 00:03:02,790 beschäftigen wir uns in diesem Kurs mit der Entwicklung von Front-End-Web-UI. 41 00:03:02,790 --> 00:03:07,565 Insbesondere das UI Framework Bootstrap 4. 42 00:03:07,565 --> 00:03:10,245 Wir werden uns die verbleibenden Aspekte der 43 00:03:10,245 --> 00:03:15,845 Full-Stack-Webentwicklung im Rest dieser Spezialisierung ansehen. 44 00:03:15,845 --> 00:03:19,640 Dieser Kurs befasst sich mit Bootstrap sehr detailliert. 45 00:03:19,640 --> 00:03:23,640 Wir werden uns auch ansprechendes Webdesign ansehen und wie Bootstrap 46 00:03:23,640 --> 00:03:27,750 Responsive Webdesign durch das Bootstrap Grid-System unterstützt. 47 00:03:27,750 --> 00:03:33,050 Wir werden uns die CSS und JavaScript-basierten Komponenten in Bootstrap ansehen und wie 48 00:03:33,050 --> 00:03:38,660 Sie sie beim Erstellen Ihrer Website und Ihrer Webseiten nutzen können. 49 00:03:38,660 --> 00:03:45,200 Auf dem Weg werden wir über diese Web-Entwicklung über die Befehlszeile lernen. 50 00:03:45,200 --> 00:03:48,570 So lernen wir viele Web-Tools, die 51 00:03:48,570 --> 00:03:52,635 auf der Befehlszeile und dem Ökosystem Node.js basieren. 52 00:03:52,635 --> 00:03:54,630 Wir werden kurz Git überprüfen, 53 00:03:54,630 --> 00:04:03,355 Node.js hinzufügen und auf Noje.js basierende Tools einschließlich Task-Läufer wie Grunt und Gulp schauen. 54 00:04:03,355 --> 00:04:08,235 Dieser Kurs selbst ist in komplette Module gegliedert. 55 00:04:08,235 --> 00:04:12,195 Jedes Modul entspricht ungefähr einer Arbeitswoche. 56 00:04:12,195 --> 00:04:13,830 Im ersten Modul 57 00:04:13,830 --> 00:04:17,795 erhalten wir die große Ansicht der Full-Stack-Webentwicklung, 58 00:04:17,795 --> 00:04:22,895 dann erhalten Sie eine schnelle Einführung in Git und Node.js. 59 00:04:22,895 --> 00:04:29,450 Dann stellen wir Ihnen den Bootstrap vor und überprüfen dann das Bootstrap Grid-System. 60 00:04:29,450 --> 00:04:34,180 Das führt Sie bis zum ersten Auftrag in diesem Kurs. 61 00:04:34,180 --> 00:04:38,520 Das zweite Modul befasst sich mit Bootstrap CSS-Komponenten. 62 00:04:38,520 --> 00:04:42,445 Wir werden uns das Design der Bootstrap-Navigationsleiste ansehen 63 00:04:42,445 --> 00:04:46,875 und wie wir sie nutzen können, um die Navigation zu unterstützen. 64 00:04:46,875 --> 00:04:51,565 Wir werden uns die Benutzereingaben über 65 00:04:51,565 --> 00:04:58,649 Schaltflächen und Formulare ansehen, dann schauen wir uns an, wie wir Inhalte mit Tabellen und Karten anzeigen können. 66 00:04:58,649 --> 00:05:06,340 Dann schauen wir uns an, wie wir Bilder und Medien mithilfe von Bildern, 67 00:05:06,340 --> 00:05:08,590 Miniaturansichten und Medienobjekten in unsere Webseite einbinden können. 68 00:05:08,590 --> 00:05:13,095 Und schließlich schauen wir uns an, wie wir Benutzer mithilfe von Tags, 69 00:05:13,095 --> 00:05:14,680 Warnungen und Fortschrittsbalken alarmieren. 70 00:05:14,680 --> 00:05:19,615 Dies sollte Sie bis zu Ihrem zweiten Auftrag führen. 71 00:05:19,615 --> 00:05:25,425 Das dritte Modul befasst sich mit Bootstrap JavaScript-Komponenten. 72 00:05:25,425 --> 00:05:27,980 Wir werden uns die große Bildansicht ansehen, 73 00:05:27,980 --> 00:05:32,930 wie Bootstrap JavaScript-Komponenten funktionieren, wir werden Tabs, 74 00:05:32,930 --> 00:05:34,635 Pillen und Tabbed Navigation überprüfen, 75 00:05:34,635 --> 00:05:40,874 dann werden wir sehen, wie Zusammenbruch und Akkordeon verwendet werden können, um Inhalte anzuzeigen und auszublenden. 76 00:05:40,874 --> 00:05:43,730 Und dann schauen wir uns die Verwendung von Tooltips, 77 00:05:43,730 --> 00:05:48,610 Popovers und Modals an, um Inhalte anzuzeigen, die auf Ihrer Seite angezeigt werden. 78 00:05:48,610 --> 00:05:52,230 Und dann schauen wir uns die Karussellkomponente an 79 00:05:52,230 --> 00:05:58,235 , mit der Sie Gleitinformationen auf Ihrer Webseite anzeigen können. 80 00:05:58,235 --> 00:06:02,670 Dies sollte Sie bis zum dritten Auftrag in diesem Kurs führen. 81 00:06:02,670 --> 00:06:11,625 Das letzte Modul befasst sich mit Bootstrap und der jQuery und verschiedenen Dev-Tools. 82 00:06:11,625 --> 00:06:17,070 Wir werden uns insbesondere ansehen, wie Bootstrap und jQuery interagieren und wie Sie 83 00:06:17,070 --> 00:06:23,535 jQuery und JavaScript-Code schreiben können, um Ihre Bootstrap JavaScript-Komponente zu steuern. 84 00:06:23,535 --> 00:06:28,230 Wir betrachten die verschiedenen Methoden, die von den Bootstrap JavaScript-Komponenten unterstützt werden, 85 00:06:28,230 --> 00:06:31,510 die verwendet werden können, um 86 00:06:31,510 --> 00:06:35,735 JavaScript-Code zu schreiben, um das Verhalten dieser Komponenten zu steuern. 87 00:06:35,735 --> 00:06:44,509 Dann werden wir CSS Pre-Processing Sprache ist wie LESS und Sass überprüfen. 88 00:06:44,509 --> 00:06:49,675 Schließlich werden wir uns ansehen, wie wir unsere Website 89 00:06:49,675 --> 00:06:57,345 mithilfe von NPM-Skripten oder Task-Läufern wie Grunt und Gulp erstellen und bereitstellen können. 90 00:06:57,345 --> 00:07:03,485 Dies sollte Sie bis zum endgültigen Auftrag in diesem Kurs führen. 91 00:07:03,485 --> 00:07:06,990 Ich hoffe, Sie werden viel Spaß haben, 92 00:07:06,990 --> 00:07:12,920 die verschiedenen Teile dieses Kurses zu machen und auch die Übungen genießen, die Sie in 93 00:07:12,920 --> 00:07:16,850 jeder Phase begegnen, die es Ihnen ermöglichen, 94 00:07:16,850 --> 00:07:23,430 verschiedene Aspekte des Bootstrap-Web-UI-Frameworks besser zu verstehen.