‫Instruktur: Sekarang mari
‫kita mulai benar-benar membuat template dasar kita.
‫Jadi template yang menjadi dasar semua
‫template lainnya nanti.
‫Jadi pada dasarnya, kita akan mengonversi file html
‫biasa, yang ada di file starter menjadi template Pug.
‫Jadi pada dasarnya, kita akan
‫mulai membuat tata letak halaman ini.
‫Jadi header ini di sini dan juga footer.
‫Oke, bukan isinya tentu saja,
‫karena itu nanti kita akan membangun lebih dinamis
‫sedikit lagi, oke.
‫Tapi kami akan membiarkan
‫semuanya siap, sehingga kami kemudian dapat menyuntikkan semua konten nyata
‫ini ke dalam template dasar keseluruhan.
‫Jadi, ayo lakukan sekarang.
‫Dan mari kita mulai dengan menyingkirkan
‫semua konten yang kita miliki di sini.
‫Jadi ini benar-benar hanya
‫untuk menunjukkan kepada Anda berbagai fitur Pug.
‫Dan sekarang, mari kita buka ikhtisar ini. html, sehingga pada
‫dasarnya kita dapat mengonversinya di sini ke Pug.
‫Oke, itu tadi file html asli yang saya
‫buat untuk mendesain halaman ikhtisar yang baru saja
‫kita lihat dirender secara dinamis.
‫Oke, jadi inilah yang ada di kepala kita
‫dan mari kita lanjutkan dan salin seluruh kode ini, sehingga kita
‫dapat mengonversi apa yang hilang di sini.
‫Oke, jadi isi dari judul kita ini, jadi
‫mari kita salin, lalu
‫singkirkan, dan jadi ini adalah isi halaman utama, kan.
‫Kemudian kita sudah memiliki favicon, dan juga style.
‫Jadi apa yang kami lewatkan pada dasarnya adalah
‫hal ini di sini,
‫untuk tanggapan pengembangan web, dan juga tautan font Google ini, oke.
‫Jadi, mulai
‫dengan itu, jadi tanamkan
‫style sheet, lalu ambil referensi ini
‫dan ganti dengan tanda kutip tunggal.
‫Oke, kalau begitu saya juga ingin mendefinisikan keduanya jadi mari
‫kita potong di sini, dan
‫mari kita ubah apa pun yang kita miliki di sini.
‫Baiklah.
‫Oh dan juga kutipan tunggal.
‫Oke, mari kita letakkan yang ini
‫di akhir, dan itu adalah topi kita untuk template kita.
‫Selanjutnya, mari kita lihat headernya.
‫Oke, jadi pada dasarnya kami memiliki seluruh elemen ini
‫di sini, hanya dengan header sehingga bilah abu-abu gelap yang Anda
‫lihat di bagian atas halaman.
‫Jadi mari kita
‫salin ini dan taruh di sini.
‫Jadi, itu banyak
‫sekali kode dan Anda akan melihat betapa kecilnya kode itu
‫nanti, setelah kami menerjemahkannya ke Pug.
‫Oke, dan di sini sekarang mari kita benar-benar memasukkan
‫komentar yang terlihat ke dalam html kita, dengan mengatakan HEADER.
‫Oke, dan sebenarnya, itu tanpa tanda hubung.
‫Jadi dalam kode VS, ketika saya menekan pintasan
‫komentar, maka secara otomatis membuat komentar Pug.
‫Tapi di sini, saya benar-benar hanya ingin
‫satu komentar, yang juga tersedia di output html.
‫Jadi, sekarang mari kita buat elemen header, dan mari kita
‫lihat apa yang kita miliki di sini.
‫Jadi kami memiliki header dengan kelas header.
‫Dan yang perlu kita lakukan untuk
‫menentukan kelas, adalah DOT dan kemudian nama kelas.
‫Jadi, tajuk lagi.
‫Kemudian, di sana, kami memiliki elemen nav.
‫Jadi, lekukan, dan kemudian nav. nav yang merupakan nama kelas di
‫sini lagi, dan kemudian
‫kami juga memiliki nama kelas lain,
‫dan titik lain.
‫Dan itu saja.
‫Jadi nav wisata.
‫Jadi, jika Anda sedikit familiar dengan arsitektur CSS, mungkin
‫Anda melihat bahwa saya menggunakan arsitektur BEM.
‫Jadi, nav adalah bloknya dan
‫kemudian di sini tur ini adalah pengubah.
‫Dan di sini garis bawah ini berarti
‫bahwa ini adalah sebuah blok
‫atau sebenarnya sebuah elemen.
‫Jadi blok, elemen, dan pengubah.
‫Oke, jadi itu tidak
‫terlalu penting, tapi saya hanya ingin menyebutkannya.
‫Bagaimanapun, di dalam navigasi, kami
‫memiliki elemen tautan.
‫Jadi, a, dengan kelas nav__el.
‫Kemudian di sini, kita memiliki atribut href ini, jadi,
‫ingat untuk itu kita menggunakan tanda kurung,
‫dan kemudian
‫href, dan menyetelnya ke nol.
‫Jadi pada dasarnya, itulah yang dimaksud dengan hash di sini.
‫Dan kemudian, cukup isinya, jadi
‫semua tur.
‫Selanjutnya, kami memiliki formulir ini di
‫sini, tetapi sebenarnya kami tidak akan
‫menerapkannya saat ini.
‫Jadi mari kita singkirkan itu.
‫Baiklah dan ini adalah navigasi kami.
‫Jadi, kode ini di
‫sini pada dasarnya setara dengan ini.
‫Dan selanjutnya, kita memiliki logo header ini.
‫Jadi, baris baru, tetapi satu
‫tingkat ke belakang, di lekukan sehingga
‫sejajar dengan navigasi.
‫Jadi, seperti di sini, benar.
‫Sekarang ketika
‫itu div, kita bahkan tidak perlu mengatakan div. headerlogo, dalam hal ini.
‫Jadi, ketika
‫itu adalah div, yang merupakan jenis elemen blok standar dalam
‫html, yang kita butuhkan hanyalah titik
‫dan kemudian secara otomatis akan membuat elemen div.
‫Kemudian di sana, kami memiliki
‫gambar ini, dan tentu saja membutuhkan beberapa atribut,
‫yang pertama, sumbernya.
‫Jadi gambar, logo, putih. png, dan kemudian
‫juga teks alternatif, oke.
‫Selanjutnya, kita memiliki navigasi lain di sini, dan sekali lagi,
‫itu pada tingkat yang sama
‫dengan navigasi pertama dan div ini.
‫Jadi satu tingkat kembali
‫ke lekukan dan buat elemen nav baru dengan
‫nav kelas dan pengguna nav kelas.
‫Kemudian di sana, ada tautan,
‫sangat mirip
‫dengan yang ini, jadi mari kita salin saja untuk menghemat waktu.
‫Dan kemudian di sini tertulis, Pemesanan saya.
‫Kemudian satu lagi, dan sebenarnya mari kita salin lagi dengan
‫perbedaan bahwa ia tidak memiliki konten
‫ini, tetapi memiliki beberapa konten lagi di dalamnya.
‫Jadi ini.
‫Jadi, sangat mudah sekali lagi, gambar,
‫dengan sumbernya, . jpg.
‫Dan itu juga memiliki nama
‫kelas, jadi mari kita edit di sini dengan titik.
‫Jadi, nav, gambar pengguna.
‫Dan kemudian hanya rentang yang mengatakan Jonas.
‫Dan, seperti
‫yang Anda lihat, ini sebenarnya akan menjadi bagian
‫dinamis dari header ini.
‫Dan sebenarnya semua ini di sini akan
‫menjadi titik di awal.
‫Oke, tapi bagaimanapun, mari kita selesaikan pengkodean bagian ini di sini.
‫Jadi pada dasarnya, dua
‫tombol ini, jadi tombol login dan tombol sign up.
‫Jadi, tentu saja Anda tidak
‫akan memiliki tombol login dan sign up
‫sekaligus memiliki navigasi pengguna ini di sini.
‫Jadi pemesanan saya dan kemudian nama pengguna, oke.
‫Tetapi sekali lagi, mari kita taruh itu di sini untuk saat
‫ini, dan kemudian komentari apa yang tidak kita butuhkan.
‫Jadi, tombol, elemen nav, dan juga elemen nav
‫dan kemudian pengubah cta untuk mendaftar.
‫Dan sebenarnya ada juga sebelum itu untuk login, kan.
‫Jadi, itu yang ini.
‫Oke dan jadi itu sebenarnya.
‫Jadi itulah tajuknya,
‫dan Anda melihat bahwa kode ini
‫di sini setara dengan semua yang kita miliki di sini
‫yang terlihat jauh lebih membingungkan, setidaknya jika
‫Anda bertanya kepada saya.
‫Jadi, hapus itu, dan seperti yang saya
‫katakan, navigasi pengguna ini di
‫sini, bagian ini hanya akan tersedia
‫ketika seseorang masuk.
‫Jadi untuk saat ini, mari kita komentari semua ini.
‫Baiklah, jadi selanjutnya kita memiliki konten dan jadi mari tambahkan komentar lain
‫di sini dan
‫di html kita, sebenarnya semua
‫yang akan kita tambahkan sekarang
‫adalah bagian ini di sini dengan kelas ikhtisar.
‫Karena kemudian di sanalah kami memiliki semua
‫kartu konten ini, yang sekali
‫lagi, untuk saat ini, tidak akan kami sertakan di sana.
‫Jadi sekali lagi, apa
‫yang kita lakukan sekarang sebenarnya hanyalah kerangka.
‫Baiklah, jadi bagian. gambaran.
‫Ringkasan.
‫Dan untuk saat ini, mari kita letakkan
‫h1 di sini dengan nama tur yang masuk sebagai variabel.
‫Oke dan tentu saja bagian
‫ini di sini harus setingkat dengan header ini, bagus.
‫Jadi yang kita lewatkan sekarang hanyalah
‫footer di akhir halaman.
‫Jadi mari kita pergi ke sana dan ini dia.
‫Mari kita ambil semua ini.
‫Dan ini seharusnya menjadi elemen footer, bukan
‫hanya div biasa.
‫Jadi elemen footer dengan kelas footer, lalu div, dengan
‫kelas logo footer, dan sekali
‫lagi, saya bahkan tidak perlu menentukan elemen div.
‫Kemudian kita memiliki gambar di sini,. png dan jadi
‫saya harap mengetik semua ini sendiri, dengan tangan pada dasarnya, membuat Anda menyimpan
‫pengetahuan ini tentang bagaimana semua ini bekerja sedikit lebih baik.
‫Oke, jadi ini alt dan sekarang navigasi footer
‫ini, jadi daftar yang tidak diurutkan,
‫dan sekarang di sana, kami memiliki beberapa
‫elemen item daftar.
‫Jadi daftar item, dan kemudian di sana ada
‫tautan di masing-masing.
‫Jadi, a dengan href entah dari mana pada dasarnya.
‫Dan kemudian, Tentang kami.
‫Sekarang, di sini dalam situasi ini,
‫membutuhkan baris tambahan
‫ini hanya untuk menentukan li ini, tidak terlalu ideal.
‫Jadi yang bisa kita
‫lakukan di sini, adalah menggunakan
‫titik dua, seperti ini, dan pada dasarnya meletakkan semuanya di baris yang sama.
‫Jadi ini akan tetap berfungsi seolah-olah ada baris baru
‫dengan lekukan, tetapi pada dasarnya
‫memungkinkan kita untuk melakukan semuanya pada baris yang sama.
‫Oke, lalu untuk beberapa alasan, penyorotan
‫sintaks berhenti bekerja,
‫tapi yah, itu tidak terlalu penting.
‫Jadi unduh aplikasinya, jadilah
‫pemandu, karier.
‫Dan itu sebenarnya.
‫Selanjutnya, kami memiliki footer ini,
‫hak cipta, dan di sini kami hanya memiliki banyak teks.
‫Jadi itu menentukan simbol hak
‫cipta di sini, dan itu oleh Jonas Schmedtmann.
‫Jadi, itulah saya dan seperti di semua kursus saya yang lain,
‫saya ingin Anda tahu bahwa pada dasarnya Anda bebas menggunakan
‫proyek ini untuk diri Anda sendiri.
‫Jadi pada dasarnya untuk memasukkannya ke dalam portofolio Anda atau untuk
‫menunjukkan kepada siapa pun yang Anda inginkan, bahwa Anda
‫membangun proyek ini dalam kursus saya.
‫Sekarang yang tidak dapat Anda lakukan adalah membuat kursus Anda
‫sendiri berdasarkan proyek ini.
‫Dan menyedihkan bahwa saya bahkan harus mengatakan ini, tetapi tentu
‫saja ada orang yang menggunakan proyek saya,
‫pada dasarnya untuk menempatkan beberapa kursus gratis di
‫YouTube, di mana mereka menyalin proyek saya, satu per satu.
‫Oke, jadi izinkan saya menulisnya di sini.
‫Untuk tujuan Anda sendiri, kecuali memproduksi
‫tentu saja, kursus atau tutorial Anda sendiri.
‫Oke dan itu sebenarnya.
‫Baiklah, itulah terjemahan
‫dari kerangka yang pada dasarnya kita
‫miliki di sini, tentu saja kecuali isinya.
‫Oke, jadi kita tidak membutuhkan itu lagi.
‫Dan, sebagai penutup, mari kita lihat sekilas
‫dan memang, ini dia konten kami.
‫Sekarang ini di sini terlihat agak tidak pada tempatnya karena
‫teks hak cipta di sini sangat panjang.
‫Jadi, navigasi footer ini pada dasarnya.
‫Tetapi karena itu adalah wadah fleksibel, kita harus
‫dapat memperbaikinya dengan konten
‫yang dibenarkan, flex-end, bukan yang ini.
‫Oke, dan jangan khawatir jika Anda tidak terbiasa
‫dengan CSS, atau bahkan Flexbox, ini hanya untuk
‫memperbaiki masalah kecil
‫yang kami alami di sini secara visual.
‫Jadi mari kita cari footer di sini.
‫di sini kita.
‫Perbaiki itu di sini, dan
‫jika sekarang kami
‫memuat ulang, ya maka kami baik-baik saja, sempurna.