1 00:00:01,090 --> 00:00:02,290 ‫Instruktur: Sekarang mari 2 00:00:02,290 --> 00:00:04,750 ‫kita mulai benar-benar membuat template dasar kita. 3 00:00:04,750 --> 00:00:07,490 ‫Jadi template yang menjadi dasar semua 4 00:00:07,490 --> 00:00:09,360 ‫template lainnya nanti. 5 00:00:09,360 --> 00:00:12,723 ‫Jadi pada dasarnya, kita akan mengonversi file html 6 00:00:12,723 --> 00:00:16,163 ‫biasa, yang ada di file starter menjadi template Pug. 7 00:00:17,840 --> 00:00:19,830 ‫Jadi pada dasarnya, kita akan 8 00:00:19,830 --> 00:00:21,850 ‫mulai membuat tata letak halaman ini. 9 00:00:21,850 --> 00:00:26,450 ‫Jadi header ini di sini dan juga footer. 10 00:00:26,450 --> 00:00:28,650 ‫Oke, bukan isinya tentu saja, 11 00:00:28,650 --> 00:00:31,710 ‫karena itu nanti kita akan membangun lebih dinamis 12 00:00:31,710 --> 00:00:33,440 ‫sedikit lagi, oke. 13 00:00:33,440 --> 00:00:35,220 ‫Tapi kami akan membiarkan 14 00:00:35,220 --> 00:00:38,920 ‫semuanya siap, sehingga kami kemudian dapat menyuntikkan semua konten nyata 15 00:00:38,920 --> 00:00:41,053 ‫ini ke dalam template dasar keseluruhan. 16 00:00:43,030 --> 00:00:45,440 ‫Jadi, ayo lakukan sekarang. 17 00:00:45,440 --> 00:00:47,650 ‫Dan mari kita mulai dengan menyingkirkan 18 00:00:47,650 --> 00:00:50,090 ‫semua konten yang kita miliki di sini. 19 00:00:50,090 --> 00:00:51,810 ‫Jadi ini benar-benar hanya 20 00:00:51,810 --> 00:00:54,550 ‫untuk menunjukkan kepada Anda berbagai fitur Pug. 21 00:00:54,550 --> 00:00:58,070 ‫Dan sekarang, mari kita buka ikhtisar ini. html, sehingga pada 22 00:00:58,070 --> 00:01:01,463 ‫dasarnya kita dapat mengonversinya di sini ke Pug. 23 00:01:02,420 --> 00:01:05,370 ‫Oke, itu tadi file html asli yang saya 24 00:01:05,370 --> 00:01:08,360 ‫buat untuk mendesain halaman ikhtisar yang baru saja 25 00:01:08,360 --> 00:01:10,610 ‫kita lihat dirender secara dinamis. 26 00:01:10,610 --> 00:01:13,810 ‫Oke, jadi inilah yang ada di kepala kita 27 00:01:13,810 --> 00:01:17,950 ‫dan mari kita lanjutkan dan salin seluruh kode ini, sehingga kita 28 00:01:17,950 --> 00:01:21,053 ‫dapat mengonversi apa yang hilang di sini. 29 00:01:22,610 --> 00:01:26,573 ‫Oke, jadi isi dari judul kita ini, jadi 30 00:01:27,420 --> 00:01:29,973 ‫mari kita salin, lalu 31 00:01:33,460 --> 00:01:37,980 ‫singkirkan, dan jadi ini adalah isi halaman utama, kan. 32 00:01:37,980 --> 00:01:42,150 ‫Kemudian kita sudah memiliki favicon, dan juga style. 33 00:01:42,150 --> 00:01:44,980 ‫Jadi apa yang kami lewatkan pada dasarnya adalah 34 00:01:44,980 --> 00:01:46,990 ‫hal ini di sini, 35 00:01:46,990 --> 00:01:51,143 ‫untuk tanggapan pengembangan web, dan juga tautan font Google ini, oke. 36 00:01:52,210 --> 00:01:53,563 ‫Jadi, mulai 37 00:01:58,280 --> 00:02:00,123 ‫dengan itu, jadi tanamkan 38 00:02:02,830 --> 00:02:05,610 ‫style sheet, lalu ambil referensi ini 39 00:02:09,040 --> 00:02:11,803 ‫dan ganti dengan tanda kutip tunggal. 40 00:02:13,970 --> 00:02:18,650 ‫Oke, kalau begitu saya juga ingin mendefinisikan keduanya jadi mari 41 00:02:18,650 --> 00:02:21,273 ‫kita potong di sini, dan 42 00:02:23,890 --> 00:02:28,323 ‫mari kita ubah apa pun yang kita miliki di sini. 43 00:02:40,099 --> 00:02:40,932 ‫Baiklah. 44 00:02:42,960 --> 00:02:44,473 ‫Oh dan juga kutipan tunggal. 45 00:02:50,470 --> 00:02:54,223 ‫Oke, mari kita letakkan yang ini 46 00:02:55,780 --> 00:03:00,730 ‫di akhir, dan itu adalah topi kita untuk template kita. 47 00:03:00,730 --> 00:03:03,993 ‫Selanjutnya, mari kita lihat headernya. 48 00:03:05,640 --> 00:03:09,143 ‫Oke, jadi pada dasarnya kami memiliki seluruh elemen ini 49 00:03:10,100 --> 00:03:14,600 ‫di sini, hanya dengan header sehingga bilah abu-abu gelap yang Anda 50 00:03:14,600 --> 00:03:17,140 ‫lihat di bagian atas halaman. 51 00:03:17,140 --> 00:03:18,430 ‫Jadi mari kita 52 00:03:20,500 --> 00:03:22,530 ‫salin ini dan taruh di sini. 53 00:03:22,530 --> 00:03:24,180 ‫Jadi, itu banyak 54 00:03:24,180 --> 00:03:27,800 ‫sekali kode dan Anda akan melihat betapa kecilnya kode itu 55 00:03:27,800 --> 00:03:29,920 ‫nanti, setelah kami menerjemahkannya ke Pug. 56 00:03:29,920 --> 00:03:33,480 ‫Oke, dan di sini sekarang mari kita benar-benar memasukkan 57 00:03:33,480 --> 00:03:37,370 ‫komentar yang terlihat ke dalam html kita, dengan mengatakan HEADER. 58 00:03:37,370 --> 00:03:41,070 ‫Oke, dan sebenarnya, itu tanpa tanda hubung. 59 00:03:41,070 --> 00:03:44,020 ‫Jadi dalam kode VS, ketika saya menekan pintasan 60 00:03:44,020 --> 00:03:46,860 ‫komentar, maka secara otomatis membuat komentar Pug. 61 00:03:46,860 --> 00:03:49,320 ‫Tapi di sini, saya benar-benar hanya ingin 62 00:03:49,320 --> 00:03:51,833 ‫satu komentar, yang juga tersedia di output html. 63 00:03:53,470 --> 00:03:56,690 ‫Jadi, sekarang mari kita buat elemen header, dan mari kita 64 00:03:56,690 --> 00:03:59,040 ‫lihat apa yang kita miliki di sini. 65 00:03:59,040 --> 00:04:02,120 ‫Jadi kami memiliki header dengan kelas header. 66 00:04:02,120 --> 00:04:04,680 ‫Dan yang perlu kita lakukan untuk 67 00:04:04,680 --> 00:04:07,330 ‫menentukan kelas, adalah DOT dan kemudian nama kelas. 68 00:04:07,330 --> 00:04:09,410 ‫Jadi, tajuk lagi. 69 00:04:09,410 --> 00:04:12,530 ‫Kemudian, di sana, kami memiliki elemen nav. 70 00:04:12,530 --> 00:04:17,480 ‫Jadi, lekukan, dan kemudian nav. nav yang merupakan nama kelas di 71 00:04:17,480 --> 00:04:19,537 ‫sini lagi, dan kemudian 72 00:04:19,537 --> 00:04:22,200 ‫kami juga memiliki nama kelas lain, 73 00:04:22,200 --> 00:04:23,880 ‫dan titik lain. 74 00:04:23,880 --> 00:04:24,713 ‫Dan itu saja. 75 00:04:25,850 --> 00:04:28,550 ‫Jadi nav wisata. 76 00:04:28,550 --> 00:04:32,290 ‫Jadi, jika Anda sedikit familiar dengan arsitektur CSS, mungkin 77 00:04:32,290 --> 00:04:35,620 ‫Anda melihat bahwa saya menggunakan arsitektur BEM. 78 00:04:35,620 --> 00:04:37,660 ‫Jadi, nav adalah bloknya dan 79 00:04:37,660 --> 00:04:40,260 ‫kemudian di sini tur ini adalah pengubah. 80 00:04:40,260 --> 00:04:42,500 ‫Dan di sini garis bawah ini berarti 81 00:04:42,500 --> 00:04:44,180 ‫bahwa ini adalah sebuah blok 82 00:04:44,180 --> 00:04:45,560 ‫atau sebenarnya sebuah elemen. 83 00:04:45,560 --> 00:04:49,293 ‫Jadi blok, elemen, dan pengubah. 84 00:04:50,160 --> 00:04:52,290 ‫Oke, jadi itu tidak 85 00:04:52,290 --> 00:04:54,890 ‫terlalu penting, tapi saya hanya ingin menyebutkannya. 86 00:04:54,890 --> 00:04:57,120 ‫Bagaimanapun, di dalam navigasi, kami 87 00:04:57,120 --> 00:04:59,270 ‫memiliki elemen tautan. 88 00:04:59,270 --> 00:05:02,920 ‫Jadi, a, dengan kelas nav__el. 89 00:05:07,130 --> 00:05:10,330 ‫Kemudian di sini, kita memiliki atribut href ini, jadi, 90 00:05:10,330 --> 00:05:12,973 ‫ingat untuk itu kita menggunakan tanda kurung, 91 00:05:14,230 --> 00:05:15,063 ‫dan kemudian 92 00:05:16,930 --> 00:05:18,890 ‫href, dan menyetelnya ke nol. 93 00:05:18,890 --> 00:05:22,020 ‫Jadi pada dasarnya, itulah yang dimaksud dengan hash di sini. 94 00:05:22,020 --> 00:05:23,470 ‫Dan kemudian, cukup isinya, jadi 95 00:05:24,690 --> 00:05:25,673 ‫semua tur. 96 00:05:27,150 --> 00:05:29,450 ‫Selanjutnya, kami memiliki formulir ini di 97 00:05:29,450 --> 00:05:31,720 ‫sini, tetapi sebenarnya kami tidak akan 98 00:05:31,720 --> 00:05:33,240 ‫menerapkannya saat ini. 99 00:05:33,240 --> 00:05:34,543 ‫Jadi mari kita singkirkan itu. 100 00:05:36,260 --> 00:05:39,090 ‫Baiklah dan ini adalah navigasi kami. 101 00:05:39,090 --> 00:05:41,230 ‫Jadi, kode ini di 102 00:05:41,230 --> 00:05:44,200 ‫sini pada dasarnya setara dengan ini. 103 00:05:44,200 --> 00:05:46,993 ‫Dan selanjutnya, kita memiliki logo header ini. 104 00:05:48,730 --> 00:05:51,350 ‫Jadi, baris baru, tetapi satu 105 00:05:51,350 --> 00:05:54,100 ‫tingkat ke belakang, di lekukan sehingga 106 00:05:54,100 --> 00:05:55,680 ‫sejajar dengan navigasi. 107 00:05:55,680 --> 00:05:58,930 ‫Jadi, seperti di sini, benar. 108 00:05:58,930 --> 00:05:59,980 ‫Sekarang ketika 109 00:05:59,980 --> 00:06:04,980 ‫itu div, kita bahkan tidak perlu mengatakan div. headerlogo, dalam hal ini. 110 00:06:07,150 --> 00:06:08,350 ‫Jadi, ketika 111 00:06:08,350 --> 00:06:11,820 ‫itu adalah div, yang merupakan jenis elemen blok standar dalam 112 00:06:11,820 --> 00:06:13,980 ‫html, yang kita butuhkan hanyalah titik 113 00:06:13,980 --> 00:06:16,873 ‫dan kemudian secara otomatis akan membuat elemen div. 114 00:06:18,930 --> 00:06:20,713 ‫Kemudian di sana, kami memiliki 115 00:06:22,030 --> 00:06:24,980 ‫gambar ini, dan tentu saja membutuhkan beberapa atribut, 116 00:06:24,980 --> 00:06:26,693 ‫yang pertama, sumbernya. 117 00:06:27,560 --> 00:06:31,937 ‫Jadi gambar, logo, putih. png, dan kemudian 118 00:06:33,850 --> 00:06:36,433 ‫juga teks alternatif, oke. 119 00:06:40,910 --> 00:06:44,690 ‫Selanjutnya, kita memiliki navigasi lain di sini, dan sekali lagi, 120 00:06:44,690 --> 00:06:46,820 ‫itu pada tingkat yang sama 121 00:06:46,820 --> 00:06:49,293 ‫dengan navigasi pertama dan div ini. 122 00:06:51,030 --> 00:06:53,750 ‫Jadi satu tingkat kembali 123 00:06:53,750 --> 00:06:57,680 ‫ke lekukan dan buat elemen nav baru dengan 124 00:06:57,680 --> 00:07:00,763 ‫nav kelas dan pengguna nav kelas. 125 00:07:02,120 --> 00:07:03,950 ‫Kemudian di sana, ada tautan, 126 00:07:03,950 --> 00:07:05,130 ‫sangat mirip 127 00:07:05,130 --> 00:07:09,160 ‫dengan yang ini, jadi mari kita salin saja untuk menghemat waktu. 128 00:07:09,160 --> 00:07:11,293 ‫Dan kemudian di sini tertulis, Pemesanan saya. 129 00:07:16,170 --> 00:07:20,470 ‫Kemudian satu lagi, dan sebenarnya mari kita salin lagi dengan 130 00:07:20,470 --> 00:07:23,380 ‫perbedaan bahwa ia tidak memiliki konten 131 00:07:23,380 --> 00:07:27,070 ‫ini, tetapi memiliki beberapa konten lagi di dalamnya. 132 00:07:27,070 --> 00:07:28,470 ‫Jadi ini. 133 00:07:28,470 --> 00:07:30,023 ‫Jadi, sangat mudah sekali lagi, gambar, 134 00:07:31,170 --> 00:07:33,633 ‫dengan sumbernya, . jpg. 135 00:07:42,100 --> 00:07:43,853 ‫Dan itu juga memiliki nama 136 00:07:45,060 --> 00:07:47,420 ‫kelas, jadi mari kita edit di sini dengan titik. 137 00:07:47,420 --> 00:07:51,713 ‫Jadi, nav, gambar pengguna. 138 00:07:53,290 --> 00:07:56,810 ‫Dan kemudian hanya rentang yang mengatakan Jonas. 139 00:07:56,810 --> 00:07:58,120 ‫Dan, seperti 140 00:07:58,120 --> 00:08:00,960 ‫yang Anda lihat, ini sebenarnya akan menjadi bagian 141 00:08:00,960 --> 00:08:02,350 ‫dinamis dari header ini. 142 00:08:02,350 --> 00:08:05,000 ‫Dan sebenarnya semua ini di sini akan 143 00:08:05,000 --> 00:08:06,675 ‫menjadi titik di awal. 144 00:08:06,675 --> 00:08:11,675 ‫Oke, tapi bagaimanapun, mari kita selesaikan pengkodean bagian ini di sini. 145 00:08:13,160 --> 00:08:14,620 ‫Jadi pada dasarnya, dua 146 00:08:14,620 --> 00:08:17,520 ‫tombol ini, jadi tombol login dan tombol sign up. 147 00:08:17,520 --> 00:08:20,120 ‫Jadi, tentu saja Anda tidak 148 00:08:20,120 --> 00:08:22,920 ‫akan memiliki tombol login dan sign up 149 00:08:22,920 --> 00:08:25,680 ‫sekaligus memiliki navigasi pengguna ini di sini. 150 00:08:25,680 --> 00:08:29,590 ‫Jadi pemesanan saya dan kemudian nama pengguna, oke. 151 00:08:29,590 --> 00:08:32,250 ‫Tetapi sekali lagi, mari kita taruh itu di sini untuk saat 152 00:08:32,250 --> 00:08:34,553 ‫ini, dan kemudian komentari apa yang tidak kita butuhkan. 153 00:08:36,860 --> 00:08:41,860 ‫Jadi, tombol, elemen nav, dan juga elemen nav 154 00:08:44,440 --> 00:08:49,043 ‫dan kemudian pengubah cta untuk mendaftar. 155 00:08:50,290 --> 00:08:54,847 ‫Dan sebenarnya ada juga sebelum itu untuk login, kan. 156 00:08:56,850 --> 00:08:58,837 ‫Jadi, itu yang ini. 157 00:09:03,010 --> 00:09:05,730 ‫Oke dan jadi itu sebenarnya. 158 00:09:05,730 --> 00:09:06,940 ‫Jadi itulah tajuknya, 159 00:09:06,940 --> 00:09:09,010 ‫dan Anda melihat bahwa kode ini 160 00:09:09,010 --> 00:09:12,550 ‫di sini setara dengan semua yang kita miliki di sini 161 00:09:12,550 --> 00:09:15,070 ‫yang terlihat jauh lebih membingungkan, setidaknya jika 162 00:09:15,070 --> 00:09:16,653 ‫Anda bertanya kepada saya. 163 00:09:18,010 --> 00:09:20,690 ‫Jadi, hapus itu, dan seperti yang saya 164 00:09:20,690 --> 00:09:22,920 ‫katakan, navigasi pengguna ini di 165 00:09:22,920 --> 00:09:25,200 ‫sini, bagian ini hanya akan tersedia 166 00:09:25,200 --> 00:09:27,010 ‫ketika seseorang masuk. 167 00:09:27,010 --> 00:09:30,123 ‫Jadi untuk saat ini, mari kita komentari semua ini. 168 00:09:31,370 --> 00:09:36,370 ‫Baiklah, jadi selanjutnya kita memiliki konten dan jadi mari tambahkan komentar lain 169 00:09:36,500 --> 00:09:38,350 ‫di sini dan 170 00:09:42,130 --> 00:09:44,050 ‫di html kita, sebenarnya semua 171 00:09:44,050 --> 00:09:46,010 ‫yang akan kita tambahkan sekarang 172 00:09:46,010 --> 00:09:49,350 ‫adalah bagian ini di sini dengan kelas ikhtisar. 173 00:09:49,350 --> 00:09:51,430 ‫Karena kemudian di sanalah kami memiliki semua 174 00:09:51,430 --> 00:09:53,160 ‫kartu konten ini, yang sekali 175 00:09:53,160 --> 00:09:56,070 ‫lagi, untuk saat ini, tidak akan kami sertakan di sana. 176 00:09:56,070 --> 00:09:57,400 ‫Jadi sekali lagi, apa 177 00:09:57,400 --> 00:09:59,623 ‫yang kita lakukan sekarang sebenarnya hanyalah kerangka. 178 00:10:00,729 --> 00:10:03,123 ‫Baiklah, jadi bagian. gambaran. 179 00:10:07,410 --> 00:10:08,243 ‫Ringkasan. 180 00:10:09,574 --> 00:10:12,500 ‫Dan untuk saat ini, mari kita letakkan 181 00:10:12,500 --> 00:10:16,040 ‫h1 di sini dengan nama tur yang masuk sebagai variabel. 182 00:10:16,040 --> 00:10:18,270 ‫Oke dan tentu saja bagian 183 00:10:18,270 --> 00:10:22,103 ‫ini di sini harus setingkat dengan header ini, bagus. 184 00:10:24,130 --> 00:10:26,820 ‫Jadi yang kita lewatkan sekarang hanyalah 185 00:10:26,820 --> 00:10:28,700 ‫footer di akhir halaman. 186 00:10:28,700 --> 00:10:32,690 ‫Jadi mari kita pergi ke sana dan ini dia. 187 00:10:32,690 --> 00:10:35,790 ‫Mari kita ambil semua ini. 188 00:10:35,790 --> 00:10:38,040 ‫Dan ini seharusnya menjadi elemen footer, bukan 189 00:10:39,040 --> 00:10:40,393 ‫hanya div biasa. 190 00:10:45,510 --> 00:10:49,730 ‫Jadi elemen footer dengan kelas footer, lalu div, dengan 191 00:10:49,730 --> 00:10:52,573 ‫kelas logo footer, dan sekali 192 00:10:53,850 --> 00:10:57,493 ‫lagi, saya bahkan tidak perlu menentukan elemen div. 193 00:10:58,870 --> 00:11:00,323 ‫Kemudian kita memiliki gambar di sini,. png dan jadi 194 00:11:07,917 --> 00:11:12,810 ‫saya harap mengetik semua ini sendiri, dengan tangan pada dasarnya, membuat Anda menyimpan 195 00:11:12,810 --> 00:11:16,820 ‫pengetahuan ini tentang bagaimana semua ini bekerja sedikit lebih baik. 196 00:11:16,820 --> 00:11:20,030 ‫Oke, jadi ini alt dan sekarang navigasi footer 197 00:11:20,030 --> 00:11:22,330 ‫ini, jadi daftar yang tidak diurutkan, 198 00:11:23,560 --> 00:11:26,520 ‫dan sekarang di sana, kami memiliki beberapa 199 00:11:26,520 --> 00:11:28,033 ‫elemen item daftar. 200 00:11:31,260 --> 00:11:35,483 ‫Jadi daftar item, dan kemudian di sana ada 201 00:11:36,580 --> 00:11:38,620 ‫tautan di masing-masing. 202 00:11:38,620 --> 00:11:41,470 ‫Jadi, a dengan href entah dari mana pada dasarnya. 203 00:11:41,470 --> 00:11:46,470 ‫Dan kemudian, Tentang kami. 204 00:11:48,410 --> 00:11:51,490 ‫Sekarang, di sini dalam situasi ini, 205 00:11:51,490 --> 00:11:53,170 ‫membutuhkan baris tambahan 206 00:11:53,170 --> 00:11:57,298 ‫ini hanya untuk menentukan li ini, tidak terlalu ideal. 207 00:11:57,298 --> 00:11:58,640 ‫Jadi yang bisa kita 208 00:11:58,640 --> 00:12:00,010 ‫lakukan di sini, adalah menggunakan 209 00:12:00,010 --> 00:12:03,310 ‫titik dua, seperti ini, dan pada dasarnya meletakkan semuanya di baris yang sama. 210 00:12:03,310 --> 00:12:05,840 ‫Jadi ini akan tetap berfungsi seolah-olah ada baris baru 211 00:12:05,840 --> 00:12:07,730 ‫dengan lekukan, tetapi pada dasarnya 212 00:12:07,730 --> 00:12:10,570 ‫memungkinkan kita untuk melakukan semuanya pada baris yang sama. 213 00:12:10,570 --> 00:12:13,910 ‫Oke, lalu untuk beberapa alasan, penyorotan 214 00:12:13,910 --> 00:12:15,810 ‫sintaks berhenti bekerja, 215 00:12:15,810 --> 00:12:19,180 ‫tapi yah, itu tidak terlalu penting. 216 00:12:19,180 --> 00:12:21,343 ‫Jadi unduh aplikasinya, jadilah 217 00:12:22,910 --> 00:12:24,453 ‫pemandu, karier. 218 00:12:26,300 --> 00:12:29,873 ‫Dan itu sebenarnya. 219 00:12:39,630 --> 00:12:41,053 ‫Selanjutnya, kami memiliki footer ini, 220 00:12:43,770 --> 00:12:46,520 ‫hak cipta, dan di sini kami hanya memiliki banyak teks. 221 00:12:50,540 --> 00:12:53,100 ‫Jadi itu menentukan simbol hak 222 00:12:53,100 --> 00:12:56,943 ‫cipta di sini, dan itu oleh Jonas Schmedtmann. 223 00:12:58,860 --> 00:13:02,670 ‫Jadi, itulah saya dan seperti di semua kursus saya yang lain, 224 00:13:02,670 --> 00:13:06,100 ‫saya ingin Anda tahu bahwa pada dasarnya Anda bebas menggunakan 225 00:13:06,100 --> 00:13:08,290 ‫proyek ini untuk diri Anda sendiri. 226 00:13:08,290 --> 00:13:11,120 ‫Jadi pada dasarnya untuk memasukkannya ke dalam portofolio Anda atau untuk 227 00:13:11,120 --> 00:13:13,550 ‫menunjukkan kepada siapa pun yang Anda inginkan, bahwa Anda 228 00:13:13,550 --> 00:13:15,270 ‫membangun proyek ini dalam kursus saya. 229 00:13:15,270 --> 00:13:18,630 ‫Sekarang yang tidak dapat Anda lakukan adalah membuat kursus Anda 230 00:13:18,630 --> 00:13:20,030 ‫sendiri berdasarkan proyek ini. 231 00:13:20,030 --> 00:13:23,310 ‫Dan menyedihkan bahwa saya bahkan harus mengatakan ini, tetapi tentu 232 00:13:23,310 --> 00:13:25,970 ‫saja ada orang yang menggunakan proyek saya, 233 00:13:25,970 --> 00:13:28,980 ‫pada dasarnya untuk menempatkan beberapa kursus gratis di 234 00:13:28,980 --> 00:13:32,270 ‫YouTube, di mana mereka menyalin proyek saya, satu per satu. 235 00:13:32,270 --> 00:13:35,410 ‫Oke, jadi izinkan saya menulisnya di sini. 236 00:13:35,410 --> 00:13:38,473 ‫Untuk tujuan Anda sendiri, kecuali memproduksi 237 00:13:42,160 --> 00:13:45,593 ‫tentu saja, kursus atau tutorial Anda sendiri. 238 00:13:49,850 --> 00:13:54,850 ‫Oke dan itu sebenarnya. 239 00:13:59,230 --> 00:14:01,213 ‫Baiklah, itulah terjemahan 240 00:14:06,130 --> 00:14:09,500 ‫dari kerangka yang pada dasarnya kita 241 00:14:10,990 --> 00:14:14,400 ‫miliki di sini, tentu saja kecuali isinya. 242 00:14:14,400 --> 00:14:17,560 ‫Oke, jadi kita tidak membutuhkan itu lagi. 243 00:14:17,560 --> 00:14:20,753 ‫Dan, sebagai penutup, mari kita lihat sekilas 244 00:14:21,960 --> 00:14:25,000 ‫dan memang, ini dia konten kami. 245 00:14:25,000 --> 00:14:27,640 ‫Sekarang ini di sini terlihat agak tidak pada tempatnya karena 246 00:14:27,640 --> 00:14:29,650 ‫teks hak cipta di sini sangat panjang. 247 00:14:29,650 --> 00:14:31,883 ‫Jadi, navigasi footer ini pada dasarnya. 248 00:14:33,950 --> 00:14:37,330 ‫Tetapi karena itu adalah wadah fleksibel, kita harus 249 00:14:37,330 --> 00:14:39,540 ‫dapat memperbaikinya dengan konten 250 00:14:39,540 --> 00:14:42,270 ‫yang dibenarkan, flex-end, bukan yang ini. 251 00:14:42,270 --> 00:14:47,270 ‫Oke, dan jangan khawatir jika Anda tidak terbiasa 252 00:14:48,660 --> 00:14:53,660 ‫dengan CSS, atau bahkan Flexbox, ini hanya untuk 253 00:14:53,870 --> 00:14:56,180 ‫memperbaiki masalah kecil 254 00:14:56,180 --> 00:15:00,200 ‫yang kami alami di sini secara visual. 255 00:15:00,200 --> 00:15:01,050 ‫Jadi mari kita cari footer di sini. 256 00:15:02,820 --> 00:15:04,723 ‫di sini kita. 257 00:15:08,590 --> 00:15:09,893 ‫Perbaiki itu di sini, dan 258 00:15:11,210 --> 00:15:12,303 ‫jika sekarang kami 259 00:15:13,690 --> 00:15:15,790 ‫memuat ulang, ya maka kami baik-baik saja, sempurna.