selamat datang di html dan css lengkap

saja dalam kursus ini kita akan

pelajari cara membuat situs web dari a

pemula ke tingkat profesional dan oleh

akhir kursus ini kita akan

membangun youtube.com

sekarang Anda tidak memerlukan pengkodean sebelumnya

atau pengalaman teknis kursus ini

dirancang untuk menjadi langkah pertama Anda

menjadi seorang insinyur perangkat lunak kita akan

untuk memulai dari dasar-dasar html di

css dan bangun langkah demi langkah

dan sepanjang jalan kita akan belajar

semua keterampilan utama yang kita butuhkan

membuat situs web pada tingkat profesional

Anda dapat menemukan berbagai bagian dari

kursus ini di bawah video di sini dan

di sini dan setelah setiap bagian saya akan

memberi Anda banyak latihan yang Anda

dapat Anda lakukan sendiri untuk berlatih

keterampilan yang kita pelajari

total kursus ini akan memiliki

lebih dari 100 latihan

terakhir Anda tidak perlu khawatir

mencatat saya membuat html dan css

referensi yang akan mencantumkan semua itu

kami belajar dalam kursus ini dengan mengatakan itu

mari kita mulai

Aku akan melakukan kursus ini pada

mac tapi semuanya sama untuk a

komputer jendela

sebelum kita mulai kita akan membutuhkan dua

potongan perangkat lunak

browser web dan editor kode

browser web memungkinkan kita melihat situs web

internet itu juga akan membiarkan kita melihat

website yang kami buat ini

tentu saja browser web paling populer untuk

pengembangan web adalah kode google chrome

editor membantu kami menulis html dan css kami

kode

editor kode paling populer untuk web

pengembangan disebut vs kode atau visual

kode studio

untuk menginstal keduanya kita bisa pergi ke

google.com lalu cari google

chrome

atau untuk kode vs

dan kemudian buka hasil pertama

dan ikuti petunjuk untuk mengunduh

dan instal

setelah kita menginstal keduanya, kita bisa

memulai kursus

kita akan mulai dengan mempelajari apa itu html

html adalah singkatan dari hypertext markup

bahasa Anda tidak perlu khawatir

apa artinya hanya tahu bahwa itu a

tool yang kami gunakan untuk membuat website

setiap situs web dari youtube ke google ke

amazon menggunakan kombinasi html dan

css untuk membuat semua yang kita lihat

situs web

cara termudah untuk memahami apa html

adalah bahwa kita hanya memberi

instruksi ke komputer

kami memberi tahu komputer apa yang harus dilakukan

selangkah demi selangkah

komputer kemudian akan mengikuti kita

instruksi untuk membuat website kami

jadi saya menemukan cara terbaik untuk belajar html adalah

untuk melompat dan mencobanya jadi kami

akan membuat file html pertama kami dan

situs web pertama kami

mari kita pergi ke komputer kita dan kita pergi

untuk membuat folder baru

jadi folder ini akan berisi semua

kode untuk kursus ini

saya akan menelepon ini

html

kursus dasbor css

selanjutnya kita akan membuka folder ini di

editor kode kami jadi saya akan membuka vs

kode

dan kemudian saya akan klik buka file

dan saya akan menemukan folder yang kita

baru saja dibuat yang satu ini

sekarang setelah itu terbuka Anda akan melihat

nama folder di atas sini dan di

sisi sini
sekarang mari kita buat file html pertama kita

kita akan mengklik ikon ini untuk membuat

berkas baru

dan kita akan memanggil file ini

situs web dot html

jadi kita harus memastikan bahwa file ini

diakhiri dengan dot html ini memberitahu komputer

bahwa file ini lebih berisi kode html

dari sekedar teks

jadi seperti yang saya sebutkan html pada dasarnya adalah beberapa

instruksi yang Anda berikan ke komputer

kita akan belajar dulu

petunjuk

yang

kurang dari

tombol

lebih besar dari

dan kita juga perlu mengetikkan less than slash

tombol lebih besar dari tetapi editor kode kami

mungkin otomatis menyelesaikan ini untuk kita

jadi ini adalah instruksi untuk membuat

tombol

dan di dalam tombol kita akan

memiliki teks halo

sekarang mari kita simpan file kita dan kita akan pergi

untuk mempelajari cara membuka ini di web kami

browser

untuk membuka website baru kami kita akan

buka folder yang berisi kode kita

kita akan menemukan file html kita

kita akan klik kanan

buka dengan google chrome

dan sekarang Anda dapat melihat bahwa kami memiliki milik kami

situs web pertama yang memiliki tombol dengan

teks halo di dalam

dan jika kita melihat kembali kode kita

itulah instruksi yang kami

berikan ke komputer

jadi seperti yang Anda lihat html itu cantik

mudah itu cukup mudah untuk

mengerti apa yang sedang terjadi

sekarang mari kita coba instruksi lain yang kita bisa

berikan ke komputer

pada baris baru kita akan mengetik lebih sedikit

dari hal

lebih besar dari

dan kita juga perlu mengetikkan less than slash

p lebih besar dari dan editor kode kami mungkin

selesaikan otomatis ini untuk kami juga

jadi p di sini singkatan dari sebuah paragraf

ini adalah paragraf teks

di dalam sebuah paragraf kita dapat menaruh beberapa teks

jadi mari kita menempatkan teks

gugus kalimat

teks

sekarang kita bisa menyimpan ini

dan untuk mendapatkan website kami untuk mencerminkan kami

kode terbaru kita akan

buka halaman web kami dan segarkan

dan sekarang Anda dapat melihat bahwa situs web kami

menampilkan paragraf teks seperti

kami menyuruh komputer melakukannya

jadi pada dasarnya itulah cara kerja html

komputer membaca kode html kita dari

atas ke bawah

dan kemudian ikuti instruksi tersebut dan

membuat sebuah tombol

dan paragraf teks

jika kita membalik urutan garis-garis ini

misalnya jika saya meletakkan paragraf

Di Sini

dan saya menyimpannya dan menyegarkan halaman

maka paragraf akan muncul di atas

karena sekali lagi komputer itu adil

mengikuti instruksi kami satu per satu

sekarang saya akan memperkenalkan beberapa

terminologi

jadi masing-masing dari hal-hal ini yang kita

ditampilkan pada halaman web disebut

html jadi tombol adalah tipe dari

html dan satu paragraf adalah hal lainnya

jenis elemen html

jadi elemen hanyalah istilah umum itu

kami gunakan untuk menggambarkan apa pun yang kami bisa

ditampilkan di halaman web dan kami akan pergi

untuk menggunakan elemen istilah ini di seluruh

kursus ini jadi sekarang saya ingin menjelaskan mengapa

kita harus menulis semua simbol ini

itu kurang dari ini lebih besar dari dan

ini kurang dari garis miring

ini adalah sesuatu yang disebut sintaks sintaks

adalah aturan untuk bagaimana bahasa pengkodean

seperti html harus ditulis

jika Anda memikirkan bahasa seperti bahasa Inggris

kami memiliki sesuatu yang disebut tata bahasa yang

adalah aturan sintaks bahasa adalah

pada dasarnya hal yang sama kecuali untuk

bahasa pengkodean

sekarang perbedaan terbesar antara a

bahasa seperti bahasa Inggris dan coding

bahasa adalah bahwa dalam bahasa Inggris Anda tidak

harus mengikuti aturan tata bahasa

sempurna orang masih bisa mengerti

Anda tetapi dalam bahasa pengkodean jika Anda

tidak mengikuti aturan sintaks

komputer tidak akan mengerti kode Anda

misalnya mari kita melanggar aturan

sintaksis

dengan menghapus ini lebih besar dari simbol

dan sekarang kita akan menyimpan file kita dan

kita akan pergi ke website kami dan

menyegarkan

dan sekarang Anda perhatikan bahwa tombol kami adalah

pergi dan itu karena kita tidak

mengikuti sintaks yang tepat sehingga

komputer tidak mengerti html kita

kode lagi

jadi mari kita kembalikan tanda yang lebih besar itu

bahwa kita mengikuti aturan yang tepat

sintaksis

dan kami tidak membutuhkan ini

jadi mari simpan dan segarkan halaman kita dan

sekarang tombol kami kembali karena kami

mengikuti aturan sintaks

jadi untuk apa sebenarnya aturan sintaksisnya

html

jadi bagian kode ini disebut an

html tag itu pada dasarnya memberitahu komputer

apa yang kami coba buat

kami menulis tag dengan menulis kurang dari

simbol

ini adalah nama tag yang memberitahu

komputer jenis elemen apa kita

mencoba untuk membuat dan kemudian lebih besar

daripada simbol

jadi setiap elemen terdiri dari dua tag

tag pembuka dan tag penutup

tag penutup sama dengan

tag pembuka kecuali memiliki garis miring

depan nama tag itulah yang Anda bisa

katakan itu adalah tag penutup

Anda dapat menganggap tag pembuka sebagai

awal tombol dan tag penutup

sebagai akhir tombol dan kemudian masuk

antara isi atau teks

di dalam tombol

dan hal yang sama untuk paragraf tersebut

paragraf memiliki tag pembuka

tag penutup dan beberapa konten di dalamnya

paragraf

jadi selama kita mengikuti sintaks ini

aturan untuk html kami memiliki tag pembuka

dan tag penutup dan tag penutup

dimulai dengan garis miring di depan tag

nama

maka komputer kita akan tahu apa yang harus dilakukan

dan tampilkan elemen kami di halaman web kami

elemen berikutnya yang akan kita tuju

belajar adalah tautan ke situs web lain

misalnya jika kita pergi ke google dan kami

mencari

untuk sesuatu di google itu akan memberi kita

sekelompok link dan ketika kita klik ini

link itu akan membawa kita ke website lain

jadi kita akan belajar bagaimana melakukan itu

dalam kode html kita

jadi kami akan kembali ke situs web kami di sini

dan dalam kode kita, kita akan mengetik

kurang dari

lebih besar dari

jadi ini di sini merupakan jangkar

elemen jangkar pada dasarnya adalah tautan ke

situs web lain

jadi di dalam jangkar ini

kita akan menempatkan teks link kami

jadi mari kita menempatkan teks sebagai

tautan ke
Youtube

kita akan menyimpan ini

lalu segarkan

dan sekarang kita memiliki link

tetapi jika kita mengklik ini sebenarnya tidak

bawa kami ke youtube

dan itu karena kami belum memberi tahu

komputer di mana link ini seharusnya

bawa kami

sekarang kita hanya memiliki link tanpa

tujuan

jadi untuk mengatur situs web untuk ditautkan ke yang kita miliki

untuk mempelajari lebih banyak sintaks html

jadi kita akan pergi ke pembukaan

tag dan kita akan mengetik

ruang angkasa

href sama

tanda kutip ganda ganda

mengutip jadi di dalam kutipan ini kita

akan menyalin dan menempelkan youtube

alamat situs web

jadi untuk mendapatkannya kita bisa pergi ke halaman web kita

lalu ketik youtube.com

dan di atas sini kita memiliki url jadi

kita akan menyalin ini

dan rekatkan ini ke kutipan kami

dan sekarang kita akan menyimpan file kita

kita akan kembali ke website kita

dan menyegarkan
dan sekarang kita memiliki link yang bisa kita klik

jadi ketika kita mengklik tautan ini

sekarang akan membawa kita ke youtube.com

jadi begitulah cara kami membuat tautan ke

situs web lain dengan html

sekarang mari kita kembali ke sini dan menjelaskan apa

sintaks ini berarti

jadi ini disebut atribut html an

atribut pada dasarnya memodifikasi bagaimana sebuah

elemen berperilaku

dalam contoh ini kami menggunakan href

atribut dan itu menentukan di mana ini

elemen tautan akan membawa kita saat kita mengklik

sekarang akan masuk ke youtube.com

tetapi jika kita mengubah ini akan membawa kita ke

situs web yang berbeda jadi atribut ini

memodifikasi bagaimana elemen tautan berperilaku

jadi aturan sintaks untuk atribut adalah

kita harus memiliki ruang antara

atribut dan nama tag sebaliknya jika

saya menulis href di sini

browser hanya akan memikirkan itu

semua ini adalah nama tag jadi itu

mengapa kita harus memiliki ruang

jadi kita akan memiliki persamaan

tanda

dan tanda kutip ganda

jadi teks di sebelah kiri sama

tanda dikenal sebagai nama atribut

dan di sisi kanan adalah nilainya

nilainya harus dikelilingi oleh ganda

kutipan seperti yang Anda lihat di sini

jadi Anda bisa memikirkannya seperti ini

nama memberi tahu kita apa yang kita modifikasi

nilainya memberi tahu kita apa yang kita modifikasi

untuk

jadi href memberi tahu kita bahwa kita sedang memodifikasi

tujuan link ini dan kami

memodifikasinya menjadi

youtube.com

kita juga dapat memiliki banyak atribut

elemen untuk menambahkan atribut lain kita

pisahkan saja dengan spasi seperti ini

dan sekarang kita akan menambahkan yang lain

atribut ke elemen tautan kami dan ini

satu disebut

target

sehingga atribut target menentukan

apakah link ini terbuka di saat ini

halaman atau di tab baru jadi secara default jika kita

tidak memiliki atribut target yang terbuka

di halaman saat ini seperti ini

tetapi jika kita menetapkan atribut target ke

garis bawah kosong

sekarang elemen tautan ini akan terbuka di yang baru

tab jadi mari kita pergi ke halaman web kami dan

menyegarkan

dan klik tautan ini youtube akan sekarang

buka di tab baru

jadi dengan menggunakan atribut kita bisa memodifikasi

bagian yang berbeda dari elemen ini

perilaku

atribut href memodifikasi mana ini

link pergi dan atribut target

memodifikasi apakah tautan ini terbuka di a

tab baru atau di halaman saat ini

perlu diingat bahwa href dan target

atribut hanya berfungsi pada elemen tautan

tombol dan elemen paragraf

memiliki set mereka sendiri atribut yang kita

dapat memodifikasi dan kita akan belajar

ini nanti dalam kursus tetapi untuk saat ini

saya hanya ingin memperkenalkan anda kepada

ide menggunakan atribut untuk memodifikasi kami

elemen html

hal terakhir yang akan kita pelajari

pelajaran ini adalah beberapa kebiasaan aneh dari

sintaks html

jadi sesuatu yang banyak pemula

bermasalah dengan itu di html jika Anda

memiliki beberapa ruang seperti ini untuk

contoh jika kita menyimpan file ini

dan kami memuat ulang

Anda akan melihat bahwa semua ruang ini

hanya muncul sebagai satu ruang di situs web

dan itu karena menurut

sintaksis

ruang ekstra pada dasarnya diabaikan

jadi pemula biasanya kesulitan

ini karena misalnya jika mereka mau

tambahkan spasi antara tombol ini dan ini

tautan

mereka akan mulai menambahkan spasi

di depan tautan

berpikir bahwa itu akan memindahkannya dari

tombol jadi jika kita menyimpan ini dan kita

menyegarkan

tidak ada yang terjadi dan itu karena semua

dari ruang-ruang ini pada dasarnya diabaikan

dalam html

jadi nanti dalam kursus kita akan

belajar bagaimana menghadapi situasi ini

tapi untuk saat ini ingatlah ini

jadi mari kita singkirkan ruang ekstra ini

untuk sekarang

dan kekhasan sintaks lainnya

aturan adalah bahwa

jika saya meletakkan kursor saya di sini

dan saya tekan enter untuk membuat baris baru

dan saya meletakkan kursor saya di sini lagi

baris baru ini juga dihitung sebagai spasi

browser pada dasarnya mengabaikannya

jika saya menyimpan file dan memuat ulang Anda akan melihat

bahwa baris baru tidak melakukan apa-apa

jadi ini benar-benar membuat pengorganisasian kita

kode html sangat fleksibel

misalnya jika saya ingin lebih banyak ruang

antara elemen-elemen ini sehingga itu

lebih mudah dibaca dalam kode saya, saya hanya bisa menambahkan

ruang sebanyak yang saya inginkan dan tidak akan

mendapatkan tercermin dalam website karena

ruang ekstra seperti baris baru ini

diabaikan begitu saja

banyak orang suka menaruh konten

elemen pada barisnya sendiri seperti ini

sehingga tag pada dasarnya sejajar dengan

satu sama lain dalam kolom yang sama

dan hal yang sama untuk di sini

Anda akan melihat bahwa baris ini benar-benar

lama kita benar-benar dapat menambahkan baris baru di sini

untuk membuat kode kita lebih mudah dibaca jadi kapan

kami mengatur kode kami seperti ini kami

umumnya menjorok atau menambah spasi di depan

dari garis-garis ini

ini membantu kami dengan jelas memberi tahu

perbedaan antara tag elemen dan

isinya jika kita tidak memiliki ini

indentasi maka cukup sulit untuk mengatakannya

di mana elemen ini dimulai dan di mana itu

berakhir terutama ketika kita memiliki banyak

kode

sekarang indentasi Anda mungkin terlihat sedikit

berbeda dari saya mungkin terlihat

sesuatu seperti ini di mana Anda memiliki lebih banyak

ruang daripada yang saya lakukan ini terjadi karena oleh

standar vs kode menggunakan empat spasi per

lekukan

umumnya di html dan css kita menggunakan dua

spasi per indentasi

untuk memperbarui ini kita akan pergi ke

toolbar bawah ini dan klik ini

bagian

dan kemudian kita akan klik indent

menggunakan spasi

dan kami akan mengubah ini dari 4 menjadi 2.

jadi sekarang file ini akan menggunakan dua

spasi per indent sehingga kita bisa menyingkirkan

ini dan tekan tab untuk mendapatkan yang benar

indentasi

sekarang yang hanya mempengaruhi untuk saat ini

file kita dapat mengubahnya untuk setiap file

maju dengan pergi ke bawah

kiri di sini dan mengklik ikon ini dan

lalu masuk ke pengaturan

dan di sini kita akan mencari

ukuran tab

saya akan menggulir ke bawah dan kami akan

ubah ukuran tab dari 4 menjadi 2.

baiklah jadi kita baru belajar dasar-dasarnya

dari html bagaimana menulis kode html dan kemudian

mengubahnya menjadi sebuah situs web

kami juga belajar bagaimana menulis html

atribut yang memodifikasi perilaku

sebuah elemen

dan kami belajar tentang sintaks yang

aturan yang harus kita ikuti kapan

menulis kode kita

berikut adalah beberapa latihan yang dapat Anda coba

sendiri untuk mempraktekkan apa yang telah kita pelajari

dalam pelajaran ini

jangan ragu untuk menjeda video di sini jika Anda

perlu

Anda dapat menemukan solusi ini juga

lebih banyak latihan di situs web saya super

simple.dev tautannya ada di bawah video

dalam pelajaran ini kita akan belajar css

atau lembar gaya kaskade

berdasarkan nama itu digunakan untuk gaya kita

halaman web sehingga digunakan untuk mengubah

tampilan elemen html kita

jadi saya sebenarnya sudah menyiapkan proyek itu

bisa kita lakukan dalam pelajaran ini jadi kita akan pergi

untuk membuka proyek ini dengan pergi ke

super

dot dev sederhana

latihan garis miring tombol garis miring

jadi di halaman web ini saya benar-benar punya

tombol yang terlihat bagus dari yang terkenal

website yaitu youtube dan twitter itu

kita dapat menyalin dan mempraktekkan css kita dengan

jadi kita akan masuk ke kode kita dan

kita benar-benar akan membuat yang baru

file untuk latihan ini

jadi mari kita buat file baru dan mari

menyebutnya

tombol.html

dan kita akan membuka html baru kita

file di browser kita

jadi mari kita buka folder yang berisi

kode kita

kita akan klik kanan

buka dengan google chrome

dan sekarang aku akan mengatur ini oleh

bergerak

desain referensi kami ke bawah seperti

ini agar lebih mudah bagi kita untuk menyalinnya

itu dengan css

saya hanya akan memindahkannya ke

sudut dan kemudian kita bisa bekerja

Di Sini

jadi pertama mari kita bekerja membuat

tombol berlangganan

jadi seperti yang kita pelajari sebelumnya

akan membuat tombol menggunakan html

jadi kurang dari

tombol

lebih besar dari

dan kemudian di dalam tombol kami, kami akan pergi

untuk memiliki teks

langganan

dan sekarang mari simpan dan segarkan halaman kita

dan sekarang kami memiliki kami

tombol berikutnya kita akan mulai

mengubah tampilan tombol ini

sehingga terlihat seperti berlangganan

tombol dari youtube

mari kita masuk ke kode kita dan kita akan pergi

untuk mulai menulis beberapa css untuk mengubah

tampilan elemen html ini

jadi untuk menulis css kita harus membuat yang baru

elemen disebut

elemen gaya

jadi elemen gaya ini unik dalam hal itu

itu tidak terlihat di halaman jadi

misalnya jika kita menyimpan file kita

lalu kami memuat ulang halaman

elemen gaya sebenarnya tidak

membuat apapun

jadi tujuan dari elemen ini adalah itu

di dalam elemen ini kita bisa menulis css

kode yang mengubah tampilan

elemen lainnya

sebagai contoh mari kita menulis bit pertama kita

kode css yang akan kita ketik

tombol

buka braket berlekuk-lekuk tutup berlekuk-lekuk

mengurung

dan kemudian di dalam tanda kurung ini kita

pada dasarnya akan memberikan instruksi untuk

komputer tentang cara memodifikasi

penampilan

misalnya kita bisa mengatur background

warna dasbor

kolon merah

dan titik koma

jadi pastikan Anda menulis ini

persis seperti yang saya miliki di sini sehingga kita

mengikuti aturan sintaks untuk css

jadi mari kita simpan file ini

dan menyegarkan halaman kami

dan sekarang Anda dapat melihat bahwa kami mengatur

warna latar belakang tombol menjadi merah

jadi seperti yang Anda lihat css mirip dengan html

kami hanya memberikan instruksi kepada

komputer dan kemudian komputer mengikuti

instruksi kami langkah demi langkah

dan seperti html kita harus mengikuti

aturan sintaks tertentu saat menulis kami

css agar komputer mengerti kita

kode

jadi apa aturan sintaks untuk css bagaimana

apakah kode ini berfungsi

jadi kata di depan sini disebut

pemilih css itu memberi tahu komputer yang mana

elemen pada halaman yang kita targetkan

dengan kode css kita

dalam hal ini kami menargetkan semua

tombol pada halaman dan kami akan

mengubah warna latar belakang semua

tombol pada halaman menjadi merah

sekarang di dalam tanda kurung ini ada

aturan lain yang harus kita ikuti

teks di sebelah kiri titik dua ini adalah

disebut properti css yang memberitahu

komputer apa yang kita ubah

di sebelah kanan usus besar

adalah nilai css yang memberitahu komputer

apa yang kita mengubah properti untuk

dalam hal ini kami mengubah properti

warna latar belakang merah dan itu

persis apa yang komputer lakukan

titik dua di sini hanya untuk memisahkan

properti dan nilai dan titik koma

di sini seperti periode dalam bahasa Inggris di

bahasa inggris Anda mengakhiri kalimat dengan tanda titik

di css Anda mengakhiri gaya

dengan titik koma

jadi itulah arti dari semua sintaks ini

jadi kami benar-benar dapat menambahkan beberapa gaya

di dalam tanda kurung ini

jadi mari lanjutkan dan tambahkan gaya lain

kita akan mengubah warna teks menjadi

putih untuk mencocokkan desain ini

jadi properti untuk mengubah teks

warna disebut

warna

jadi perhatikan bahwa itu tidak disebut teks

warna itu hanya sesuatu yang kita miliki

untuk mengingat

saya akan mengubahnya menjadi

putih

dan kami akan mengakhirinya dengan titik koma

mari menabung

dan menyegarkan

dan sekarang Anda dapat melihat bahwa kami mengubah

warna teks tombol ini menjadi putih

dan pada dasarnya itulah cara kerja css kami

beritahu komputer apa yang kita targetkan

dan kemudian kami memberikan beberapa gaya dan

komputer akan menerapkan gaya ini

satu per satu

jadi mari kita lakukan contoh lain

kali ini kita akan mengatur properti border

jadi perhatikan bahwa tombol kita memiliki batas

sementara tombol berlangganan di sini tidak

memiliki perbatasan

jadi kita akan mengatur

properti perbatasan

usus besar tidak ada

kita akan menyimpan file ini

dan menyegarkan

dan sekarang kami hanya menghapus perbatasan

jadi jika Anda melihat gaya kami di sini

sebenarnya cukup lurus ke depan mereka

cukup mudah untuk membaca kita mengatur

warna latar belakang menjadi warna teks merah

putih dan berbatasan dengan tidak ada

jadi seperti html css itu cantik

sederhana kita pada dasarnya adil

memberikan instruksi komputer

jadi teknik umum untuk pergi dari

sesuatu yang terlihat seperti ini

sesuatu yang terlihat seperti ini

adalah hanya mengubah gaya satu per satu

jadi kita akan terus berubah

gaya satu per satu sampai kita mendapatkan milik kita

desain di sini

gaya selanjutnya yang akan saya ubah adalah

tinggi sehingga tombol kami sedikit

pendek aku akan membuatnya lebih tinggi

jadi saya akan mengatur ketinggian

untuk sesuatu seperti 50px

px di sini mewakili piksel

piksel adalah unit yang sangat umum dari

pengukuran di dunia digital

ukuran gambar diukur dalam piksel video

ukuran diukur dalam piksel dan Anda

ukuran layar juga diukur dalam piksel

dalam hal ini kita akan mengatur

tinggi tombol hingga 50 piksel dan tidak

terlalu khawatir tentang mengetahui apa 50

piksel terlihat seperti Anda

tulis css dan bekerja dengan piksel lebih banyak

Anda merasakan seberapa besar ini

pengukuran ternyata

jadi untuk sekarang mari kita simpan file ini

dan menyegarkan halaman

dan sekarang kami memiliki tombol yaitu 50

tinggi piksel

tapi sebenarnya terlihat seperti itu sedikit

terlalu tinggi jadi saya akan mengubah

tinggi untuk sesuatu seperti

30 piksel

dan saya akan me-refresh halaman lagi

dan saya benar-benar ingin menjadi sedikit

sedikit lebih tinggi jadi saya akan mengubahnya menjadi

mungkin 36.

saya akan menyegarkan

dan saya pikir itu terlihat cukup bagus untuk saya

jadi Anda melihat bahwa di css kami melakukan banyak hal

trial and error untuk mendapatkan pengukuran kami

Kanan

sekarang mari kita terus bekerja langkah demi langkah untuk

mendapatkan desain kami

selanjutnya kita akan

sesuaikan lebarnya

jadi mari kita ubah ini menjadi sesuatu seperti

100 piksel

mari kita lihat bagaimana tampilannya

saya akan menyimpannya

menyegarkan

dan saya pikir itu terlihat sedikit juga

kecil jadi saya akan meningkatkannya hanya a

sedikit

105

dan menyegarkan

oke saya pikir itu terlihat cukup bagus untuk

Saya

berikutnya kita akan mengubah

warna latar belakang karena saat ini kami

merah tidak sama dengan desain kami

jadi vs kode memiliki fitur yang sangat bagus

yang merupakan pemilih warna

jadi jika kita mengarahkan kursor ke kotak warna ini di sini

itu memberi kita akses ke pemilih warna

bahwa kita dapat memilih warna lain dengan

jadi saya akan memilih sesuatu yang a

sedikit lebih dekat dengan apa yang saya lihat di

dasar

dan jangan khawatir tidak harus

sempurna

saya akan memilih sesuatu seperti 200 0

0.

saya akan menyimpan ini

dan menyegarkan

oke jadi yang terlihat saya pikir yang terlihat

cukup dekat

jadi Anda mungkin bertanya-tanya apa ini

nilai berarti kita pergi dari warna merah

ke rgb

200

jadi nilai rgb ini adalah cara lain

mengukur warna itu cara yang lebih tepat

mengukur warna dari hanya menggunakan

kata seperti merah atau putih

jadi cara kerja rgb itu cantik

banyak setiap warna dapat dibuat menggunakan a

kombinasi merah hijau dan biru jadi

itulah yang diwakili oleh sintaks ini

r mewakili berapa banyak warna merah yang kita miliki

warna ini

g mewakili berapa banyak hijau dan b

mewakili berapa banyak biru

dan ketiga angka ini mewakili bagaimana

banyak merah kita punya berapa banyak hijau dan bagaimana

banyak biru

nilai minimum adalah nol dan

nilai maksimum adalah

255.

jadi jika kita menghapus semua merah dan hijau

dan kami hanya memiliki biru maksimum

dan kami simpan

itu akan memberi kita warna biru

di sisi lain jika kita memiliki semua hijau

warna dan kami menyingkirkan biru

kita akan memiliki warna hijau

jadi pada dasarnya ini adalah cara kerja rgb

kombinasi merah hijau dan biru untuk

buat warna apa saja yang kita inginkan sekarang jangan

terlalu khawatir tentang mengetahui apa itu rgb

nilai terlihat seperti misalnya jika Anda memiliki

nilai acak seperti ini

jika Anda memberikan ini kepada saya, saya bahkan tidak akan melakukannya

tahu apa warna ini

biasanya saya hanya menggunakan color picker untuk

memilih warna yang saya inginkan dan kemudian

akan memberi saya nilai rgb yang saya butuhkan

satu-satunya nilai rgb yang saya sarankan kepada Anda

Ingat

adalah

jika kita mengatur semua warna secara maksimal

nilai jadi 255 255 dan 255

ini menciptakan putih

jadi kami menyimpannya dan menyegarkan yang dibuat

putih

jika kita mengatur ketiganya menjadi nol

yang menciptakan hitam

dan kami menyegarkan yang menciptakan warna hitam

warna

jadi sekarang mari kita kembali ke apa yang kita miliki

sebelumnya yang saya pikir

200

dan kami akan menyimpan dan menyegarkan

dan hal berikutnya yang akan kita ubah

adalah Anda mungkin tidak dapat melihatnya tapi

jika kita memperbesar di sini

tombol ini memiliki sudut membulat

sedangkan tombol kami memiliki sudut runcing

jadi untuk membuat sudut membulat pada css

properti untuk melakukan itu

berbatasan

radius lari

dan radius perbatasan membutuhkan piksel

pengukuran semakin tinggi piksel

lebih bulat sudut akan

jadi untuk sekarang mari kita coba titik dua 2 piksel

dan simpan

sekarang jika kita me-refresh halaman tombol kita

sekarang memiliki sudut membulat seperti kita

desain

jadi saya akan memperkecil dan memperkecil

mundur
jadi hal terakhir yang akan saya ubah adalah

jika kami mengarahkan kursor ke tombol ini, Anda akan

perhatikan bahwa mouse kita berubah menjadi ini

semacam tangan

tangan ini disebut pointer

jadi kita akan berubah

kursor

mouse hal yang Anda arahkan

sekitar biasanya disebut kursor dan

kita akan mengubah kursor ke a

penunjuk

mari simpan dan segarkan

dan begitulah cara Anda mendapatkan tangan ini

setiap kali mouse Anda berada di atas tombol ini

jadi itu pada dasarnya bagaimana kita pergi dari

tombol html dasar

untuk sesuatu yang terlihat lebih

profesional

kami membuat tombol dengan html dan kemudian

kami mengatur gaya satu per satu

sekarang Anda mungkin bertanya-tanya bagaimana saya tahu

semua properti css ini apa kabar

seharusnya menghafal semua ini

jadi biasanya ketika saya tidak tahu css

properti untuk sesuatu misalnya jika i

ingin membuat sudut membulat

saya akan pergi ke google dan mencari

sesuatu seperti

css dan apa yang ingin saya lakukan katakanlah saya

ingin

sudut bulat

dan biasanya beberapa tautan pertama memberi

beberapa

saran yang sangat bagus tentang apa

properti adalah

jadi di sini segera kita memiliki perbatasan

radius properti di link pertama

dan itu memberi kita beberapa contoh kode yang kita

bisa menggunakan

jadi begitulah cara saya menemukan semua css

properti saya melihat desain dan saya bertanya

sendiri baik-baik saja apa yang harus saya capai

desain ini dan kemudian saya mencarinya

google

jadi jangan khawatir karena Anda lebih banyak menggunakan css dan

lebih Anda akan memiliki untuk google

hal-hal yang Anda tidak tahu dan Anda akan

biasakan saja dengan proses penemuan

jawaban dengan mencarinya

tetapi untuk tujuan kursus ini saya

akan memberi Anda banyak css ini

properti sehingga Anda bisa mendapatkan beberapa yang baik

berlatih dengan mereka

langkah selanjutnya yang akan kita lakukan adalah

salin tombol bergabung ini

jadi mari kita membuat tombol baru

di halaman kami

dengan html

dan ini akan menjadi tombol bergabung

jadi kita akan menempatkan teks

bergabung di dalam tombol ini

mari kita simpan

dan menyegarkan

dan sayangnya sepertinya kita bergabung

tombol terlihat seperti tombol berlangganan

dan itu karena di css kami

tombol kata ini berarti semua ini

gaya ditargetkan untuk semua tombol aktif

halaman

jadi bagaimana kita membuat gaya ini hanya

menargetkan tombol berlangganan

jadi kita akan belajar html baru

atribut yang bisa kita gunakan untuk ini jadi

ingat di pelajaran sebelumnya kita

belajar bahwa atribut memodifikasi

perilaku elemen

dalam pelajaran ini kita akan belajar a

atribut yang sangat berguna yang banyak digunakan

di css

kita akan pergi ke tag pembuka

lagi

dan kita akan menambahkan atribut baru

disebut atribut kelas

jadi kita akan mengetik class equals

kutipan kutipan

jadi atribut kelas pada dasarnya memungkinkan kita

beri label elemen html misalnya mari

beri label tombol ini

tombol berlangganan

dan juga kode saya semakin sedikit

lama untuk baris ini jadi aku akan

letakkan teks pada baris baru untuk membuatnya

lebih mudah dibaca jadi ingat menurut

html sintaks ruang ekstra ini tidak

peduli mereka diabaikan

jadi sekarang kita mengatur atribut kelas

kami pada dasarnya telah menetapkan label untuk ini

tombol dan kami dapat menargetkan label ini

css kami

jadi untuk menargetkan kelas di css

kita bisa mulai dengan sebuah titik

dan kemudian kita akan mengetikkan

nama kelas jadi kita akan mengetik

langganan

tombol dasbor

jadi menurut sintaks css jika kita mulai

kode ini dengan titik yang berarti kita

akan menargetkan nama kelas, bukan

nama elemen seperti tombol

jadi di sini kita akan mulai menargetkan

sembarang elemen yang memiliki kelas

tombol berlangganan jadi jika kita simpan

dan menyegarkan

sekarang Anda akan melihat bahwa semua gaya ini

hanya berlaku untuk elemen yang memiliki

langganan kelas

dan tombol gabung kami tidak memilikinya

gaya-gaya ini
sekarang beberapa elemen dapat memiliki hal yang sama

kelas jadi misalnya

jika saya mengatur kelas tombol gabung ke

berlangganan tombol dasbor

semua gaya ini akan diterapkan ke mana saja

elemen dengan kelas tombol berlangganan

itulah arti titik ini dan itu

berarti ini akan diterapkan

ini

dan ini

jadi jika kita menyimpan

dan menyegarkan

sekarang tombol gabung memiliki gaya ini

lagi karena memiliki kelas

tombol berlangganan

tetapi untuk tujuan kita sebenarnya kita inginkan

ini untuk memiliki serangkaian gaya yang berbeda

jadi mari kita berikan kelas yang berbeda ke

tombol gabung

kita akan memberikan kelas bergabung

dan saya juga akan

memformat ulang kode saya sedikit untuk membuatnya

lebih mudah dibaca

jadi mari kita simpan dan segarkan

dan sekarang kita kembali ke

di mana kita dapat mulai memodifikasi gabungan kita

tombol

sekarang mari kita mulai menata tombol gabung kita

untuk mencocokkan desain kami jadi ingat

strategi umum

adalah untuk membuat elemen dengan html seperti

ini dan kemudian gaya satu per satu sampai

Anda cocok dengan desain Anda

jadi pertama kita akan menargetkan kelas

itulah arti titik ini kita akan pergi

untuk menargetkan tombol tanda hubung gabung kelas

oke jadi mari kita atur tanda hubung latar belakang

warna

menjadi putih

mari kita simpan

Dan

menyegarkan dan

selanjutnya mari kita berurusan dengan perbatasan

jadi perbatasan kita

sedikit abu-abu kita bisa mengaturnya

mungkin warna garis batas

menjadi biru dan mari kita lihat tampilannya

mari simpan dan segarkan

oke jadi terlihat sedikit lebih gelap dari

apa yang kita miliki dalam desain kita

mari masuk ke color picker dan pilih

warna yang lebih akurat

Aku hanya akan melakukan ini dengan mata

jangan khawatir jika itu tidak sepenuhnya akurat

kami hanya mencoba untuk mendapatkan sesuatu

itu cukup dekat aku akan pergi

Di Sini

dan aku akan memilih sesuatu seperti

mungkin sesuatu seperti ini

mari kita simpan

menyegarkan

dan itu sedikit terlalu gelap jadi saya

akan memilih sesuatu sedikit

lebih ringan

simpan dan segarkan

oke saya pikir itu cukup bagus

tetapi kami juga memperhatikan bahwa papan kami adalah a

sedikit aneh jadi di atas sepertinya

itu lebih gelap itu warna yang lebih terang

biru

dan di bagian bawah itu agak gelap

warna biru jadi untuk memperbaikinya kita akan pergi

untuk mengatur perbatasan

gaya

untuk menjadi

warna solid

mari kita simpan ini

dan menyegarkan

dan sekarang kita mendapatkan warna solid di sekelilingnya

hal berikutnya yang bisa kita ubah adalah milik kita

perbatasan terlihat sedikit tebal dibandingkan

ke desain

jadi kita akan mengubah perbatasan

lebar dasbor

sehingga Anda akan melihat banyak gaya ini

cukup jelas

jadi kita akan mengatur lebar perbatasan

katakanlah 1
piksel mari kita simpan dan segarkan

oke jadi itu terlihat cukup bagus

selanjutnya kita akan mengatur warna teks

jadi kita akan mengatur warna teks

biru dan memilikinya sama dengan perbatasan kita

ingat properti untuk mengatur warna teks

disebut warna

titik dua dan kami akan menyalin warna ini

dibawah sini

simpan dan segarkan

oke jadi kelihatannya

sedikit sedikit ringan tapi saya pikir itu

Oke

sekarang kita akan mengatur tinggi dan

lebar

jadi mari kita mengatur ketinggian

menjadi sesuatu seperti 36 piksel untuk dicocokkan

tombol berlangganan kami

menyegarkan

oke dan sekarang kita akan mengatur

lebar

jadi mari kita coba

saya tidak tahu 60 piksel mari kita lihat caranya

yang terlihat

simpan dan segarkan oke saya akan mengatur

untuk

Mungkin

62.

oke mari kita simpan dan segarkan

dan sekali lagi kita akan mengatur beberapa

sudut bulat sehingga

radius garis batas

2 piksel

kita akan menyimpannya dan menyegarkan

dan sekarang kita hampir sampai untuk mencocokkan

desain ini

yang terakhir kita akan mengatur adalah

pointer kursor untuk mendapatkan yang bagus

penunjuk tangan saat kita melayang

tombol jadi segarkan

sekarang saat kita mengarahkan kursor ke gabungan

tombol kami memiliki ikon penunjuk yang bagus ini

jadi hal lain yang kami perhatikan adalah itu

ada banyak ruang di antara keduanya

tombol dan tidak ada banyak ruang

antara kita

jadi di ruang css disebut margin so to

tambahkan ruang kita akan menambahkan beberapa margin

jadi mari kita pergi ke tombol berlangganan

gaya

dan kita akan menambahkan beberapa margin

lari ke kanan

jadi kita akan menambahkan beberapa margin atau

beberapa ruang di sebelah kanan tombol ini

dan kita akan mengatur ruang untuk

mungkin delapan piksel mari kita lihat bagaimana itu

terlihat

simpan dan segarkan

dan itu terlihat cukup bagus untuk saya jadi sekarang

kita sudah selesai dengan tombol gabung

terakhir kita akan membuat tweet ini

tombol

mari kita kembali ke kode kita

dan ingat teknik umum kita adalah

nomor satu buat elemen dengan html

dan kemudian gaya nomor dua dengan css

satu per satu

jadi kita akan membuat

sebuah tombol

dengan sebuah teks

menciak

Saya akan memindahkan editor saya sedikit ke

di sini sehingga kita bisa melihatnya

Saya akan memindahkan ini ke sini juga

dan mari segarkan halaman kita jadi sekarang ini

tombol memiliki gaya yang sama dengan gabungan

tombol karena memiliki tombol bergabung

kelas

dan itu menjadi sasaran di sini

jadi alih-alih tombol gabung kami

akan memberikan kelas atau label

dari

menciak

tombol sekarang simpan dan segarkan dan sekarang

kita kembali ke gaya default

jadi di css kami, kami akan menulis beberapa

kode kita akan menargetkan kelas

jadi kita mulai dengan titik untuk menargetkan kelas

kita akan menargetkan

tombol twit

kelas

jadi sama seperti tombol kami yang lain

akan menyesuaikan gaya tombol ini

satu per satu sampai kami cocok dengan desain kami

jadi mari kita mulai dengan

warna dasbor latar belakang

mari kita atur ini

biru untuk memulai

sekarang aku akan

mencoba yang terbaik untuk mencocokkan biru twitter

yang kita miliki di sini

jadi saya akan memilih sesuatu seperti ini

Dan

saya pikir itu terlihat cukup bagus

Simpan itu

dan menyegarkan

Oke

kita akan membiarkannya seperti itu untuk saat ini kita

mungkin menyesuaikannya nanti

mari kita ubah warnanya sekarang menjadi putih

sehingga akan mengubah warna teks

Oke

mari kita singkirkan perbatasan

segarkan dan simpan

mari kita beri ketinggian

dari 36 piksel

untuk mencocokkan tombol kami yang lain

Oke
dan warnanya sedikit mati jadi saya

pergi ke

sesuaikan sedikit saja mungkin memang seharusnya begitu

sedikit lagi

seperti ini

Simpan itu

menyegarkan

oke saya cukup senang dengan ini

sekarang kita akan menyesuaikan lebarnya

ke

Mungkin

105. mari kita lihat tampilannya

oke itu sedikit terlalu banyak mari kita

sesuaikan dengan

80.

mari sesuaikan ke 70. jadi seperti yang Anda lihat

ada banyak trial and error ketika

kami bekerja dengan css

sekarang untuk mendapatkan efek bulat ini

kita dapat mengatur radius perbatasan

mari kita mulai dengan dua piksel

jika kita menyegarkan kita mendapatkan sudut yang membulat dan

kita mulai meningkatkan piksel untuk

radius perbatasan

simpan dan segarkan

itu mulai semakin bulat dan bulat

jadi trik untuk mendapatkan putaran ini

tombol adalah kita harus mengatur perbatasan

radius setengah tinggi atau lebar

mana yang lebih rendah jadi dalam hal ini

tingginya 36

jika kita mengatur radius perbatasan menjadi setengah dari

yang 18

simpan dan segarkan

begitulah cara kami mendapatkan warna bulat ini

hal terakhir yang akan kita lakukan adalah

cetak tebal teks di sini

jadi dalam desain kami teks tweet ini di sini

sangat berani

kita akan membuat font kita tebal sebagai

Sehat

untuk melakukan itu kita akan mengatur ini

properti yang disebut font

dasbor berat saya akan mengaturnya menjadi tebal

simpan dan segarkan

oke terlihat cukup bagus sepertinya

font ini sebenarnya sedikit lebih besar

dari kita jadi mari kita benar-benar mengatur font

setel ukuran dasbor ke

mungkin 15. lihat tampilannya

simpan dan segarkan

oke saya pikir itu terlihat cukup dekat saya

akan mengubah lebar menjadi mungkin 74.

lihat bagaimana tampilannya

oke jadi ini saya pikir ini cukup baik

saat ini kami hanya mencoba untuk menyalin

hal-hal dengan mata nanti saya akan menunjukkan kepada Anda a

teknik bagaimana menyalin warna-warna ini

dan pengukuran persis tapi untuk saat ini

itu cukup baik untuk dapat dicapai

desain ini hanya dengan melihatnya

jadi hal terakhir untuk tombol ini adalah

menambahkan

penunjuk kursor

mari simpan dan segarkan

jadi jika kita mengarahkan kursor ke tombol ini kita sekarang

mendapatkan petunjuk yang bagus

untuk kursor kita

jadi hal terakhir yang akan saya sesuaikan

inilah jarak antara keduanya

tombol ingat spasi di css adalah

disebut marjin

jadi kita akan menambahkan ke tombol join

sebenarnya mari kita tambahkan ke tweet

tombol hanya untuk latihan

kita akan menambahkan spasi jadi kita

akan menambah margin

ke kiri

titik dua dan mari kita buat 8 piksel seperti kita

memilikinya untuk tombol berlangganan

mari kita simpan

dan menyegarkan

dan di sana kita pergi

jadi kami mengambil

tombol dasar kami dan kami dapat melakukannya

salin desain yang terlihat sangat bagus ini

hanya dengan melihat mereka dan

teknik yang kami gunakan untuk melakukan ini adalah

pertama kita membuat elemen dengan html

dan kemudian kami menatanya dengan css satu per satu

sampai terlihat cukup dekat dengan kita

desain

jadi di sini adalah sekelompok latihan dari

website populer lainnya yang bisa Anda coba

keluar untuk diri sendiri

ini adalah tantangan yang bagus untuk Anda

dapat melihat situs web dengan mata dan menggunakan

css untuk menyalin gaya yang Anda lihat

dalam pelajaran ini kita akan belajar beberapa

keterampilan css menengah seperti cara

membuat transisi melayang dan bayangan

untuk sebagian besar tombol yang Anda lihat di internet

jika kita mengarahkan kursor ke mereka dengan mouse kita

mereka sedikit mengubah gaya mereka

mereka menjadi lebih gelap beberapa dari mereka menjadi lebih terang

kita akan belajar bagaimana melakukannya di

kode kita

jadi kita akan menggunakan latihan yang sama

seperti sebelumnya sebagai pengingat Anda dapat menemukannya

di dot dev super sederhana

latihan tombol garis miring

tombol-tombol ini saat kita mengarahkan kursor ke atasnya

mereka benar-benar mengubah gaya mereka

jadi ini akan membantu kita berlatih

belajar tentang hover

selain itu Anda akan melihat bahwa jika kita

melayang masuk dan keluar mereka mengubah gaya mereka

lancar sehingga kita juga bisa belajar tentang

transisi dan terakhir tombol tweet ini

jika kita mengarahkan kursor ke atasnya, itu akan terlempar sedikit

sedikit bayangan

jadi itu akan membantu kita berlatih bayangan

tapi pertama-tama mari kita kerjakan gaya hover

untuk tombol berlangganan

mari masuk ke kode kita dan temukan

gaya untuk tombol berlangganan yaitu

semuanya di sini

dan sekarang untuk membuat efek hover kita

akan membuat blok css baru

kita akan menggunakan titik untuk menargetkan

kelas jadi kali ini kami masih menargetkan

tombol tanda hubung berlangganan

tapi kali ini kita akan menambahkan titik dua

melayang

kurung buka kurung tutup

jadi di dalam ini

adalah gaya yang hanya akan diterapkan saat kita

arahkan kursor ke tombol itulah yang ini

usus besar melayang berarti

Misalnya

kita dapat mengatur warna dasbor latar belakang

menjadi hijau

sekarang mari kita simpan file kita

dan menyegarkan halaman

dan saat kita mengarahkan kursor ke tombol ini

Anda akan melihat bahwa itu hijau

jadi cara kerjanya adalah jika kita

tidak melayang
semua gaya ini berlaku demikian

warna latar belakang merah

jika kita mengarahkan kursor ke tombol

gaya ini sekarang berlaku sebagai tambahan

gaya ini jadi pada dasarnya kami menambahkan

gaya ekstra saat kita melayang

jadi titik dua ini melayang dikenal sebagai pseudo

kelas

itu pada dasarnya menambahkan gaya ekstra dalam a

situasi tertentu jadi dalam hal ini itu

akan menambahkan gaya ekstra saat kita mengarahkan kursor

contoh lain dari kelas semu

adalah

tombol berlangganan titik

usus besar

aktif

sehingga kelas semu aktif aktif

ketika kita mengklik elemen tersebut

jadi ketika kita mengklik tombol kita bisa

atur warna dasbor latar belakang menjadi biru

mari simpan ini dan segarkan

sekarang ketika kita mengarahkan kursor ke atas

kita akan menerapkan gaya ini sehingga

warna latar belakang akan menjadi hijau

dan kemudian ketika kita klik

kita akan menerapkan gaya aktif

dan kemudian warna latar belakang akan hilang

menjadi biru

jadi mari kita lihat desain kita dan lihat apa

jenis gaya hover yang kita miliki

mari segarkan

jadi saat kami mengarahkan kursor ke langganan kami

tombol

tampaknya berubah sedikit lagi

lampu

dan jika kita mengkliknya

bahkan menjadi lebih ringan

jadi cara membuat tombol kita lebih ringan adalah

menggunakan properti baru

bahwa saya akan memperkenalkan jadi mari kita dapatkan

menyingkirkan ini untuk saat ini

mari simpan dan segarkan

jadi kami menyingkirkan kelas semu itu

gaya

kita akan mengatur properti css yang disebut

kegelapan

jadi opacity memberi tahu kita bagaimana tembus pandang

elemen html apakah dibutuhkan nilai antara

0 dan 1.

nilai 1 artinya

elemen ini benar-benar normal jadi jika

kami menyimpan ini

dan menyegarkan

Anda dapat melihatnya jika kita mengarahkan kursor ke atasnya

itu benar-benar normal

dan saat kita menurunkan opacity mari

turunkan menjadi 0,7

elemen mulai memudar

jadi kalau kita kurangi lagi menjadi 0,3

menyegarkan

sekarang malah lebih pudar jadi opacitynya

digunakan untuk memudar elemen jika kita pergi

dari 1 ke 0 elemen akan memudar

keluar

jadi jika kita set ke nol

dan menyegarkan

sekarang pada dasarnya sepenuhnya

transparan dan tembus pandang

jika opacity berubah dari nol menjadi satu

itu berarti elemen akan dimulai

memudar sehingga begitulah opacity bekerja

untuk saat ini jika kita arahkan kursor ke atasnya mari kita atur

opasitas ke

mungkin 0,8

jadi itu akan terjadi

sedikit tembus tapi tidak sepenuhnya

tembus pandang jadi mari segarkan

dan arahkan kursor ke atasnya oke mari kita lihat kita

desain sehingga terlihat cukup dekat

apa yang kita miliki

selanjutnya mari kita atur gaya aktif

jadi dalam desain kami jika kami mengklik ini itu

bahkan menjadi lebih ringan

jadi kita akan menetapkan lebih rendah

opacity untuk membuat tombol kita memudar

lebih ketika kita klik di atasnya

mari kita atur ke

sesuatu seperti 0,4

atau 0,5 katakanlah

simpan dan segarkan

sekarang saat kita mengarahkan kursor ke atasnya sekarang saat kita

klik

tombolnya menjadi lebih ringan dan kita bisa

bandingkan dengan desain kami

dan itu terlihat cukup bagus untukku

kita akan mengerjakan gaya hover

untuk tombol gabung kami

jadi jika kita melihat desain kita

warna untuk jenis tombol gambar ini

inverts sehingga warna latar belakang dan

warna teks yang mereka balik

jadi untuk melakukan itu kita akan masuk ke kita

kode

dan lagi kita akan

targetkan tombol gabung dengan titik

tombol gabung

dan kita akan menambahkan kelas semu

ditelepon

usus besar

melayang

dan sekarang semua gaya di dalam sini akan

terapkan saat kita mengarahkan kursor ke tombol ini

jadi saat kita mengarahkan kursor ke atasnya, kita menginginkannya

membalikkan warna sehingga kami ingin mengatur

warna dasbor latar belakang

untuk warna teks kami yang ini

Salin dan tempel

dan kami juga ingin mengatur warna teks

ke warna latar belakang kita jadi kita akan pergi

untuk mengaktifkannya

mari kita salin

tempel di sini

simpan dan segarkan

dan sekarang saat kita mengarahkan kursor ke gabungan kita

tombol

itu terlihat cukup bagus

selanjutnya adalah ketika kita klik join

tombol Anda akan melihat bahwa itu juga memudar

keluar jadi kita akan menambahkan aktif

kelas semu ke tombol ini juga

jadi targetkan kelas tombol gabung

dan tambahkan kelas semu yang disebut aktif

jadi gaya ini akan aktif saat kita

klik elemen ini

jadi mari kita mengatur opacity

untuk mungkin 0,7 mungkin

simpan segarkan

klik oke

jadi saya pikir itu terlihat cukup dekat

0,7 terlihat cukup bagus

jadi begitulah cara kami mengatur gaya hover dan

kelas semu lainnya dengan kode css kami

selanjutnya kita akan belajar caranya

transisi lancar antara keduanya

gaya jadi misalnya jika kita kembali ke

proyek kami dan kami mengarahkan kursor ke ini

tombol Anda akan melihat bahwa latar belakang

warna dan warna teks berubah dengan lancar

tapi untuk warna kami hampir berubah

langsung jadi bagaimana kita membuat ini

transisi

jadi untuk melakukan itu kita akan menggulir ke atas

ke tombol berlangganan kami terlebih dahulu

kita akan menambahkan properti bernama

transisi

jadi properti transisi mengambil dua nilai

yang pertama adalah apa yang kita inginkan

transisi

jadi dalam kasus kami, kami ingin mentransisikan

opacity lancar jadi kita ingin lancar

memudarkan tombol saat kita mengarahkan kursor

itu bukan secara instan

jadi mari kita transisi opacity

dan nilai kedua adalah berapa lama ini

transisi akan mengambil

misalnya mari kita atur ke one s which

adalah satu detik

akhiri dengan titik koma dan simpan

mari kita kembali dan menyegarkan

dan sekarang saat kita mengarahkan kursor ke tombol kita

Anda akan melihat bahwa opacity berubah

lancar sekarang mungkin sedikit

sulit dilihat jadi mari kita ubah ini menjadi

0.1 untuk menunjukkan efeknya

menyegarkan

jadi sekarang Anda dapat melihat bahwa opacity adalah

berubah dengan lancar selama satu detik

jadi ini adalah bagaimana Anda transisi antara

gaya yang berbeda saat Anda melayang

atas mereka

sekarang mari kita atur kembali ke 0.8

dan kita akan mengubah satu detik

soalnya agak lama

jadi biasanya

durasi transisi yang baik adalah sesuatu

menyukai

0,15 detik

jadi cukup cepat tapi tidak terlalu

cepat dan tidak terlalu lambat

mari buka halaman web kami dan segarkan

sekarang ketika kita mengarahkan kursor ke atasnya kita mendapatkan yang bagus

transisi yang mulus mungkin sedikit

sulit untuk mengatakan tetapi kami mendapatkan kelancaran yang bagus

transisi

bukannya apa yang kita miliki sebelumnya

transisi segera

mari kita kerjakan tombol gabung sekarang jadi

yang satu ini jauh lebih mudah untuk melihat

perbedaan

mari gulir ke bawah ke tombol gabung

dan sekali lagi kita akan menambahkan

transisi

jadi kita akan menambahkan

transisi

dan kami akan memberikan dua nilai

apa yang kita ingin transisi dan berapa lama

pertama mari kita transisi

warna dasbor latar belakang

dan berapa lama kita akan transisi

selama satu detik

sebagai

contoh simpan file kami dan segarkan

sekarang saat kita mengarahkan kursor ke tombol gabung

warna latar belakang berubah dengan lancar

lebih dari satu detik

tetapi Anda akan melihat bahwa warna teks

perubahan segera sedangkan teks

warna di sini

juga jenis transisi

jadi untuk membuat transisi warna teks sebagai

Sehat

kita perlu menambahkan properti lain ke

transisi sehingga kita dapat benar-benar transisi

beberapa properti kita hanya harus

pisahkan dengan koma

jadi jika kita memiliki koma di sini kita dapat menambahkan

properti lain untuk transisi kali ini

saya akan melakukan transisi warna

dan kami juga akan memberikannya

durasi yang satu detik jadi berapa lama

diperlukan untuk mentransisikan properti ini

simpan dan segarkan

sekarang ketika kita mengarahkan kursor ke tombol ini

akan mentransisikan kedua warna latar belakang

dan warna lancar lebih dari satu detik

dan itulah dasarnya bagaimana transisi

bekerja

jadi terkadang Anda mungkin tergoda untuk memasukkan

properti transisi ini

ke dalam hover

karena kamu berpikir begitu

kami ingin bertransisi saat kami mengarahkan kursor ke sana

kita harus meletakkannya di sini

sekarang masalahnya adalah jika kita

menyegarkan

saat kita mengarahkan kursor ke tombol semuanya

terlihat bagus tetapi segera setelah kami keluar

gaya ini segera berubah dan

itu karena ingat gaya ini

hanya berlaku saat kita melayang

jadi jika kita melayang maka kita memiliki

transisi tapi segera setelah kami lepas landas

melayang

itu sama saja dengan tidak memiliki

transisi sama sekali jadi itu salah satu yang umum

jebakan properti transisi

jadi mari kita pindahkan kembali ke sini

seharusnya

jadi pastikan Anda meletakkan

transisi selalu dalam basis semacam ini

gaya css

hal terakhir yang akan kita pelajari

pelajaran ini adalah bagaimana membuat bayangan

jika kita pergi ke proyek kita dan kita melihat

desain kami saya akan memperbesar di sini

ketika saya mengarahkan kursor ke tombol tweet itu

menciptakan bayangan samar di bawah tombol

jadi kita akan belajar cara membuat

ini

jadi mari kita perkecil untuk saat ini

kita akan pergi ke

gaya tombol tweet

dan bayangan hanyalah css lainnya

properti jadi properti untuk bayangan adalah

dasbor kotak

bayangan

usus besar

sekarang bayangan kotak sebenarnya membutuhkan empat

nilai-nilai

jadi saya akan mengatur nilai ke nol

untuk sekarang

dan kemudian kita akan mengubahnya satu

oleh satu untuk melihat bagaimana mereka bekerja

mari kita simpan ini

dan menyegarkan

dan sekarang kami memiliki bayangan tetapi kami tidak bisa

melihatnya karena itu tepat di bawah

tombol

jadi nilai pertama di sini menentukan

posisi horizontal bayangan

misalnya saya dapat mengaturnya menjadi 10 piksel

dan jika saya simpan

bayangan akan muncul

10 piksel ke kanan

nilai kedua
mengatur posisi vertikal bayangan

misalnya jika saya set ke

10 piksel

dalam nilai kedua

itu akan mendorongnya 10 piksel ke bawah

jadi sekarang Anda dapat melihat kami benar-benar memiliki

bayangan

10 piksel ke kanan dan 10 piksel

turun dari tombol

sekarang nilai ketiga di sini adalah blur

jadi jika kita mengatur blur mungkin 10 piksel

menyimpan

menyegarkan

sekarang bayangan menjadi kabur dan

nilai terakhir jelas warna jadi kami

benar-benar dapat mengubahnya menjadi apa pun yang kita

ingin kita benar-benar dapat mengubahnya ke

sesuatu seperti

merah

simpan segarkan dan kami mendapatkan bayangan merah

jadi ini pada dasarnya bagaimana bayangan bekerja kita

memiliki posisi horizontal

posisi vertikal

buram dan warna

jadi jangan khawatir semakin Anda bekerja

dengan bayangan semakin banyak yang akan Anda dapatkan

akrab dengan apa empat nilai ini bisa

Mengerjakan

jadi mari kita coba membuat yang lebih realistis

bayangan

biasanya bayangan tidak berwarna merah atau warna apa pun

mereka biasanya memiliki warna yang lebih gelap

dari apa pun yang mereka tutupi

jadi untuk membuat warna seperti itu kita

akan membutuhkan cara baru untuk mengukur

warna

jadi mari kita singkirkan ini dan kita pergi

untuk menggunakan sesuatu yang disebut rgb a

rgba sama dengan rgb

kecuali ada nilai

jadi ini nilai dasarnya berarti

opacity warna bagaimana tembusnya

adalah

kita dapat mengatur rgb ke nol nol nol

yang membuat kita menjadi hitam seperti yang kita pelajari

dan kemudian nilai keempat adalah nilai kita

jika kita atur ke 1 dan simpan ini akan terjadi

menjadi hitam murni

tapi saat kita menurunkan nilai warnanya

akan semakin memudar

dan semakin transparan

jadi jika kita kurangi menjadi

0,6

simpan dan segarkan

sekarang warna ini semakin banyak

transparan dan memudar

jadi warna yang cukup alami untuk bayangan

adalah sesuatu yang sangat samar seperti

0,15
jadi untuk bayangan kita biasanya tidak menginginkannya

menjadi bayangan terlalu terlihat adalah yang terbaik

ketika mereka sangat halus

dan sekarang kami jenis ingin memindahkan

bayangan sedikit lebih dekat ke tombol

sehingga terlihat sedikit lebih alami begitu

mari kita benar-benar memindahkannya mungkin

lima piksel dan lima piksel mari kita lihat

bagaimana tampilannya

simpan dan segarkan

oke saya pikir itu terlihat cukup bagus jadi

begitulah cara kami menciptakan tampilan alami

bayangan dengan properti bayangan kotak kita

memiliki empat nilai posisi horizontal

posisi vertikal blur dan warna

diukur dengan rgba

nilai a berarti opacity atau bagaimana c

melalui warna ini

langkah terakhir dari pelajaran ini adalah hanya

membuat bayangan ini muncul saat kita mengarahkan kursor

atas tombol jadi misalnya untuk di sini

jika kita mengarahkan kursor, kita bisa melihat bayangannya

jika kita tidak bayangannya hilang jadi ini

adalah yang lain

gaya tombol yang bisa kita buat

jadi mari kita gunakan apa yang kita pelajari sejauh ini

ingat pertama kita menggunakan titik untuk target

kelas jadi kita akan menargetkan

kelas tombol tanda hubung tweet

kita akan menambahkan pseudo

kelas di sini disebut hover

dan kemudian kita akan memindahkan bayangan kita

ke kelas pseudo hover mari kita potong

dan paste di sini

jadi ingat cara kerjanya adalah itu

mari kita segarkan dulu

jika kita tidak mengarahkan kursor ke tombol

kami mendapatkan semua gaya ini

jika kita mengarahkan kursor ke tombol kita

akan mendapatkan gaya ini ini

hover gaya serta semua ini begitu

gaya ini ditambahkan saat kita mengarahkan kursor

jadi sekarang saat kita menyegarkan

dan kami mengarahkan kursor ke tombol ini kami

akan mendapatkan

bayangan yang cukup halus itu tidak sempurna

tapi saya pikir itu cukup dekat dengan apa yang kita

ingin

sekarang hal terakhir yang akan kita lakukan adalah

untuk transisi bayangan

jadi kita benar-benar dapat mentransisikan bayangan

cukup mudah dengan hanya menambahkan

properti transisi

dan kita akan mengatakan apa yang kita inginkan

untuk transisi dan berapa lama sehingga Anda inginkan

untuk mentransisi bayangan dasbor kotak

dan mari kita transisi ke sesuatu

alami seperti 0,15 detik

sekarang simpan dan segarkan

sekarang ketika kita mengarahkan kursor ke tombol ini kita

dapatkan yang bagus

transisi pada bayangan seperti ini

baiklah jadi hal terakhir yang kita lakukan

lakukan adalah saya menyadari saya lupa untuk berubah

durasi di sini jadi mari kita ubah ke

0,15

dan 0,15

mari kita simpan

segarkan jadi sekarang ini terlihat seperti ini

apa yang kita miliki dalam desain kita

jadi kami baru belajar beberapa perantara

keterampilan html seperti membuat hover

mempengaruhi transisi kelas semu lainnya

dan bayangan

berikut ini beberapa latihan lagi dari famous

situs web yang dapat Anda coba salin

kali ini kita juga akan menyalin

melayang gaya

seperti biasa Anda dapat menemukan solusi ini

dan lebih banyak latihan di bawah video

dalam pelajaran ini kita akan belajar

tentang salah satu alat yang paling berguna untuk

pengembangan web yang disebut dev chrome

alat dan kita akan menggunakan dev

alat untuk mendapatkan warna yang sempurna untuk kami

tombol

jadi pertama-tama apa itu dev chrome

alat jadi saya menemukan bahwa itu jauh lebih mudah

mendemonstrasikannya daripada mencoba menjelaskan

jadi mari kita pergi ke website kami

dan kita akan klik kanan di

daerah kosong

dan kita akan klik memeriksa

dan ini akan membuka alat dev

jadi hal yang keren tentang ini adalah kita

sekarang dapat melihat semua html di halaman kami

jika kita menelusuri di sini kita bisa melihat semua

tombol

jadi ini adalah cara yang bagus untuk memvisualisasikan

html serta css di halaman kami jika i

klik salah satu tombol ini

saya bisa melihat semua css yang diterapkan

tombol ini

jadi yang lebih baik adalah kita bisa

buka alat dev di situs web apa pun itu

kita inginkan sehingga kita benar-benar dapat membukanya

di super simple.dev

dan Anda dapat melihat semua html yang aktif

website ini serta semua css begitu

ini adalah alat yang sangat hebat di mana Anda

dapat membukanya di situs web apa pun yang Anda inginkan

dan lihat gaya persisnya

menggunakan situs web tersebut

fitur selanjutnya yang ingin saya tunjukkan adalah

ikon penunjuk ini di kiri atas

jadi daripada mencoba untuk menemukan ini

tombol di semua html ini kita bisa

sebenarnya klik ikon penunjuk ini dan itu

akan membiarkan kita mengarahkan kursor ke elemen apa pun

halaman web dan tunjukkan di sini

jadi jika kita mengarahkan kursor ke tombol tweet ini

dan klik itu

itu akan menemukan elemen untuk kita di

html

dan sekarang kita bisa melihat gaya ini di sini

untuk melihat seperti apa gaya dan banyak lagi

yang penting latar belakang seperti apa

warna diatur pada tombol ini sehingga kita

bisa mendapatkan warna latar belakang yang sempurna

jadi satu hal yang perlu diperhatikan adalah ini

warna latar belakang sebenarnya adalah cara lain

mengukur warna jadi saat ini kita

belajar tentang rgb

sekarang kita memiliki cara lain untuk mengukur

warna dan ini disebut hex

itu pada dasarnya sama dengan rgb

dua karakter pertama di sini 1 dan d

mewakili berapa banyak merah dua yang kedua

mewakili berapa banyak hijau dan yang ketiga

dua mewakili berapa banyak biru

jadi dengan sedikit matematika kita bisa

mengkonversi dari hex

ke rgb

jadi saya hanya google hex ke

kalkulator rgb

dan saya menemukan kalkulator apapun

kemudian
saya menggunakannya untuk mengkonversi

nilai hex jadi saya akan menyalin ini

ke dalam kalkulator dan kemudian mengubahnya

dan itu akan memberi saya nilai rgb

itu akan menghitungnya untuk saya

jadi itu hanya cara lain untuk mengukur

warna yang disebut hex

fitur selanjutnya yang ingin saya tunjukkan

alat dev adalah tab yang dihitung ini

jadi tab ini benar-benar menunjukkan kepada kita semua

gaya akhir yang diterapkan untuk ini

elemen

jadi kita benar-benar dapat menggulir ke bawah sini dan

kita dapat menemukan warna latar belakang di

nilai rgb

kita juga dapat menemukan hal-hal seperti

tinggi tinggi akhir dihitung

lebar akhir dihitung sehingga kita

bisa mendapatkan ukuran yang sempurna serta

sempurna

warna latar belakang

jadi mari kita benar-benar hanya menggunakan

warna latar belakang di sini

dan kita akan menyalin ini

dan rekatkan ini ke dalam kode kita jadi kita

akan mendapatkan warna yang tepat

daripada mencoba menebaknya seperti kita

sebelumnya

jadi jika saya copy dan paste di sini

Simpan itu
dan sekarang saya menyegarkan

sekarang tombol kami memiliki warna yang sama persis

seperti apa yang kita miliki di sini

jadi hal yang sama terjadi untuk bergabung

tombol

mari klik ikon ini di sini

dan arahkan kursor ke tombol gabung untuk menemukan

itu di html

klik

dan sekarang kita bisa melihat semua gaya ini semua

gaya terakhir yang dihitung pada gabungan

tombol

jadi yang paling penting kita dapat menemukan

itu

warna perbatasan yang ini

mari masuk ke mari salin dan taruh

ke dalam css kita sehingga kita bisa mendapatkan a

warna yang sempurna

akhiri dengan titik koma untuk mengikuti

aturan sintaksis

oke salin di sana

dan salin di sini

sekarang kita akan menyimpan

menyegarkan

dan sekarang warna tombol kita akan

cocok

desainnya dengan tepat

jadi begitulah cara Anda menggunakan alat dev

dapatkan warna sempurna untuk elemen html kita

sekarang kita akan belajar tentang css

model kotak yang pada dasarnya memungkinkan kita untuk

tambahkan ruang di antara elemen kita seperti ini

serta ruang di dalam elemen kita

untuk membuatnya lebih besar

bagian pertama dari model kotak adalah

spasi di luar elemen

ini disebut marjin

jika kita melihat kode kita, kita sudah bekerja

dengan margin sebelumnya

di sini kita atur margin kanan menjadi 8 piksel

itu berarti bahwa kami menambahkan ruang pada

di luar tombol di sebelah kanan 8

piksel

jika kita mengubah margin kanan menjadi 30

piksel misalnya

dan simpan dan segarkan

sekarang ada 30 piksel ruang di

di luar di sisi kanan tombol

jadi kita bisa menambahkan margin ke keempatnya

arah atas kanan bawah dan kiri

mari kita coba menambahkan margin

ke sisi kiri tombol kali ini

kita akan menambahkan margin kiri 20

piksel

simpan dan segarkan

dan itu menambah ruang di luar

tombol di sebelah kiri 20 piksel

jadi pada dasarnya bagaimana margin bekerja

mari kita tambahkan spasi di luar

elemen

bagian kedua dari model kotak adalah

spasi di bagian dalam elemen jadi

pada dasarnya semua jarak di sekitar sini

teks kita

jadi saat ini jika kita melihat kode kita

kami mengatur tinggi dan lebar

tombol kami dan ini sebenarnya bukan a

ide bagus saya akan menunjukkan kepada Anda mengapa saya akan pergi

gulir ke bawah

ke

tombol gabung karena sedikit

lebih mudah untuk melihat dan aku akan berubah

teks untuk bergabung dengan saya

saluran

simpan dan segarkan

dan Anda akan melihat bahwa teks tersebut

sebenarnya meluap tombol seperti

ini

dan itu karena jika kita menggulir ke atas

kami mengatur tinggi dan lebar

itu artinya kita menekan tombolnya

memiliki tinggi 36 piksel dan a

lebar 62 piksel tapi di sini perhatikan itu

konten kami terlalu besar

jadi yang ingin kami lakukan adalah menghapus ini

baris

dan simpan

dan menyegarkan halaman

dan secara default tombol kami sebenarnya

menyesuaikan ukuran secara otomatis berdasarkan

konten

jadi sekarang bukannya mengatur ketinggian dan

lebar kita akan mencapai

hal yang sama

dengan menambahkan spasi di bagian dalam

tombol

jadi jarak di bagian dalam

tombol disebut padding

mari kita masuk ke kode kita dan mencobanya

jadi kita akan menambahkan padding

lari ke kiri

dari 30 piksel

simpan dan segarkan

dan Anda dapat melihat bahwa padding menambahkan

spasi di bagian dalam tombol

dan seperti margin kita bisa mengatur padding

di keempat arah jadi mari kita coba

menambahkan bantalan

dasbor atas

ke

20 piksel

simpan itu dan segarkan

dan sekarang Anda dapat melihat bahwa kami menambahkan

padding di bagian atas sebesar 20 piksel

jadi kita benar-benar bisa menggunakan dev chrome

alat yang kita pelajari sebelumnya

memvisualisasikan margin dan padding kami

elemen
mari kita pergi ke area kosong kita

halaman web dan kita akan klik kanan

dan memeriksa

lalu klik ikon kiri atas ini

dan kemudian klik tombol berlangganan kami

jadi aku akan menyeret ini ke bawah dan kemudian

kita akan masuk ke tab dihitung

bagian ini pada dasarnya adalah model kotak

kami memiliki margin kami yang merupakan ruang aktif

bagian luar elemen yang bisa Anda lihat

yang disorot dalam warna oranye

kami memiliki perbatasan yang kami pelajari

sebelumnya dan kami memiliki padding yang

ruang di bagian dalam elemen

yang dapat Anda lihat disorot dalam warna hijau

tombol secara default memiliki padding 6

piksel di kiri dan kanan dan 1 piksel

di atas dan bawah

jadi mari kita klik kiri atas ini lagi dan

buka tombol gabung kami

dan klik tombol ini

dalam contoh ini kita memiliki padding pada

atas 20 piksel yang kita miliki

dalam kode kami, kami memiliki padding di sebelah kiri

dari 30 piksel juga apa yang kita miliki di kami

kode dan kemudian kami memiliki padding default

dari 6 piksel di kanan dan 1 piksel di

bagian bawah

dan untuk tombol ini kami memiliki batas

Lebar 1 piksel yang dapat Anda lihat di sini

kode kita

jadi semua gabungan ini membentuk css

model kotak ini pada dasarnya menentukan caranya

banyak ruang yang dibutuhkan elemen pada

halaman dan seberapa jauh jaraknya dari yang lain

elemen

jadi sekarang kita belajar model kotak

kita akan menggunakannya untuk membuat ulang

desain di sini

jadi saat ini jika kita melihat kode kita

kami menggunakan tinggi dan lebar ayo

ganti ini dengan model kotak

mari kita singkirkan ini

dan simpan dan segarkan

dan sekarang tombol kami kembali seperti semula

sebelum

dan sekarang kita akan menambahkan padding

tombol ini sehingga cocok dengan

desain

di bagian bawah sini

jadi mari kita tambahkan beberapa padding

dasbor atas

dari 10 piksel

jadi kami akan menambahkan spasi di bagian dalam

tombol di atas sini dari 10 piksel

kita juga akan menambahkan padding

dasbor bawah

dari 10 piksel

mari kita simpan itu dan

segarkan oke jadi sekarang kita punya ruang di

atas dan bawah

sehingga terlihat cukup dekat

kita juga akan menambahkan ruang pada

dalam di kiri dan kanan

jadi kita akan menambahkan

lapisan

lari ke kiri

dari 16 piksel

dan bantalan

di kanan

dari 16 piksel

jadi mari kita simpan itu

dan menyegarkan

dan saya pikir ini terlihat cukup dekat

jadi menggunakan padding kami menambahkan spasi pada

di dalam tombol kita

dan hal yang baik tentang ini adalah jika

kita mengubah teks

seperti ini dan simpan dan segarkan

tombol akan mengubah ukuran dengan teks tetapi

itu akan menjaga jarak di dalam

jadi menggunakan bantalan adalah alternatif yang lebih baik

terhadap tinggi dan lebar

jadi mari kita simpan itu

dan menyegarkan halaman

dan mari kita pindahkan tombol-tombol ini

kembali lebih dekat bersama

jadi saat ini jika kita menggulir ke atas kita punya

margin di sebelah kanan 30 piksel

jadi spasi di bagian luar tombol

di sebelah kanan 30 piksel

kita akan mengubahnya kembali ke 8

piksel

sehingga lebih dekat seperti yang kita miliki di kita

desain

simpan dan segarkan

oke jadi itu terlihat cukup bagus sekarang

hal yang akan Anda perhatikan adalah tombol kami

tidak selaras satu sama lain sehingga

tombol gabung ada di bagian atas

sedangkan tombol subscribe kita sedikit

sedikit di bawah jadi mengapa ini terjadi

secara default browser mencoba menyelaraskan

tombol kami berdasarkan teks jadi perhatikan

bahwa teks dalam satu baris seperti ini

jadi itulah perilaku default dari

browser ini karena browser di

awal sebagian besar berbasis teks

sekarang untuk mengesampingkan perilaku ini dan menyelaraskan

semuanya ke atas seperti yang kita miliki sebelumnya

kita bisa masuk ke css kita

dan kita akan menambahkan properti bernama

vertikal

garis putus-putus

dan kita akan mengatur ini ke atas

jadi alih-alih menyelaraskan tombol berdasarkan

pada teks seperti ini kita hanya akan

untuk menyelaraskan semuanya ke atas

jika kita menyimpannya

dan menyegarkan

sekarang tombol berlangganan disejajarkan dengan

bagian atas yang ada di sana

mari kita lakukan hal yang sama untuk men-tweak

tombol saya akan menggulir ke bawah

dan kita akan menambahkan

tanda hubung vertikal menyelaraskan titik dua di atas sini sebagai

Sehat

simpan dan segarkan

dan sekarang semuanya selaras dengan benar

lagi

sekarang mari kita bekerja pada tombol bergabung saya

akan gulir ke bawah dan menghapus ini

teks tambahan di sini

simpan dan segarkan

dan sekarang kita akan pergi ke css kita untuk

tombol gabung jadi saya akan menggulir ke atas

ke sini

dan kita akan menyesuaikan padding

jadi mari kita benar-benar hanya meminjam

bantalan dari tombol berlangganan

karena mereka terlihat sangat mirip jadi saya akan

gulir ke sini

dan salin ini

dan pindahkan saja ke bawah untuk bergabung

tombol di sini

simpan itu dan segarkan

oke jadi itu terlihat cukup bagus kecuali

tombol gabung kami terlihat sedikit mati

terlihat sedikit lebih tinggi dari kita

tombol berlangganan

dan itu karena perbatasan sebenarnya

menambahkan sedikit ukuran ke tombol ini

jadi itu menambahkan satu piksel di bagian atas dan

bawah itu sebabnya tombol ini lebih tinggi

daripada tombol berlangganan

jadi untuk mengimbangi kita benar-benar akan

mengurangi padding di bagian atas

dan bagian bawah dengan satu piksel

Simpan itu

dan menyegarkan

dan sekarang ukurannya sama dengan yang kita miliki

sembilan piksel ruang di bagian dalam plus

satu pixel dari lebar perbatasan dan

yang cocok dengan 10 piksel ruang aktif

bagian dalam tombol berlangganan

dan saya akan membiarkan mengubah tombol tweak

terserah Anda sebagai latihan

jadi itu adalah model kotak css setiap

elemen dapat memiliki spasi di luar

disebut marjin

ruang di bagian dalam disebut padding as

serta perbatasan dan properti ini

menentukan berapa banyak ruang elemen

menempati halaman

berikut adalah beberapa latihan menggunakan kotak

model untuk membuat diri Anda lebih akrab dengan

konsep ini dan properti ini

untuk sebagian besar tentu saja kita sudah

bekerja dengan tombol

dalam pelajaran ini kita akan bekerja dengan

teks dan kita akan belajar bagaimana

teks gaya

jadi seperti pelajaran tombol kami yang saya miliki

membuat latihan yang bisa kita praktikkan

dengan teks

jadi kita akan pergi ke titik super sederhana

latihan dev slash memangkas teks

dan sekarang kami memiliki beberapa teks dari youtube

dan apel yang akan kita pelajari caranya

untuk menyalin

jadi pertama-tama mari kita buat html baru

file di mana kita bisa fokus berlatih

gaya teks jadi saya akan pergi ke sini dan

buat file baru

dan mari kita sebut saja ini

teks.html

dan sekarang kita akan membuka file ini

peramban kami

jadi buka folder yang berisi kita

kode

dan klik kanan

buka dengan google chrome

Aku benar-benar akan menempatkan ini di sini

baiklah jadi sekarang kita siap untuk memulai

jika Anda pernah menulis dokumen teks

sebelum menggunakan sesuatu seperti google docs

atau kata microsoft Anda mungkin pernah melihat

sesuatu seperti ini

ini adalah bilah alat yang memungkinkan kita untuk

mengubah gaya teks kita kita bisa

mengubah font ukuran teks kita bisa

membuatnya tebal kita bisa memusatkannya dll di css

kami memiliki gaya untuk masing-masing hal ini

mari kita masuk ke kode kita dan kita akan pergi

untuk pertama memulai dengan membuat beberapa teks

halaman kami

jadi pertama mari kita membuat sebuah paragraf

dan kemudian di dalam paragraf mari kita mulai

dengan teks di sini

jadi saya akan menyalin

dan rekatkan ini ke paragraf kami

dan aku hanya akan mengatur ulang

kode sedikit

dan simpan

ingat bahwa dalam html spasi ekstra ini

dan baris baru tidak masalah

sekarang segarkan halaman dan kami memiliki

paragraf pertama yang bisa kita praktekkan

dengan

selanjutnya mari kita buat elemen gaya jadi kita

dapat menulis beberapa kode css

sekarang kita akan menetapkan kelas pada paragraf ini

sehingga kita dapat menargetkannya di css

kelas setara

judul dasbor video

karena ini adalah judul video yang i

disalin dari youtube

jadi mari kita simpan dan segarkan

dan sekarang kita bisa mulai menargetkan

paragraf ini di css kami

jadi ingat kita akan mulai dengan

titik untuk menargetkan kelas

dan kita akan menargetkan

judul dasbor video

jadi hal pertama yang akan kita ubah

adalah

font

untuk mengubah font properti css adalah

tanda hubung font

keluarga

jadi situs web secara default menggunakan font tersebut

disebut kali roman baru kita akan

ubah fontnya

ke font yang disebut

Arial

simpan dan segarkan

dan sekarang Anda dapat melihat kami mengubah font

mari kita pergi ke yang berikutnya

jadi ini adalah ukuran font dan kita bisa

ubah ukuran font menggunakan properti

ukuran font dash

dan mari kita ubah menjadi sekitar 30

piksel

simpan dan segarkan

dan sekarang kami memiliki font yang lebih besar

contoh berikutnya mari kita buat tebal

kita akan pergi ke sini

dan kita akan mengatur dasbor font

berat

untuk menjadi berani

Simpan itu

dan segarkan dan sekarang kami memiliki font tebal

seperti yang Anda lihat css memiliki properti untuk

melakukan semua hal ini

dan untuk sebagian besar properti ini

cukup mudah untuk google mereka

contohnya mari googling untuk cara membuatnya

huruf miring

jadi kita akan pergi ke google

dan kita hanya perlu mencari sesuatu

seperti css

teks

miring

dan sekarang di hasil pertama

kita akan masuk ke sini

dan jika Anda menggulir ke bawah, Anda dapat melihat ini

gaya font css miring

jadi saya akan menyalin ini

dan rekatkan di kode saya

simpan dan segarkan

dan sekarang kita memiliki teks miring

yang terakhir akan saya tunjukkan

sekarang adalah bagaimana memusatkan teks ini karena

dalam latihan kita

kami memiliki latihan di mana teksnya berada

terpusat

ke teks tengah kita akan pergi ke kami

kode dan kita akan mengetik

teks

menyelaraskan jadi ini adalah properti untuk

memusatkan teks atau meletakkannya di sebelah kiri

atau ke kanan

sekarang kita akan memberikan nilai

tengah

simpan dan segarkan

dan begitulah cara kami memusatkan teks kami

jadi itu cukup mudah sekarang mari kita

lanjutkan dan coba salin gaya ini

latihan kita

jadi jika Anda ingat strategi umum

untuk menciptakan apa pun yang kita lihat

pertama buat elemen dengan html

dan kemudian beri gaya dengan css satu per satu

mari kita lanjutkan dan lakukan itu untuk ini

latihan

Aku hanya akan mengubah ukuran kembali ini

dan kita akan mulai

dengan mengatur ulang semua gaya ini

simpan dan segarkan

pertama saya akan mulai dengan font

keluarga jadi untuk latihan ini saya sebenarnya

gunakan font family ariel saja untuk membuatnya

lebih mudah bagi kita jadi kita akan mengatur

keluarga dasbor font

untuk arial

simpan dan segarkan

selanjutnya saya akan mengubah bobot font

jadi font ini tebal dan saya ingin membuatnya

font saya tebal juga

jadi saya akan menambahkan font dash

berat

baut

simpan dan segarkan

selanjutnya mari kita ubah ukuran fontnya

Jadi

saya akan mengubah ukuran font ini

ke sesuatu yang lebih besar

seperti mungkin 20 piksel menyimpannya

dan menyegarkan

dan terlihat sedikit terlalu besar dibandingkan

ke

desain jadi mari kita nada itu hanya a

sedikit

mungkin 18 piksel

simpan dan

menyegarkan

oke jadi saya pikir itu terlihat cukup dekat

selanjutnya Anda akan melihat bahwa jenis teks ini

dari membungkus ke baris kedua sementara

milik kita tidak

cara untuk mewujudkannya adalah kita

akan menetapkan lebar pada judul ini sekarang i

tahu bahwa di bagian sebelumnya kita

mengatakan itu buruk untuk mengatur lebar

tapi di sini sebenarnya yang kita inginkan

karena jika kita menetapkan lebar kita akan

memaksa teks ke baris kedua

jadi mari kita lanjutkan dan atur lebarnya ke kanan

Sekarang

dan saya akan mengaturnya menjadi seperti

400 piksel mari kita lihat tampilannya

simpan segarkan

oke jadi perlu kurang dari itu

mari kita lakukan 300 piksel

simpan dan segarkan

oke jadi itu terlihat benar untukku sekarang

dan hal terakhir dengan judul

adalah

saya perhatikan ada lebih banyak jarak antara

garis di sini dari apa yang kita miliki

jadi untuk mengatur jarak antar baris

properti disebut

garis putus-putus

tinggi

jadi jangan khawatir jika sepertinya kita

belajar banyak properti baru tersebut

titik dari pelajaran ini adalah bagi kita untuk pergi

melalui beberapa contoh yang rumit

bersama yang akan mempersiapkan Anda untuk

latihan yang dapat Anda praktekkan pada Anda

memiliki

jadi untuk ketinggian garis ini mari kita coba

sesuatu seperti 20 piksel

simpan dan segarkan

oke jadi sepertinya itu tidak berhasil

mari kita ubah menjadi 26. mungkin

simpan dan segarkan

Oke

mungkin 24.

menyimpan

dan menyegarkan

oke jadi saya pikir itu terlihat cukup dekat

selanjutnya mari kita kerjakan paragraf kedua

jadi kita akan membuat paragraf baru

3.4

m dilihat

dan sekarang untuk membuat titik ini kita akan pergi

untuk membuat sesuatu yang disebut html

kesatuan

jadi entitas html memungkinkan kita mengetik

karakter khusus misalnya titik ini

dan tanda centang ini

untuk mendapatkan entitas html untuk titik ini

kita akan pergi ke google

html

kesatuan

tengah

dot

dan sekarang jika kita gulir ke bawah

ini akan memberi kita beberapa kode html yang kita

dapat menyalin ke dalam kode kami jadi saya akan

salin ini

dan kemudian paste di sini dan itu akan

untuk membuat titik di halaman kami jadi jika saya simpan

dia

dan menyegarkan

itulah yang kami dapatkan

sekarang saya akan mengetik sisanya

teks dalam paragraf ini

sekarang simpan itu dan segarkan

jadi sekarang ingat proses umumnya

kami membuat elemen dengan html sekarang

kita akan menatanya satu per satu

pertama mari kita beri ini kelas agar kita bisa

menargetkannya

sebut saja statistik dasbor video ini

dan sekarang di css kami

kita akan menata teks ini

kita akan mulai dengan

font-family

udara

simpan dan segarkan

dan kemudian kita akan mengubah font

ukuran sehingga terlihat seperti desain kami adalah

sedikit lebih kecil dari apa yang kita miliki

mari kita ubah ukuran font

hingga mungkin 14 piksel

simpan dan segarkan

dan saya pikir itu terlihat cukup dekat

selanjutnya mari kita ubah warnanya

Jadi

mari kita atur warna mungkin abu-abu

dan menyegarkan

oke jadi itu agak terlalu ringan

jadi untuk mendapatkan warna yang tepat

kita bisa klik kanan di area kosong

halaman web

klik periksa

dan kemudian kita akan memeriksa

gaya elemen ini

jadi trik untuk melakukan itu adalah kita

akan mengklik ikon kiri atas ini

arahkan kursor ke elemen ini dan klik

dan kemudian kita dapat menemukan semua gayanya di

tab yang dihitung

jadi jika kita gulir ke bawah

kita bisa mendapatkan warna teks

jadi mari kita salin ini

dan simpan

mari segarkan

dan itu terlihat cukup bagus

dibandingkan dengan desainnya

selanjutnya mari kita sesuaikan jarak antara

dua paragraf ini

jadi ingat dari pelajaran sebelumnya

spasi di luar elemen disebut

margin

tetapi jika kita melihat kode kita, kita tidak melakukannya

sebenarnya menetapkan margin apa pun, jadi mengapa demikian

ada begitu banyak ruang di antara keduanya

paragraf

dan alasannya adalah jika kita klik kanan

area kosong halaman web dan klik

memeriksa

dan kami mengklik ikon ini

dan arahkan kursor ke paragraf ini

paragraf sudah memiliki margin di bagian atas

dan bawah

jadi jika kita klik ini pergi untuk menghitungnya

memiliki 14 piksel margin di bagian atas

dan 14 di bawah

dan hal yang sama untuk paragraf ini

dan alasannya adalah karena

paragraf secara default datang dengan margin

di bagian atas dan di bagian bawah

jadi itu sebabnya ada semua jarak ini

yang kita miliki di sini di mana kita tidak mengaturnya

di dalam css

jadi proses umum yang akan kita lakukan

hapus spasi default lalu

kita akan mengatur jarak kita sendiri

jadi mari kita masuk ke kode kita

dan pertama kita akan menghapus

bagian bawah dasbor margin

dari judul

atur itu ke nol dan kami juga akan melakukannya

menghapus margin

di atas

dari paragraf kedua

dan atur ke nol

Simpan itu
dan segarkan dan sekarang tidak ada default

jarak antara ini dan mereka benar-benar

berdekatan

selanjutnya kita bisa

atur dasar margin yang lebih tepat

jadi mari kita atur ke mungkin

20 piksel mari kita lihat tampilannya

simpan dan segarkan

oke jadi itu terlalu banyak ruang

mari kita turunkan ke sesuatu seperti

mungkin lima

simpan dan

menyegarkan

oke jadi saya pikir ini terlihat cukup dekat

ke desain sebenarnya mari kita lanjutkan ke

paragraf berikutnya

kita akan bergerak ke bawah

dan buat elemen paragraf baru

dengan teks ini di dalamnya

dan sekarang untuk tanda centang ini kami juga

akan menggunakan entitas html

sekarang saya tahu bahwa Anda benar-benar dapat menyalin

ini

dan memasukkannya ke dalam kode kita secara langsung

tetapi beberapa browser mungkin tidak mendukung ini

jadi itu sebabnya kami menggunakan entitas html

kita akan pergi ke google

kita akan mencari entitas html

Tanda cek

dan saya akan menggulir ke bawah dan mengambil

entitas html di sini jadi di sini kita sebenarnya

memiliki tiga saya hanya akan mengambil

pertama

menyalin

tempel

Simpan itu

mari kita kembali dan menyegarkan

oke jadi itu terlihat cukup bagus

selanjutnya mari kita terus menata ini satu per satu

jadi aku akan pergi sedikit lebih cepat

di sini karena pada dasarnya sama

hal yang telah kita lakukan untuk

dua yang pertama

sebut saja video yang satu ini

pengarang

dan kemudian kita akan menatanya di sini

jadi kita akan mengatur font family menjadi arial

seperti sisa paragraf

Aku akan mengatur warna yang sama

seperti paragraf ini

jadi salin dan tempel

oke itu terlihat cukup bagus oh ya kita

harus mengatur ukuran font tampilannya a

sedikit terlalu besar sekarang

atur ukuran font menjadi 14 piksel

selanjutnya kita akan mereset default

spasi di sini

jadi kita akan

atur margin dash bawah

dan hapus dengan menyetelnya ke nol

dan juga hapus bagian atas margin

dan atur ke nol

simpan dan segarkan

dan sekarang kita akan menetapkan lebih

margin yang tepat jadi mari kita coba

mungkin 30 piksel

lihat bagaimana tampilannya

oke itu terlalu banyak mungkin 20 piksel

oke saya pikir yang terlihat tentang saat itu

kita akan melakukan paragraf ketiga

ayo kita turun disini

membuat

elemen

dan kemudian gaya dengan css saya hanya

pergi ke

menyalin

dan paste ini di sini

simpan dan segarkan

pertama mari kita beri kelas pada teks

agar kita bisa membidiknya sebut saja ini

Deskripsi Video

naik ke sini

deskripsi dasbor video

kami ingin keluarga font

dari arial

ukuran font

dari 14 piksel

dan warna yang sama

dan kami menyimpannya

dan menyegarkan oke yang terlihat cukup bagus

dan sekarang kami ingin memberikannya lebar

membuatnya melilit seperti ini

jadi mari kita atur lebarnya sama dengan

judulnya 300

dengan

300 piksel

simpan dan segarkan

oke jadi sepertinya ini i o adalah

sebenarnya pada baris yang terpisah

mari kita membuatnya

280.

simpan dan

menyegarkan

baik-baik saja sehingga terlihat cukup bagus dan

Saya juga akan membuatnya 280 di sini

hanya untuk memastikan mereka sama

jadi hal terakhir yang akan saya ubah adalah

ketinggian atau ruang antara ini

baris

untuk melakukan itu kita akan menggunakan garis

tinggi

mari kita gulir ke bawah

dan kemudian tambahkan properti lain yang disebut

tinggi garis putus-putus

dan mari kita atur ini menjadi 20 piksel

lihat tampilannya simpan dan segarkan

dan mari atur ke mungkin 22 piksel

simpan dan segarkan

oke jadi saya cukup senang dengan ini

dan terakhir kita akan memodifikasi

spasi di antara kedua paragraf tersebut

pertama kita akan mengatur ulang default

batas

mari kita singkirkan margin bawah

pada yang pertama di sini dan margin atas

pada yang kedua

Jadi

dasbor atas

Aku akan menyingkirkannya dan mengaturnya

nol

simpan dan segarkan

dan kemudian kita akan menetapkan margin

dasar

mungkin hal yang sama seperti di sini

20 piksel

simpan dan segarkan

baik-baik saja sehingga terlihat sangat bagus untuk

Saya

kami baru saja menciptakan tampilan yang sangat bagus

gaya yang dapat Anda temukan di youtube.com

dan proses umum yang kami gunakan

adalah pertama kita membuat elemen dengan

html dan kemudian kami menatanya dengan css satu

dengan satu

jadi sebelum kita melanjutkan ke yang berikutnya

latihan saya akan menunjukkan cara untuk

bersihkan kode kami jadi jika Anda memperhatikan semuanya

gaya kami sekarang memiliki garis

disebut keluarga font ariel

sekarang kita benar-benar dapat membersihkan ini dan

menghapus duplikasi

dengan menciptakan gaya baru

kali ini kita akan menargetkan semua

paragraf di halaman

dan kami akan memberikan semua paragraf

keluarga dasbor font

usus besar

Arial

menyimpan

jadi gaya ini akan berlaku untuk semua

paragraf yang artinya

semua ini

itu berarti bahwa kita sebenarnya tidak perlu

garis ini

di salah satu gaya kelas ini lagi begitu

kita benar-benar dapat menghapus semua ini

sekarang jika saya menyimpannya

dan saya menyegarkan Anda tidak dapat melihat apa-apa

perubahan karena ini melakukan hal yang sama

hal sebagai kode yang kita miliki sebelumnya

sehingga Anda juga dapat melihat dari contoh ini

bahwa suatu elemen dapat ditargetkan oleh dua

set gaya

Misalnya

untuk kode ini di sini kami menargetkan semua p

elemen pada halaman dan semua elemen

dengan kelas judul dasbor video

jika kita gulir ke bawah sini

di sini kita memiliki elemen p yang memiliki a

kelas judul dasbor video yang artinya

itu akan menjadi sasaran kedua ini

set gaya dan set gaya ini begitu

itu sedang ditargetkan oleh beberapa set

gaya

sekarang hal lain yang bisa kita bersihkan

ingat bagaimana kita mereset margin untuk

semua paragraf kita

bukannya melakukannya untuk masing-masing

secara individual kita benar-benar dapat menempatkan semuanya

di sini

jadi misalnya

kita dapat mengatur margin

dasbor atas

ke nol

dan margin dash bawah ke nol

kita simpan dan kita refresh

itu terlihat hampir sama kecuali

kami sekarang membersihkan semua default

gaya di sini sehingga kita tidak perlu

melakukannya dalam kode kami di bagian bawah jadi kami

tidak perlu ini lagi

atau ini

atau ini

jika kita menyimpannya dan menyegarkan

kita masih mendapatkan hal yang sama karena

kami telah mengatur ulang semua gaya kami dalam hal ini

sekumpulan gaya
sekarang konsep terakhir yang ingin saya tunjukkan

sebelum kita melanjutkan ke latihan berikutnya

adalah fakta bahwa

dalam rangkaian gaya ini

kami mengatur margin bawah ke nol

tapi di sini kita juga mengatur margin

bawah sampai 5 piksel dan margin bawah

untuk 20 piksel jadi bagaimana cara kerjanya kita

mengaturnya ke 0 di sini dan ke 5 dan 20

Di Sini

gaya mana yang melakukan elemen sebenarnya

mendapatkan

dan jawabannya adalah kita mendapatkan

gaya di sini jadi jika kami menyegarkan Anda akan

perhatikan bahwa masih ada 20 piksel

spasi di antara kedua paragraf tersebut

sekarang Anda mungkin berpikir bahwa itu karena

baris ini berada di atas

dan kemudian setelah kita sampai ke baris ini

mengesampingkan apa pun yang datang sebelumnya

tetapi jika kita benar-benar memindahkan ini

ke atas

dan kami menyimpan dan memuat ulang Anda akan melihatnya

kami masih memiliki margin bawah 20 piksel

Jadi mengapa hal ini terjadi

ini adalah sesuatu yang disebut kekhususan css

jika kita memiliki beberapa baris pengaturan

properti yang sama sebenarnya ada

prioritas yang diikuti oleh browser

situasi ini

gaya ini memiliki prioritas lebih dari ini

gaya

dan untuk menentukan mana yang memiliki lebih banyak

prioritas kita harus melihat kata ini

sebelum tanda kurung

jadi kata ini memberi tahu kita apa gaya-gaya ini

sedang menargetkan

ini dikenal sebagai pemilih

ini adalah pemilih lain

yang menargetkan kelas tertentu

sekarang pemilih yang paling banyak

spesifik akan memiliki lebih tinggi

prioritas jadi pemilih ini sebenarnya

lebih spesifik dari paragraf

jadi yang saya maksud dengan spesifik adalah ini

menargetkan semua paragraf di halaman

dan ini menargetkan kelas tertentu jadi tidak

semua paragraf akan memiliki ini

kelas statistik dasbor video jadi itu sebabnya

ini lebih spesifik

itu menargetkan kelompok elemen yang lebih kecil

dari ini

itu sebabnya baris ini memiliki prioritas

garis ini

jadi itu saja pengenalan css

kekhususan untuk saat ini hanya tahu bahwa a

nama kelas

seperti ini

memiliki prioritas lebih dari nama elemen

seperti ini jadi saya akan memindahkan kode ini

kembali

dan kami akan melanjutkan dengan sisa ini

latihan

selanjutnya kita akan menyalin teks ini dari

apel

sehingga Anda dapat melihat bahwa ada

warna latar belakang dan teksnya

terpusat dan juga jika saya mengarahkan ini

bagian dari teks kita mendapatkan pointer pada kami

mouse

dan kami memiliki teks garis bawah jadi mari

lihat bagaimana kita bisa melakukan ini

pertama kita akan membuat elemen dan kemudian

kita akan menatanya satu per satu

jadi kita akan pergi ke sini dan kita akan

membuat paragraf baru

dan mari salin teks ini ke dalamnya

gugus kalimat

menyalin

dan tempel

ups

oke simpan dan segarkan

oke jadi terlihat bagus

jadi biasanya jika Anda memiliki lebih besar dari atau

kurang dari simbol yang ingin Anda buat

dengan entitas html karena

browser dapat mengacaukan simbol-simbol ini

tag html
jadi saya akan mencari html

kesatuan

untuk

lebih besar dari

jadi ini adalah simbol yang kita inginkan

hanya akan menyalin dan menempelkan ini ke

kode kita

simpan dan segarkan

selanjutnya mari kita sebenarnya

tambahkan beberapa ruang di bagian bawah ini

paragraf sehingga kita dapat melihat baru kami

paragraf dengan jelas

jadi kita akan pergi ke sini

Dan

tambahkan saja margin ke bawah

karena sedikit terlalu berantakan

sekarang

baik-baik saja sehingga terlihat cukup bagus

kita akan mulai dengan menambahkan kelas

ke paragraf kami sehingga kami dapat menargetkannya

css kami

kelas sama mungkin

apel

teks

simpan dan segarkan

Dan

apel

teks

oke dan pertama aku sebenarnya juga pergi

memberi
beberapa spasi di bagian bawah sehingga

lebih mudah bagi kita untuk melihat kode kita yang sebenarnya

jadi 50 piksel di bagian bawah

simpan dan segarkan

dan sekarang sedikit lebih mudah untuk melihat apa

kami bekerja dengan

jadi selanjutnya saya akan mengubah font

ukuran satu hal yang akan Anda perhatikan adalah bahwa

keluarga font sudah ari jika kita

gulir kembali ke atas

kami memiliki serangkaian gaya yang menjadi target

semua elemen paragraf jadi sudah

atur keluarga font kami ke ari

mari kita gulir kembali ke bawah

dan mari kita sesuaikan ukuran font

jadi yang ini terlihat sedikit lebih kecil

jadi mari kita atur ke

mungkin 14 piksel

mari kita lihat bagaimana tampilannya

Simpan itu

dan menyegarkan

oke jadi saya pikir itu terlihat cantik

mirip dengan desainnya

dan sekarang langkah selanjutnya mari kita atur a

warna latar merah

sekarang trik untuk mendapatkan latar belakang

warna

adalah kita akan

klik kanan di area kosong

memeriksa

klik ikon ini

dan klik elemen yang ingin kita salin

gaya untuk

dan kemudian pergi ke tab komputer

dan gulir ke bawah

sekarang kita memiliki warna latar belakang i'm

hanya akan menyalin ini

dan tempel di sini jadi latar belakang

warna dasbor

kita akan menempelkannya

menyimpan

dan menyegarkan

Oke

selanjutnya kita akan melakukan warna teks

jadi mari kita atur warna teks menjadi putih

warna garis putih

simpan dan segarkan

dan sekarang jika kita melihat desain kita ini

teks sebenarnya dipusatkan pada halaman

jadi ingat properti untuk pemusatan

teks adalah perataan tanda hubung teks

tengah

simpan dan segarkan oke dan yang terakhir

apakah ada beberapa spasi

di bagian atas dan bawah di sini

jadi disini kita sebenarnya ingin menambahkan spasi

di dalam paragraf kami dan ingat dari

jarak pelajaran sebelumnya pada

di dalam elemen disebut padding

kita akan menambahkan beberapa padding ke

atas

Mungkin

10 piksel dan kemudian padding

ke bawah

dan 10 piksel mari kita lihat tampilannya

simpan dan segarkan

oke jadi saya pikir kita bisa menambahkan sedikit

sedikit lebih padding jadi mari kita ubah ke

mungkin 18 piksel

simpan dan segarkan

baiklah jadi saya pikir ini terlihat dekat

cukup

sekarang hal terakhir kita akan bekerja

pada teks ini di sini

yang menjadi garis bawah saat kita mengarahkan kursor

lebih dari itu

pertama mari kita belajar cara membuat

menggarisbawahi teks kita akan berlatih

keterampilan googling kami dan kami hanya pergi

untuk mencari css

teks

garis bawahi agar tetap sederhana

dan kemudian di tautan pertama

kami memiliki properti dekorasi teks

kami gulir ke bawah kami memiliki garis overline

melalui dan menggarisbawahi

jadi mari ambil potongan kode ini

Saya hanya akan menyalinnya di sini

simpan dan segarkan

sekarang sayangnya properti ini sebenarnya

mempengaruhi keseluruhan paragraf

tapi kami ingin itu hanya mempengaruhi bagian ini

teks jadi bagaimana kita melakukannya

kita perlu mempelajari sesuatu

disebut elemen teks

jadi elemen teks adalah elemen yang ada

di dalam baris teks

jadi mari kita lakukan contoh hanya untuk melihat

bagaimana itu bekerja

kita akan pergi ke bawah dan

kita akan membuat paragraf baru untuk

berlatih dengan

dan mari kita salin saja teks ini

dan meletakkannya di sana

simpan dan segarkan

sekarang kita akan membuat beberapa teks

elemen pada paragraf ini jadi yang pertama

elemen teks yang akan saya tunjukkan

disebut unsur kuat

jadi sekarang mari kita salin mungkin teks ini

dan kemudian meletakkannya di sana

dan simpan

dan menyegarkan

jadi elemen kuat di sini menciptakan ini

teks tebal yang Anda lihat di halaman web

jadi hal yang perlu diketahui tentang elemen teks

adalah bahwa mereka pada dasarnya ada di dalam

baris teks dan kemudian mereka memodifikasi itu

bagian dari teks sehingga mereka tidak

memodifikasi semuanya

elemen teks lain yang bisa kita buat

adalah elemen u

jadi yang ini

membuat beberapa teks yang digarisbawahi

jadi jika kita memindahkan teks ini ke sini

simpan dan segarkan

kita sekarang mendapatkan elemen teks garis bawah

jadi begitulah cara kami menata bagian-bagian tertentu

dari satu baris teks

elemen teks terakhir yang ingin saya tampilkan

Anda disebut span jadi mari kita buat a

elemen rentang

dan kita akan menempatkan teks ini di dalamnya

jadi potong

dan tempel

Simpan itu

dan menyegarkan

oke jadi elemen rentang ada di sini tapi

Anda akan melihat bahwa tidak ada yang berubah dan

itu karena elemen span adalah

elemen teks paling umum yang tidak dimilikinya

gaya

jadi span sangat berguna karena kita

benar-benar dapat memberikannya kelas

dan kita bisa menatanya sendiri dan memberi

itu gaya apa pun yang kita inginkan

sekarang kita bisa menambahkan atribut class ke

elemen teks lain ini seperti

kuat dan elemen u tetapi perhatikan itu

elemen teks ini datang dengan default

gaya dan itu mungkin bukan yang kita inginkan

terutama dalam situasi ini di mana kita

tidak benar-benar ingin gaya sampai kita

melayang di atasnya

jadi itu sebabnya kami menggunakan span teks

elemen itu memungkinkan kita memodifikasi tertentu

bagian dari teks tanpa mempengaruhi

semuanya

dan itu yang paling fleksibel dan kami bisa

gaya itu seperti yang kita inginkan

jadi jika kita memberikan kelas

menjangkau

contoh dan kemudian pergi ke css kami

lalu kita targetkan

contoh rentang

kita dapat memberikan gaya apapun yang kita inginkan

misalnya kita bisa mengatur warna

merah

sekarang jika kita menyimpan ini

dan menyegarkan

rentang sekarang mengubah bagian teks ini

merah

hal keren lainnya adalah semuanya

kita tahu tentang css masih berlaku

jadi kita bisa menargetkan contoh span

usus besar

melayang
dan gaya ini hanya akan berlaku saat kita

melayang di atas rentang

jadi dalam hal ini mari kita garis bawahi

karena itulah yang kita inginkan

jadi jika kita melakukan teks

dekorasi

dan garis bawahi

seperti di atas sini

Simpan itu

dan menyegarkan

sekarang rentang ini memiliki warna merah

Di Sini

dan ketika kita mengarahkannya ke gaya ini

terapkan dan itu akan digarisbawahi

mari kita gunakan apa yang kita pelajari di sini untuk menyelesaikannya

contoh kita

pertama-tama kita akan menghapus baris ini

karena kita tidak ingin menggarisbawahi

semuanya

mari segarkan

dan kami ingin membuat rentang sehingga kami

hanya menargetkan bagian teks ini

mari kita turun kembali

Aku akan mengubah ukurannya sedikit saja

agar kita bisa melihat

oke jadi kita akan gulir ke bawah ke

Di Sini

Aku akan membungkus ini

dalam satu rentang

saya hanya akan

pindahkan ini ke sini

menyimpan

menyegarkan

dan sekarang kita akan menata rentang ini

jadi ingat kita akan memberikannya

kelas sehingga kita dapat menargetkannya di kita

css sebut saja ini tautan toko

Simpan itu

Dan

mari kita pergi ke sini

dan kita akan menatanya sekarang

jadi toko

tautan

jadi ingat gaya untuk ini adalah itu

mouse berubah menjadi pointer ini

jadi untuk melakukan itu kita akan menggunakan

kursor properti

penunjuk tanda hubung

menyimpan

dan segarkan jadi sekarang saat kita mengarahkan kursor ke atasnya

mouse kita adalah pointer

dan hal terakhir adalah kita menginginkannya

digarisbawahi ketika kita mengarahkan kursor ke atasnya

mari buat gaya hover

tautan dasbor toko

dan kami akan memberikan pseudo ini

titik dua kelas

melayang

dan kita akan menggarisbawahinya dengan

teks

dekorasi

menggarisbawahi

Simpan itu

dan menyegarkan

dan sekarang saat kita mengarahkan kursor ke ini

itu akan mengubah mouse kita menjadi

pointer dan itu akan menggarisbawahi itu

jadi kami telah mencapai gaya yang sama persis

sebagai desain kami

jadi ada satu hal terakhir yang akan saya lakukan

menunjukkan Anda dalam pelajaran ini mari kita kembali

ke dalam kode kami, kami akan menggulir semua

jalan ke bawah

dan ingat itu di html jika kita punya

beberapa ruang seperti ini

itu akan menggabungkan semuanya menjadi satu ruang

jadi jika saya menyimpan ini dan menyegarkan

Anda akan melihat bahwa hanya satu ruang yang muncul

Di Sini

jadi saya akan menunjukkan cara untuk melupakannya

masalah ini

pada dasarnya daripada mengetik banyak

spasi di html kita

yang harus kita lakukan adalah mengatur margin kiri

pada elemen teks ini jadi kita akan

atur margin yang tersisa pada elemen ini dan

itu akan menambah spasi di sebelah kiri

jadi sebagai contoh mari kita scroll ke atas

dan kita akan menambahkan margin

lari ke kiri

ke elemen rentang kami di sini

dan mari kita lakukan sesuatu seperti 12 piksel

simpan dan segarkan

dan sekarang kita memiliki jarak antara kita

kata jadi ini adalah bagaimana kita mencapai beberapa

spasi di antara kata-kata kita sekalipun

html menggabungkannya

jadi begitulah cara kami membuat sebenarnya

teks yang terlihat profesional seperti ini dan

seperti ini pertama kita membuat elemen

dengan html dan kemudian kita gaya satu per satu

satu dengan css

dan jika kita ingin bergaya hanya sebagian saja

dari teks kita harus menggunakan teks

elemen seperti rentang

dalam pelajaran ini kita akan belajar

struktur yang tepat dari html dan itu

akan memberi kita akses ke semua

fitur html

jadi sampai saat ini kita sudah benar-benar

belum mengikuti struktur itu

Misalnya

jika kita melihat kode kita jika kita menggulir ke bawah

kita dapat melihat bahwa kita sedang membuat elemen

langsung seperti ini jika kita pergi ke kami

situs web bagaimanapun

dan kita klik kanan

dan memeriksa
dan kami melihat html kami

kita dapat melihat bahwa kita memiliki beberapa elemen

di sini disebut elemen html kepala

elemen dan elemen tubuh

jadi ini adalah struktur yang kita

sebenarnya seharusnya ada di html kita

mengajukan dan karena kita tidak memilikinya

browser secara otomatis membuat ini

untuk kita

jadi ini baik-baik saja di pelajaran sebelumnya

karena kita hanya belajar tapi itu

sebenarnya yang terbaik untuk memiliki struktur ini

kode kami karena kami benar-benar hilang

beberapa fitur yang berguna

jadi mari kita pergi ke depan dan belajar apa

structure adalah dan menambahkannya ke kode kita

jadi kita akan kembali ke semua kita

kode dan tambahkan ini

struktur mari kita kembali ke kami sangat

file html pertama

dan di atas

saya akan menambahkan beberapa spasi dan kami

akan belajar apa struktur yang tepat

adalah

setiap file html akan dimulai

kurang dari

seruan

tipe dok

ruang html
lebih besar dari

jadi Anda hanya perlu mengetik baris ini

persis seperti yang saya miliki di sini

ini sebenarnya bukan elemen, hanya saja

garis khusus yang memiliki arti ke

browser

ini memberitahu browser untuk menggunakan yang modern

versi html jika kita tidak memilikinya

semacam jatuh kembali ke versi yang lebih tua

yang memiliki fitur lebih sedikit

bagian berikutnya dari struktur adalah untuk

membuat elemen html

jadi ini mengatakan ada halaman web di dalamnya

elemen ini tidak ada banyak artinya

itu kita hanya harus memiliki ini di atas

dan tag penutup di bagian bawah

setiap file html

selanjutnya kita akan membuat kepala ini

elemen

jadi kepala

dan tag penutup

dan kita akan membuat tubuh

elemen

jadi tubuh

dan tag penutup

jadi ini adalah struktur yang tepat dari semua

file html kami dan ini adalah bagaimana kami

seharusnya untuk memulai dan mengakhiri file kami

jadi di sini Anda dapat melihat bahwa kami memiliki

elemen di dalam elemen lain

ini disebut bersarang

jadi kita tidak hanya dapat memiliki teks di dalam

elemen kita dapat memiliki elemen lain

elemen dalam

kita sebenarnya sudah melihat contohnya

ini dalam pelajaran sebelumnya kita menempatkan a

elemen teks seperti span di dalam a

paragraf dan yang memungkinkan kita untuk memiliki

beberapa teks dalam paragraf itu

ditata berbeda

di sini kita memiliki contoh kedua kami

bersarang

kita memiliki kepala dan elemen tubuh di dalamnya

elemen html

jadi ini tidak benar-benar melakukan apa-apa

visual tidak seperti contoh kami sebelumnya tapi

itu bagian dari aturan sintaks html itu

kita harus mengikuti

setiap file memiliki satu dan hanya satu html

elemen dan elemen ini mewakili

seluruh halaman web

dan elemen html dirancang untuk

bersarang itu dirancang untuk menampung satu

elemen kepala dan satu elemen tubuh

dan kemudian semua yang ada di halaman web kami

seharusnya pergi baik di dalam kepala atau

di dalam tubuh jadi keduanya

elemen juga dirancang untuk bersarang

atau memiliki elemen di dalamnya

elemen tubuh di sini seharusnya

mengandung semua elemen yang ada

terlihat di halaman

jadi mari kita benar-benar membuka website ini saya

akan masuk ke folder kami itu

berisi kode kita

saya akan klik kanan buka dengan

chrome

jadi di situs web ini Anda dapat melihat bahwa

paragraf terlihat tombol dan

tautan terlihat

jadi semua ini terlihat di situs web

jadi harus masuk

[Musik]

bagian tubuh ini

di dalam elemen kepala

adalah semua elemen yang tidak

terlihat di halaman jadi inilah contohnya

dari elemen semacam itu

kita akan membuat sebuah elemen bernama

judul

jadi teks di dalam judul di sini adalah

akan mengubah teks di tab di sini

jadi misalnya

jika saya menggunakan teks

situs web pertama

itu akan muncul di tab jadi jika

saya menyimpan dan menyegarkan di situlah

elemen judul muncul

tetapi perhatikan bahwa elemen judul ini

tidak benar-benar muncul di halaman dan

itu sebabnya itu termasuk di kepala

bagian

jadi judul adalah fitur pertama itu

kita dapatkan dari mengikuti struktur ini

fitur kedua yang kita dapatkan itu

benar-benar berguna adalah kemampuan untuk

secara otomatis memuat ulang halaman web kami

setiap kali kita mengubah kode kita

jadi Anda mungkin telah memperhatikannya setiap saat

kita mengubah kode kita

kita harus pergi ke website kami dan kemudian

segarkan halaman untuk melihat kode baru kami

sekarang kita benar-benar dapat menghindari ini dengan

mengikuti struktur ini

dan kemudian memasang ekstensi kode vs

jadi mari kita pergi ke area ekstensi ini di sini

dan kita akan menginstal ekstensi

server langsung

saya akan menginstal ini

dan sekarang kita bisa menggunakan live server untuk

memuat ulang halaman kami secara otomatis kapan saja

kode kita berubah

untuk membuka situs web ini di server langsung

kita akan klik kanan

dan kita akan mengklik buka dengan siaran langsung

server

dan sekarang kami telah membuka website ini dan itu

akan secara otomatis menyegarkan

setiap kali kami mengubah kode kami jadi jika saya

ubah kodenya seperti ini dan saya simpan

sekarang secara otomatis menyegarkan tanpa

membuat kita bolak-balik

jadi itu fitur yang sangat berguna untuk

mempercepat perkembangan kita

sekarang mari kita berlatih lagi dan

kita akan mengkonversi keduanya

html untuk menggunakan struktur yang tepat

pertama aku akan benar-benar

hapus saja semua tab tambahan di sini

dan sekarang mari kita bekerja pada file tombol

sekarang server langsung tidak berfungsi

jika kita tidak memiliki html yang tepat

struktur dalam kode kita jadi mari tambahkan itu

struktur terlebih dahulu

Aku akan pergi ke sini dan kita akan pergi

untuk membuat struktur jadi ingat kita

mulai dengan doctype

ruang html

dan kemudian kita akan membuat html

elemen

dan kemudian di dalam kita akan membuat

kepala

dan kita akan membuat elemen tubuh

dan ingat tubuh berisi

semua yang terlihat di halaman

jadi jika kita gulir ke bawah

ketiga tombol ini terlihat di

halaman
jadi kita akan memindahkan ini ke

elemen tubuh

dan sekarang mereka berada di tempat yang tepat

sekarang untuk elemen gaya ini ingat itu

kami mengatakan elemen gaya tidak

benar-benar membuat apa pun yang terlihat di

halaman

tapi itu bisa mengubah gaya lain

elemen

jadi ini adalah contoh yang baik dari sesuatu

yang harus masuk dalam elemen kepala

karena tidak muncul secara kasat mata

halaman

jadi kita akan menyalin semua ini

dan memasukkannya ke dalam elemen kepala

saya akan naik

dan kita akan menyimpan ini di sini

jadi sekarang semua kode css kita ada di

tempat yang benar

dan sekarang kita memiliki yang tepat

struktur

kita dapat membuka ini dengan server langsung kita

hanya untuk memastikan semuanya terlihat baik

ayo pergi ke sini dan tambahkan judul seperti kita

terpelajar

dan ini akan mengubah teks di

bagian atas tab

jadi sebut saja tombol ini

praktik
simpan dan Anda akan melihatnya

memuat ulang secara otomatis

sekarang kita akan belajar fitur lain

yang kita dapatkan dari mengikuti ini

struktur

jika kita melihat kode kita, kita memiliki semuanya

kode css kami bersama dengan kami

kode html sekarang ini menjadi membingungkan

karena kita memiliki banyak baris kode

dan kami menggabungkan dua bahasa yang berbeda

untuk mengatasi masalah ini kita bisa memindahkan semua

css kami ke dalam file yang berbeda

jadi mari kita salin semua ini

dan kita akan membuat file baru untuk

hanya berisi css kami

saya akan pergi ke sini dan membuat yang baru

mengajukan

dan mari kita menyebutnya

tombol.css

pastikan file Anda diakhiri dengan dot css to

memberitahu komputer bahwa file ini

berisi kode css

dan sekarang kita akan memindahkan kode kita

ke dalam file itu

dan simpan

dan simpan di sini

sekarang Anda akan melihat bahwa kami kehilangan semuanya

gaya kami dan itu karena kami sekarang

perlu memuat file css baru ini ke dalam

html
untuk melakukan itu kita akan belajar yang baru

elemen

disebut elemen penghubung

jadi tautannya adalah semacam elemen khusus

karena tidak memerlukan tag penutup

seperti yang kita lihat selama ini

elemen seperti ini disebut batal

elemen jadi jika kita mencari google

dan kami mencari

elemen kosong

html

ini akan memberi kita daftar elemen

yang tidak membutuhkan tag penutup jadi ini

adalah pengecualian dari aturan itu

semuanya harus memiliki tag penutup

jadi jangan terlalu khawatir tentang menghafal

semua ini

Anda akan semakin terbiasa dengan hal itu

Anda menulis html dan saya akan memperkenalkan void

elemen untuk Anda satu per satu

jadi di sini kita akan belajar pertama kami

elemen batal yang tidak membutuhkan a

tag penutup

tetapi elemen ini membutuhkan dua atribut

yang pertama dipanggil

rel

yang berarti hubungan jadi jenis apa

hal yang kita menghubungkan di

dalam hal ini kita akan link dalam

gaya

[Musik]

lembar dan kemudian kita harus menceritakannya

atribut lain yang

href

jadi ini memberi tahu tautan file apa kita

akan link ke file ini

jadi di sini kita akan menautkan file css kita

ke dalam html kita

jadi kita akan link

tombol dot css oke sekarang mari kita kembali

ke halaman kami, Anda akan melihat bahwa kami tidak memilikinya

gaya kami dan sekarang saat saya menyimpan ini

kami mendapatkan semua gaya kami kembali

dan itu karena kami memuat semua

kode css ditemukan di buttons.css

yang merupakan semua kode yang kita miliki sebelumnya

ke dalam html kita

jadi ini adalah cara lain untuk memuat css

tanpa harus menulis semuanya di kami

html

sekarang manfaat besar dari ini adalah masing-masing

file berisi lebih sedikit kode

dan setiap file berisi satu jenis kode

jadi file ini kita hanya memiliki kode html dan

dalam file ini kita hanya memiliki kode css jadi

membuat file lebih kecil dan lebih fokus

dan itu akan membantu kita berkembang

lebih mudah

sekarang sebelum kita melanjutkan saya ingin berbicara

tentang

atribut href

jadi cara komputer menemukan ini

file itu akan mencari

tepat di samping file html kami sehingga akan

untuk mencari tepat di samping file itu

kode ini masuk

jadi itu akan mencari file bernama

tombol.css

ia menemukannya dan memuatnya ke dalam kita

html

tetapi jika file ini ada di folder, mari

membuat folder baru

sebut saja ini

gaya

mari kita letakkan file css di folder baru kita

dan sekarang Anda perhatikan bahwa gaya-gaya ini

hilang

dan itu karena tautan ini tidak dapat ditemukan

tombol.css lagi

apa yang coba dilakukannya adalah mencoba melakukannya

cari file bernama buttons.css

di samping html kami dan tidak ada apa-apa

di sana

jadi untuk menautkan file yang ada di dalam folder

pertama Anda harus memberikan nama

folder yang ada di samping file html

hal ini gaya

selanjutnya kita harus mengetik garis miring

jadi tebasan ini berarti kita akan masuk

folder gaya

dan kemudian di dalam kita akan menemukan

tombol.css

jadi ini adalah sesuatu yang disebut filepaths

dan ini pada dasarnya adalah bagaimana kami menemukan

file yang berbeda dalam kode html kami begitu

mari kita simpan ini

dan sekarang kami berhasil menautkan

file css kita

jadi itulah sedikit tentang bagaimana file

jalan bekerja kita akan perlu menggunakan

ini nanti dalam kursus ini ketika kita

buat ulang youtube.com

sekarang mari kita berlatih lagi dan

kita akan mengonversi file akhir kita

ke dalam struktur html yang tepat

jadi mari kita buat strukturnya terlebih dahulu

karena kita tidak bisa menggunakan live server saja

belum

kita akan menulis doctype

spasi html di atas

dan kemudian kita akan memiliki html

elemen dan kemudian di dalam kita akan

memiliki elemen kepala

dan kemudian kita akan memiliki tubuh

elemen

sekarang semua yang terlihat sedang berjalan

untuk masuk ke dalam tubuh

jadi jika kita gulir ke bawah

semua paragraf kami akan pergi

di dalam tubuh

memotong

dan tempel

Simpan itu

dan sekarang apapun yang tidak terlihat adalah

akan masuk ke dalam kepala

jadi jika kita scroll ke bawah elemen style

tidak terlihat di halaman

jadi itu akan masuk ke dalam kepala

elemen

memotong

dan tempel

baiklah jadi sekarang kita memiliki html yang tepat

struktur

kita akan membuka ini dengan hidup

server

memindahkannya ke kiri di sini

semuanya terlihat bagus

dan kita akan melakukan beberapa latihan lagi

saya akan mengatur

judul lagi

hanya untuk mendapatkan lebih banyak pengulangan

sebut saja teks ini

praktik

simpan dan Anda akan melihat judulnya

diatur di sini

dan kita akan memindahkan semua ini ke

file css
jadi mari kita membuat file baru

disebut teks dot css

dan kita akan pindah

semua kode css ke sana

jadi ayo

memotong

dan paste ke sini

selanjutnya kita akan

tautkan file css di file html ini

mari kita buat elemen tautan

membutuhkan dua atribut

rel

dan href

jadi kita akan link

lembar gaya

dan file tersebut berada

tepat di samping file html

jadi semua yang perlu kita lakukan

adalah link text.css

simpan dan segarkan

dan sekarang kembali ke tempat kita dulu

sekali lagi mari kita berlatih memindahkan ini ke a

map

sekarang kami tidak dapat menemukan text.css di samping

file html kami tetapi ada gaya

folder jadi kita akan melihat

di dalam folder gaya yang akan saya tuju

gunakan garis miring untuk pergi

di dalam dan kami akan menghubungkan ini

file teks.css
dan begitulah cara kami menggunakan jalur file

untuk menautkan file css

fitur terakhir yang akan kita lihat

yang kita dapatkan dari struktur ini adalah

kemampuan untuk menambahkan font baru ke kami

situs web

jadi situs web memiliki sekumpulan font

default yang bisa kita gunakan

misalnya salah satunya disebut arial

satu lagi yang telah kita lihat disebut

kali roman baru itu pada dasarnya

font yang kami dapatkan di situs web baru

sekarang selain font default ini

kita benar-benar dapat memuat font baru dari

internet dan kita akan belajar bagaimana caranya

melakukan itu dalam struktur ini

jadi mari kita pergi ke halaman web kami

dan google sebenarnya menyediakan banyak sekali

font gratis yang sangat bagus yang bisa kita gunakan

jadi kita akan membuka tab baru

dan kita akan mencari google

font

dan kita akan pergi ke ini pertama

tautan

sekarang situs web ini mungkin terlihat sedikit

berbeda untuk Anda

tetapi proses umumnya sama

pertama kita akan mencari font

yang kami suka jadi font yang bagus untuk digunakan di sini
adalah roboto dan ini adalah font itu

akan kami gunakan untuk tugas akhir kami

kita akan memilih font ini

dan kemudian di dalam sini kita akan memilih

gaya yang kita inginkan

jadi misalnya saya akan memilih

gaya reguler

dan saya juga akan memilih

gaya berani di sini

jadi saya akan memilih

gaya yang berani

dan kemudian aku akan pergi ke keranjang

font yang saya pilih

dan kemudian google akan memberi saya

kode yang saya butuhkan untuk memuat font ini

yang perlu kita lakukan hanyalah menyalin kode ini

tepat

dan kemudian meletakkannya di bagian kepala kita

html kami

jadi kita akan memasukkannya ke dalam kita

struktur

di bagian kepala ini

dan sekarang kami telah memuat font baru yang kami

dapat digunakan di situs web kami

jadi sekarang mari kita kembali ke website kita

dan kita akan menggunakan font baru ini

jadi ingat bahwa saat ini kami mengatur kami

font ke arial

kali ini kami memuat font yang disebut

roboto dan itulah yang akan kita lakukan

gunakan jadi mari kita ubah ariel di sini

ke

roboto

sekarang ketika saya menyimpan font akan

mengubah

dan begitulah mungkin tidak terlihat seperti itu

jauh berbeda karena roboto sangat

mirip dengan ari tetapi jika kita periksa

dan kami mengklik elemen ini

dan pergi ke tab dihitung

kita akan melihat bahwa keluarga font sekarang

diubah menjadi roboto

jadi ini adalah bagaimana kita dapat memuat besar

pemilihan font dari google ke kami

halaman web dan menggunakannya di situs web kami

jadi itulah fitur-fitur yang kami dapatkan

dari mengikuti struktur html ini

setiap website yang kita buat dari sekarang

akan selalu memiliki tag html sebagai kepala dan

tubuh dan doctype di bagian atas

sekarang kami siap untuk bekerja di final

proyek kursus ini menciptakan kembali

youtube.com

seperti sebelumnya saya telah membuat halaman di

website saya yang akan menunjukkan kepada kita apa

proyek akhir terlihat seperti

jadi pertama kita akan menutup semua kami

tab browser karena kita akan

mulai lagi
dan kemudian kita akan membuka halaman baru

dan kita akan pergi ke

super

sederhana

titik dev

latihan tebasan

tebas youtube

jadi di halaman ini Anda bisa melihat apa yang kami

proyek akhir akan terlihat seperti jadi kita

akan belajar bagaimana untuk menciptakan

youtube.com yang Anda lihat di sini

jadi pertama mari kita siapkan proyek kita di

editor kode

jadi mari kita masuk ke

Di Sini

dan mari kita benar-benar membuat folder

itu akan berisi semua milik kita

kode sebelumnya jadi tugas akhir adalah

akan berisi banyak kode jadi kami

tidak ingin membuatnya bingung dengan

pelajaran sebelumnya

jadi sebut saja intro ini dasbor 2

html

dan kita akan menempatkan segala sesuatu

di dalam folder ini

Aku akan menempatkan ini di sini

Dan

file html ini di sini juga

selanjutnya kita akan membuat html baru

file untuk proyek akhir kami

jadi mari kita membuat sebuah file bernama

youtube.html

dan saya benar-benar memasukkannya ke dalam folder ini

saya akan mengeluarkannya dengan menyeretnya

dibawah sini

jadi sekarang kita memiliki intro ke folder html

dan youtube.html kami dan kami siap

memulai

pertama kita akan mengatur yang tepat

struktur html yang kita pelajari di

pelajaran sebelumnya

jadi kita akan memulai dengan yang lebih sedikit

dibandingkan

jenis dokumen seru

dan html

dan kemudian kita akan membuat html

elemen

itu akan berisi seluruh kita

halaman web

dan di dalam sini kita akan memiliki

elemen kepala

dan kita juga akan memiliki tubuh

elemen

sekarang kita memiliki struktur yang kita bisa

buka dengan server langsung

dan sekarang kami memiliki halaman kosong kami jadi ini

halaman akan dimuat ulang secara otomatis

ketika kita mengubah kode kita

sekarang sebelum kita bisa mengerjakan final

proyek kita perlu mempelajari dua html lagi

elemen cara memuat gambar ke kami

situs web dan cara membuat kotak telusur

jadi mari kita mulai dengan memuat gambar terlebih dahulu

jadi saya akan menunjukkan kepada Anda bagaimana Anda bisa

unduh thumbnail ini dari saya

situs web

kita akan klik kanan di tempat kosong

daerah

dan memeriksa

dan sekarang jika kita mengklik ikon ini di atas

kiri

dan arahkan kursor ke atas gambar

dan klik itu

dan Anda mungkin perlu menyeretnya ke bawah

lihat htmlnya

kita dapat menemukan gambar di html dan

di sini adalah url untuk gambar sehingga kita bisa

sebenarnya klik ini

dan itu akan membuka gambar di tab baru

dan kita dapat mengontrol s untuk menyimpannya jadi buatlah

yakin kami menyimpan gambar ini

di folder yang berisi semua file kita

kode

jadi itulah folder ini untuk saya

saya akan menyimpannya

dan sekarang di editor kode saya, saya dapat melihat

gambar berikutnya kita akan membuat html

elemen untuk memuat ini ke halaman kami

jadi saya akan kembali ke halaman saya di sini

dan kemudian kita akan masuk ke dalam tubuh

dan buat elemen gambar

yang kurang dari img lebih besar dari

sekarang elemen gambar unik karena

itu elemen kekosongan lain

jadi kami menyebutkan elemen void secara singkat

pelajaran sebelumnya itu adalah elemen yang

tidak memerlukan tag penutup jadi ini

salah satu pengecualian terhadap aturan tersebut

jadi elemen gambar mengambil satu atribut

disebut src

sekarang atribut ini memberitahu komputer

gambar mana yang akan ditampilkan di situs web

jadi bagi kami citra itu adalah kami

download disebut thumbnail one dot webp

jadi kita akan menampilkan

thumbnail dash satu titik web p

dan ketika saya menyimpannya

gambar sekarang dimuat ke situs web kami

jadi atribut sumber ini

bekerja dengan cara yang sama seperti

atribut tautan yang kita lihat sebelumnya

itu mengikuti aturan jalur file ke

cari file kami jadi hanya sebagai pengingat

jika kita mengetik

thumbnail1.webp di sini akan terlihat

untuk file bernama thumbnail1.webp

tepat di samping file html kita

menemukannya dan kemudian memuatnya ke kami

situs web

tapi sekarang kita benar-benar akan membuat

folder karena kami memiliki beberapa

thumbnail dan kami ingin mengaturnya

kita akan membuat folder bernama

thumbnail

saya akan menyeret ini ke folder itu

jadi sekarang untuk atribut sumber

kami tidak memiliki file di samping html kami

disebut thumbnail1.webp

dan kemudian Anda melihat kesalahan ini di sini jadi ini

berarti ada kesalahan loading an

gambar

sekarang untuk menemukannya di file thumbnail

kita akan mengetik

thumbnail garis miring thumbnail 1 titik webp

jadi pertama itu akan mencari file

atau folder bernama thumbnail di samping

html

ia menemukan yang ini dan kemudian tebasan

di sini berarti masuk ke dalam folder dan

lalu temukan

file ini di dalam folder yang

Di Sini

jadi begitulah cara kami memuat gambar ke

halaman

sekarang kita akan belajar bagaimana gaya

elemen gambar kita jadi mari kita masuk ke

bagian kepala di sini

dan buat elemen gaya

sekarang sebelum kita melakukan itu saya lupa melakukannya

sesuatu yang

mari buat judul untuk halaman kita jadi kita

dapat memanggil ini

youtube.com

klon

dan jika kita menyimpan ini, judulnya akan ditampilkan

di tab

baiklah jadi mari kita belajar bagaimana untuk gaya

citra kita

jadi seperti biasa kami akan memberikannya a

atribut kelas

dan sebut saja thumbnail ini

dan sekarang kita dapat menargetkan kelas ini di kita

css

jadi titik

kuku ibu jari

sekarang semua properti css yang kita

belajar sejauh ini berlaku untuk gambar beberapa

dari mereka masuk akal dan beberapa dari mereka

jangan

jadi satu properti yang jelas tidak

masuk akal adalah sesuatu seperti

ukuran font dash

jadi jika saya menyimpannya, Anda tidak akan melihat apa pun

berubah karena tidak ada teks di dalamnya

elemen ini itu gambar

jadi meskipun ini bekerja tidak

benar-benar mengubah apapun

sekarang properti yang masuk akal untuk

gambar adalah lebar

jadi ini akan mengatur lebar gambar ini

mari kita membuatnya lebih kecil agar sesuai dengan apa yang kita

miliki di sini

jadi mari kita buat lebarnya seperti itu

300 piksel

sekarang kita simpan dan sekarang lebarnya ini

gambar berukuran 300 piksel

jadi satu hal yang mungkin Anda perhatikan adalah itu

saat kita mengatur lebar gambar

tingginya juga berubah

jadi sebelum kita memiliki ini

perhatikan bahwa gambar itu jauh lebih tinggi

tapi segera setelah kita mengatur lebarnya

ketinggiannya juga menyesuaikan

jadi itulah salah satu kelakuan gambar yang kita

harus tahu

ketika kita mengatur lebar, tingginya akan

sesuaikan juga agar gambar memiliki

dimensi yang sama apa yang saya maksud dengan sama

dimensi adalah bahwa itu tetap sama

membentuk

jadi misalnya jika saya mengatur ketinggian sebagai

Sehat

ini akan menyebabkan gambar hilang

bentuknya atau kehilangan dimensinya

mari kita atur ketinggiannya menjadi seperti ini

600 piksel

Simpan itu
dan sekarang Anda akan melihat bahwa gambarnya adalah 600

tinggi piksel

tapi itu kehilangan bentuknya dan sekarang

menjadi meregang

sehingga perilaku gambar

semacam membuat kita aman sehingga membuat

gambar terlihat bagus

sekarang jika kita benar-benar menginginkan gambar itu

persis 300 piksel kali 300 piksel

apa yang bisa kita lakukan sehingga gambar ini yang Anda bisa

lihat semakin melebar

jadi selain semua properti css

yang kita pelajari sejauh ini adalah elemen gambar

memiliki sifat tersendiri yang spesifik

ke sebuah gambar

jadi salah satunya disebut

obyek

bugar

jadi ini menentukan apa yang terjadi jika ini

ukuran tidak sesuai dengan gambar

dimensi atau bentuk gambar

jadi misalnya

saya dapat menetapkan nilai penutup

jadi ini memberitahu gambar untuk menutupi ini

300 kali 300 daerah

tapi itu juga akan menjaga bentuknya begitu

area ini mungkin tidak cukup besar untuk

menunjukkan seluruh gambar yang mungkin atau mungkin

tidak apa-apa tergantung pada apa yang kita inginkan

lakukan sekarang kita dapat mengatur bagian mana dari

gambar yang kita lihat menggunakan properti lain

ditelepon

obyek

posisi lari

jadi saat ini kami sedang melihat pusat

dari gambar

kita bisa mengatur posisi objek ke kiri

untuk melihat sisi kiri gambar atau kita

juga dapat mengaturnya ke kanan

untuk melihat sisi kanan gambar di

kasus bahwa gambar tidak cocok

daerah kami

nilai lain yang bisa kita berikan pada kecocokan objek

berisi

jadi jika kita menyimpan ini

seluruh gambar akan menyusut

sampai terkandung dalam 300 kali 300 ini

daerah

jadi saya akan mengatur perbatasan sehingga kita

dapat melihat apa yang dilakukannya

saya akan menetapkan batas 2 piksel

lebar batas 2 piksel

gaya perbatasan padat

warna pesanan merah

jadi di sini perbatasan menunjukkan kepada kita 300 kita

300 daerah

dan mengandung membuat gambar menyusut sampai

itu terkandung di daerah tapi itu

berarti bahwa itu mungkin tidak dapat menutupi

seluruh area jika itu tidak benar

membentuk

jadi dalam hal ini posisi objek bisa

memindahkan gambar ke atas

atau ke bawah

jadi pada dasarnya seperti itulah gambar bekerja

Anda dapat melihat banyak properti css

yang kita pelajari sebelumnya seperti lebar dan

tinggi dan perbatasan dapat diterapkan ke

elemen gambar dan elemen gambar juga

memiliki beberapa propertinya sendiri

yang menentukan bagaimana gambar itu

ditampilkan

jadi untuk sekarang mari kita buat sesuatu itu

seperti situs web terakhir kami

jadi saya akan mengatur lebar gambar

300

dan aku tidak akan mengatur ketinggian begitu

bahwa gambar tidak meregang dan kami

tidak perlu melakukan semua hal ini

dan saya sebenarnya hanya bisa

menghapus semua ini

jadi satu-satunya hal yang saya lakukan adalah memberi tahu

gambar untuk menyusut ke lebar

300 dan untuk mengecilkan ketinggian juga begitu

bahwa gambar mempertahankan bentuknya

jadi kita akan tetap dengan ini untuk

sekarang dan ini akan sesuai

untuk ini
bagian dari proyek akhir kami dan kami

akan mulai belajar bagaimana membangun

seluruh pratinjau video

elemen selanjutnya yang akan kita pelajari

pelajaran ini adalah bagaimana membuat pencarian

kotak seperti yang Anda lihat di sini

jadi mari kita kembali ke website kita dan

kita akan belajar kode untuk membuat

kotak pencarian

html untuk membuat kotak teks lebih sedikit

dibandingkan

masukan lebih besar dari

jadi elemen input adalah elemen void

seperti elemen gambar tidak

memerlukan tag penutup

sehingga elemen input memiliki beberapa

atribut yang bisa kita berikan padanya

salah satunya disebut tipe jadi jika kita

atur jenisnya sama dengan teks yang akan dituju

beri kami kotak teks

saya akan menyimpan ini

dan sekarang di html kami, Anda dapat melihat kami memilikinya

kotak teks

jenis lain yang bisa kita berikan untuk ini

input disebut kotak centang

jadi jika saya menyimpan ini

sekarang kita memiliki kotak centang

jadi untuk tujuan kita kita akan mengatur

jenis ke kotak teks karena kita inginkan

untuk membuat kotak pencarian youtube

di sini

jadi Anda juga memperhatikan bahwa kotak teks ini

memiliki pencarian kata di dalamnya dan ketika saya

mulai mengetik

kata pencarian itu hilang

jadi ini adalah semacam seperti label untuk

pengguna memberi tahu mereka apa yang harus dimasukkan ke dalam ini

kotak teks dan ini dikenal sebagai a

placeholder

jadi jika kita kembali ke website kita kita

akan menambahkan placeholder ke yang baru

kolom tulisan

untuk melakukan itu kami hanya akan memberikan

atribut

placeholder

dan mari atur placeholder sebagai pencarian

kami menyimpannya sekarang kami memiliki placeholder

yang hilang ketika kita mulai mengetik begitu

itulah cara kami membuat apa yang kami lihat

Youtube

jadi untuk kotak teks semua css

properti yang kita pelajari sejauh ini bisa

digunakan pada kotak teks jadi mari kita lihat

beberapa contoh

mari tambahkan atribut class terlebih dahulu

selalu

agar kita bisa membidiknya sebut saja

bilah tanda hubung pencarian

dan kemudian di dalam css kami, kami akan

pencarian titik target

kelas bar

dan kemudian di dalam kita dapat mengatur css kita yang biasa

properti jadi misalnya

dalam hal ini kita dapat mengatur ukuran font dash

dan mari kita atur ke 20 piksel

simpan dan muat ulang dan sekarang Anda bisa melihatnya

bahwa ukuran font memiliki

mengubah hal lain yang bisa kita ubah adalah

margin atau spasi jadi mari kita tambahkan beberapa

batas

ke kiri

dari 12 piksel

simpan dan sekarang kita memiliki beberapa spasi

kiri jadi pada dasarnya segala sesuatu itu

kita telah belajar sejauh ini tentang css

properti yang dapat kita gunakan di kotak pencarian

untuk saat ini mari kita hapus contoh ini

gaya dan kita akan gaya ini

kotak pencarian agar terlihat seperti final kami

proyek nanti dalam kursus ini

dalam pelajaran ini kita akan belajar satu

properti css yang paling penting

disebut properti tampilan dan kami

akan menggunakan ini untuk mulai membangun

proyek akhir kami

kita akan memulai dengan mengambil

lihat proyek akhir kami

dan kita akan mulai membangun

teks di sini jadi kita akan membuat

paragraf untuk teks ini

jadi mari kita masuk ke kode kita

dan kita akan membuat tiga

paragraf

jadi inilah salah satunya dan kita bisa menyalinnya

teks

jadi salin dan tempel

jadi inilah paragraf lain

saya akan menyalin ini

dan rekatkan di kode kami

dan inilah paragraf terakhir

dan kami akan menghemat

jadi di sini aku benar-benar akan menggunakan

entitas html lagi, bukan ini

karakter spesial

jadi untuk menghemat waktu kita, saya pergi saja

untuk mengetiknya di sini

sekarang saya akan menyimpan ini dan kembali

ke halaman web saya

dan sekarang kita memiliki teks yang kita

akan digunakan

tetapi Anda mungkin melihat sesuatu yang aneh

kenapa kotak teks ini ada di samping kita

gambar

jika kita melihat paragraf kita, mereka aktif

atas satu sama lain jadi satu demi satu

pada setiap baris

kenapa kotak teks dan gambar muncul

baris yang sama

jadi ini karena properti tampilan

di css dan kita akan belajar apa

itu sekarang

di html ada tiga jenis

elemen

jenis unsur pertama disebut a

elemen blok

elemen blok menempati seluruh baris

jadi paragraf secara default adalah blok

elemen

kita dapat melihatnya di alat dev kami dengan

klik kanan di browser

lalu klik periksa

dan kemudian mengklik ikon ini di atas

kiri

disini

dan kemudian melayang di atas paragraf kami

sehingga Anda dapat melihat bahwa meskipun teks

pergi ke sini paragraf meluas ke

akhir baris

karena paragraf secara default adalah a

elemen blok elemen blok mengambil

seluruh baris

jadi mari kita masuk ke kode kita dan saya akan pergi

untuk mendemonstrasikan properti lain dari blok

elemen

jika kita menetapkan kelas pada paragraf dan

kita gaya itu

jadi mari kita atur kelas judul dasbor video

mari kita simpan

dan kita akan menatanya

dan mari kita beri lebar

dari 300 piksel

simpan dan segarkan

dan sekarang paragraf ini hanya 300

piksel

jadi tidak melar sampai ujung

baris lagi mari kita verifikasi bahwa menggunakan

devtools dengan mengklik kiri atas ini dan

lalu arahkan kursor sehingga Anda melihat bahwa

paragraf itu sendiri hanya membutuhkan lebar

300 seperti yang kita atur di css kita tapi tetap saja

menempati seluruh baris

dilambangkan dengan bagian oranye di sebelah kanan

Di Sini

jika kita mengklik paragraf ini

dan kami pergi ke tab yang dihitung

perhatikan bahwa tidak ada margin pada

sisi kanan tapi kami masih memiliki satu ton

daerah oranye di sebelah kanan

jadi beginilah cara kerja elemen blok

terlepas dari berapa banyak ruang mereka

benar-benar mengambil mereka mengambil seluruh

baris sehingga mereka dipaksa untuk berada di mereka

baris sendiri seperti paragraf ini dan ini

dua paragraf

jadi itulah yang dimaksud dengan elemen blok

tipe elemen kedua adalah inline

elemen blok
elemen blok inline hanya membutuhkan sebagai

banyak ruang yang dibutuhkan dan tidak

mengambil seluruh baris

contoh elemen blok sebaris adalah

elemen gambar dan elemen input

mereka hanya mengambil ruang sebanyak mereka

perlu dan mereka tidak mengambil

seluruh baris sehingga elemen lain bisa

muncul di samping mereka seperti yang kita lihat di sini

jadi itulah elemen blok inline tersebut

tipe ketiga elemen html dasar adalah

disebut elemen inline

elemen sebaris pada dasarnya hanyalah teks

elemen mereka muncul dalam garis

teks

jadi jika Anda ingat kami secara singkat memperkenalkan

elemen

kuat

jadi elemen ini muncul dalam garis

teks

seperti ini

jadi elemen ini membuat bagian dari teks

tebal dan muncul dalam garis

teks

jadi mereka adalah tiga tipe dasar

elemen html elemen blok yang mana

mengambil seluruh baris blok inline

elemen yang hanya memakan banyak

ruang yang diperlukan dan sebaris

elemen yang muncul dalam garis

teks

sekarang yang paling menarik dari ketiganya

adalah elemen blok dan inline

blok elemen karena mereka menentukan

bagaimana elemen ini ditampilkan di

halaman apakah di samping satu sama lain atau di atas

dan di bawah

selain itu kita bisa menggunakan properti css

disebut tampilan untuk beralih dengan mudah

blok dan blok inline jadi mari kita lihat caranya

itu akan berhasil

jadi pertama mari kita mulai dengan beralih dari

blok ke blok inline

kita akan beralih keduanya

paragraf ke elemen blok sebaris

mari kita masuk ke kode kita dan kita akan pergi

untuk memberikan ini kelas

sebut saja penulis dasbor video ini

dan mari kita sebut ini

statistik dasbor video

dan kita akan menata kelas-kelas ini

jadi kita akan memberi style pada dasbor video

pengarang

serta

video

[Musik]

statistik

dan kita akan mengatur keduanya

menampilkan
blok garis putus-putus

dan yang ini juga ditampilkan

blok garis putus-putus

saya akan memperkenalkan sedikit

sintaks css di sini

jika kita memiliki dua set gaya css itu

adalah sama

kita sebenarnya dapat menggunakan sintaks yang berbeda

dengan menambahkan koma di sini

jadi koma ini berarti bahwa kita akan

menargetkan kedua kelas penulis video

dan kelas statistik video dengan set ini

gaya jadi ini adalah bagaimana kita menargetkan

banyak hal dalam css dengan koma

sehingga Anda dapat melihat dua elemen ini sekarang

muncul di samping satu sama lain mereka berdua

elemen blok sebaris dan hanya mengambil

ruang sebanyak yang mereka butuhkan

jika kita mengklik kiri atas di dev

alat dan arahkan kursor ke ini

Anda akan melihat bahwa paragraf ini sekarang

hanya mengambil ruang sebanyak teks

dan hal yang sama untuk paragraf ini

sehingga Anda dapat melihat meskipun paragraf

secara default adalah elemen blok yang kita bisa

mengubahnya dengan sangat mudah menjadi blok sebaris

dengan properti display sehingga kita bisa

menempatkan mereka di samping satu sama lain

selanjutnya kita akan mencoba yang sebaliknya

arah kita akan pergi dari

elemen blok sebaris ke elemen blok

dan kita akan memakai keduanya

baris terpisah

jadi mari kita masuk ke kode kita dan kita

akan gaya kelas thumbnail

jadi saya akan menggulir ke sini

dan aku akan mengkonversi ini

menampilkan

memblokir

dan sekarang akan mengubah gambar menjadi

blok tampilan dan ini akan menyebabkan

gambar untuk mengambil seluruh baris

mendorong kotak teks ke bawah berikutnya

garis

jika saya menyimpannya

sekarang Anda dapat melihat bahwa gambar ini

mengambil seluruh baris kita akan

verifikasi ini dengan mengklik kiri atas dan

lalu arahkan kursor ke gambar ini

jadi dengan menggunakan properti ini kita bisa mengontrol

apakah suatu elemen muncul pada saat yang sama

garis atau pada garis yang berbeda

dan itulah yang akan kita lakukan

menyalin

desain ini

bilah pencarian ada di bagian atas yang kami miliki

gambar dan kemudian masing-masing tiga paragraf

baris yang berbeda sehingga kita akan menggunakan

properti tampilan untuk mencapai ini

mari kita masuk ke kode kita

dan pertama mari kita menempatkan

kotak pencarian di bagian atas

Simpan itu

dan karena gambar kita sudah ditampilkan

blok itu akan mengambil seluruh

baris sehingga dipaksa untuk mengambil baris

di bawah kotak pencarian jadi saya pikir ini

cukup bagus selama kotak pencarian ini

ada di atas sana maka kita baik untuk pergi

selanjutnya kita akan mengubahnya kembali menjadi

blok tampilan

karena kami ingin ini pada baris yang terpisah

seperti desain kami di sini

jadi untuk melakukan itu kita akan masuk ke kita

kode dan kami dapat mengubahnya untuk ditampilkan

blok tapi ingat bahwa paragraf oleh

default adalah blok tampilan

jadi kita bisa menyingkirkan kode ini

Simpan itu

dan sekarang elemen kita muncul di

setidaknya dalam struktur yang sama dengan

desain

dari atas ke bawah dan setiap elemen

mengambil jalurnya sendiri

jadi itu adalah properti tampilan itu

memungkinkan kita untuk mengontrol bagaimana sebuah elemen

ditampilkan apakah mereka blok

elemen dan mengambil seluruh baris atau

mereka adalah elemen blok sebaris dan hanya

mengambil ruang sebanyak yang mereka butuhkan

dalam pelajaran ini kita akan belajar

tentang elemen html yang paling penting

disebut elemen div

misalnya inilah twitter.com jika Anda

lihat html yang digunakan twitter Anda

dapat melihat bahwa mereka menggunakan banyak dan banyak

dari div

inilah contoh lain instagram jika kita

lihat html instagram kita juga bisa lihat

bahwa mereka menggunakan banyak sekali div

jadi apa sebenarnya div itu dan mengapa demikian

digunakan begitu banyak

jadi elemen div adalah singkatan dari pembagian

tapi cara mudah untuk memahami ini adalah

bahwa div hanyalah sebuah kotak

kita akan masuk ke kode kita dan melihat

pada sebuah contoh

jadi di bawah paragraf kita mari kita buat a

elemen div

dan di dalam kita akan memiliki beberapa teks

ini adalah div

simpan dan sekarang kita memiliki div pertama kita

elemen pada halaman

untuk menunjukkan kepada Anda bahwa div hanyalah sebuah kotak

kita akan klik kanan dan memeriksa

dan kemudian kita akan mengklik bagian atas ini

ikon kiri

dan arahkan kursor ke div seperti yang Anda lihat

kami membuat kotak di sekitar teks kami

Anda akan melihat bahwa kotak ini membentang ke

akhir dan itu karena div suka

paragraf secara default adalah blok

elemen sehingga mengambil seluruh baris

tapi seperti yang kita pelajari sebelumnya

pelajaran kita dapat dengan mudah mengubah ini ke

blok inline menggunakan properti display

jadi mari kita lanjutkan dan lakukan itu dan itu akan terjadi

menjadi lebih jelas bahwa ini benar-benar sebuah kotak

jadi kita akan mengatur kelas di sini

kita akan memanggil ini

contoh tanda hubung div

dan sekarang kita akan menatanya

dan mengubah tampilan

untuk menyejajarkan blok

sehingga tidak memakan keseluruhan

baris lagi

Simpan itu

dan sekarang jika kita pergi ke halaman web kita

klik ikon ini dan arahkan kursor

Anda dapat dengan jelas melihat bahwa div saja

membuat kotak di sekitar konten kami dalam hal ini

kasus konten kami adalah beberapa teks

jadi pada dasarnya itulah div

sekarang pertanyaan kedua adalah mengapa

div sangat berguna

fitur utama dari div adalah bisa

mengandung elemen lain di dalamnya

jadi saat ini kami hanya memiliki beberapa teks

di dalam div ini

tapi sebenarnya kita bisa menempatkan paragraf kita

dapat menempatkan gambar kita dapat menempatkan elemen apapun

di dalam div serta div lainnya

div dimaksudkan sebagai wadah

dan jika kita melihat desain youtube

yang kami miliki dalam proyek kami

kami menggunakan wadah di mana-mana

jadi inilah sebuah wadah

inilah wadah lain

dan inilah wadah lain

wadah ini memungkinkan kita untuk mengelompokkan semua

elemen ini bersama-sama sehingga kita bisa

buat tata letak yang terlihat seperti ini

ini contoh lain dari twitter

inilah sebuah wadah

inilah wadah lain

dan inilah wadah lain

untuk membangun dunia nyata yang kompleks

situs web kami membutuhkan wadah untuk mengelompokkan kami

elemen bersama-sama dan meletakkannya di atas

halaman

dan div adalah solusi sempurna untuk

masalah wadah ini dan itulah sebabnya

itu digunakan begitu banyak

mari kembali ke website kita

dan kita akan berlatih menggunakan

div sebagai wadah

jadi kita akan membuat wadah

sama seperti tugas akhir kami untuk ini

seluruh pratinjau video di sini

jadi itu berarti kita akan menempatkan semua

elemen-elemen ini gambar ini dan ketiganya

paragraf di dalam div kami

mari kita lihat cara kerjanya

jadi saya akan menyingkirkan teks ini

Pertama

dan kemudian saya akan mengubah div ini menjadi

kelas dari

dasbor video

pratinjau

karena ini akan berisi semua

elemen-elemen ini yang merupakan bagian dari video

pratinjau

dan kemudian aku akan pindah

gambar dan tiga paragraf

ke dalam div

sekarang simpan

dan Anda mungkin tidak melihat adanya perbedaan

karena div hanya menggambar a

kotak

sekitar isi di dalamnya

tapi kita bisa klik kanan

dan memeriksa

dan kita bisa melihat div

di html kami di sini

dan di dalam div kami memiliki gambar kami dan

paragraf kita

div hanya membuat kotak di sekitarnya

semua konten ini

jadi sekarang saya akan menunjukkan mengapa wadah itu

sangat berguna

kita akan masuk ke kode kita dan

kita akan mengubah lebar

elemen div kami di sini

jadi kita akan pergi ke sini dan kita bisa

pindahkan ini

mari gayakan kelas pratinjau video

dan kita akan mengatur lebar

dari 300 piksel

mari kita lihat bagaimana tampilannya

sehingga halaman tidak terlihat berbeda

namun jika kita klik icon yang ada di kiri atas

dan kemudian arahkan kursor ke paragraf kami, kami akan

memperhatikan sesuatu yang menarik

paragraf ini adalah elemen blok jadi

itu seharusnya mengambil seluruh baris

tetapi dalam hal ini karena ayat ini

ada di dalam div

dibutuhkan seluruh baris di div

jadi cara memblokir elemen sebenarnya

pekerjaan adalah bahwa mereka mengambil seluruh

garis

dalam wadah mereka daripada di

halaman

jadi itu sangat berguna karena jika kita

lihat proyek akhir kami

jadi untuk paragraf ini kami menginginkannya

muncul di baris terpisah seperti ini jadi kami

ingin mereka untuk mengambil baris mereka sendiri

tetapi kita tidak selalu menginginkannya

ambil baris di seluruh halaman

karena kita memiliki beberapa barang di sebelah kanan

sisi sini

jadi untuk mengatasi masalah ini kami menempatkan

paragraf di dalam wadah

sehingga mereka mengambil jalur mereka sendiri

wadah dan tidak di halaman

dan begitulah cara kita membuat tata letak

seperti ini

mari kembali ke website kita

jika kita mengarahkan kursor ke div kita sekarang

jadi kotak biru di sebelah kiri ini adalah milik kita

wadah itu mengelompokkan semua elemen

bersama-sama dan menyimpannya dalam warna biru itu

daerah yang Anda lihat

sekarang hal yang sangat keren tentang ini

yang memperhatikan bahwa kotak biru tidak

benar-benar mengambil seluruh halaman jadi kami

sebenarnya dapat memiliki kotak kedua di sampingnya

di kanan

jadi kita bisa menambahkan kotak biru lain di

kanan berisi pratinjau video lainnya

jadi sekarang kita akan melakukan itu tapi pertama

dari semua div secara default adalah blok

elemen jadi perhatikan di sisi kanan itu

semua oranye itu karena div ini

mengambil seluruh baris

dalam hal ini kita tidak ingin mengambil

seluruh baris lagi itu sebabnya kita

akan mengubahnya menjadi blok inline

elemen

jadi mari kita masuk ke kode kita

kita akan masuk ke pratinjau video

dan kita akan mengetik

menampilkan

blok sebaris

mari kita simpan

dan sekarang Anda dapat melihat bahwa div kami adalah a

tampilkan blok inline sebenarnya

muncul di samping bilah pencarian kami karena

ini juga merupakan blok inline jadi mereka

keduanya hanya memakan ruang sebanyak

mereka perlu dan sekarang mereka dapat muncul

di samping satu sama lain

namun kami ingin kotak telusurnya seperti itu

di atas dalam baris sendiri

jadi kita akan berlatih menggunakan

menampilkan properti lagi

kita akan mengatur bilah pencarian

menampilkan

memblokir

sehingga menempati seluruh baris dan

segala sesuatu yang lain dipaksa di bawahnya

Simpan itu

dan menyegarkan

dan sekarang jika kita mengarahkan kursor ke input ini

elemen kita dapat melihat bahwa kita memaksanya

mengambil seluruh baris

selanjutnya kita akan membuat video lainnya

pratinjau di samping yang ini

karena ini blok inline sekarang kita bisa

menempatkan lain

div di sini

jadi saya hanya akan menyederhanakan ini

dengan membuat salinan kode kami saat ini

saya hanya akan menyalin

dan tempel

dan sekarang kami memiliki dua pratinjau video

Simpan itu

dan di sana kita pergi kita sekarang memiliki dua video

preview di samping satu sama lain sehingga mereka

dua kontainer

tepat di samping satu sama lain dan ingat di

css kami

kita mengatur lebarnya

wadah ini sampai 300 piksel begitu

itulah jumlah ruang yang mereka

mengambil

dan kami menyetel tampilan mereka ke blok sebaris

jadi mereka tidak mengambil seluruh baris

dan mereka dapat muncul di samping satu sama lain

dan sekarang kami sedang dalam perjalanan untuk membuat

tata letak yang terlihat seperti ini

sebenarnya mari kita benar-benar mengganti

pratinjau video kedua di sini

dengan konten ini

jadi untuk melakukan itu kita akan men-download

thumbnail dan kemudian mengubah teks

jadi mari klik kanan dan periksa

saya akan mengklik kiri atas ini dan

lalu klik gambar ini

dan sekarang saya dapat mengunduh thumbnail oleh

pergi ke url ini

dan kemudian mengklik

dibawah sini

saya akan mengontrol s

untuk menyimpan thumbnail

saya akan menyimpannya

di folder yang berisi kode saya

di folder thumbnail bersama dengan kami

gambar mini sebelumnya

jadi simpan di sini

dan saya harus melihatnya di editor kode saya

disana

selanjutnya kita akan menukar

thumbnail jadi bukan thumbnail 1

kita akan mengatur thumbnail 2 dan kita

akan mengubah teks

jadi saya akan mengubah teks ini di sini

menjadi gelarku

dan saya perhatikan kami masih menggunakan

elemen yang kuat

yang sekarang dapat kita hapus karena dulu

hanya untuk contoh

dan aku juga akan berubah

nama saluran di sini

dan statistik video yang berjumlah 19 juta

dan empat tahun

dan empat

bertahun-tahun lalu

jadi sekarang jika saya mengatakan ini

kami memiliki dua pratinjau video yang berbeda tetapi

sekarang kita punya masalah

Anda akan melihat bahwa keduanya tidak

selaras satu sama lain

dan itu karena wadah ini

sebenarnya sedikit lebih tinggi dari ini

satu

sepotong teks di sini membungkus untuk

baris kedua sedangkan yang ini tidak

Namun untuk membuatnya terlihat lebih baik kita inginkan

untuk menyelaraskan ini di atas

jadi kami belajar cara ini kembali di salah satu

pelajaran sebelumnya dan kita akan

meninjau bagaimana melakukannya

saya akan masuk ke kode kita

dan kita hanya perlu mengatur properti ini

vertikal

meluruskan

dan kita akan mengaturnya ke atas

sehingga elemen ini sejajar di atas

saya akan menyimpannya

dan sekarang terlihat cukup bagus

kami sekarang memiliki dua pratinjau video yang berbeda

dan mereka selaras satu sama lain

hal terakhir yang akan kita lakukan adalah menambahkan beberapa

ruang di antara mereka

jadi ingatlah ruang di luar sebuah

elemen disebut margin dan kita akan pergi

untuk menambahkan margin ke seluruh wadah ini

sekarang jadi kita akan masuk ke kode kita dan

dalam gaya pratinjau video

kita akan menambahkan margin

lari ke kanan

dan mari kita atur ke sekitar 15

piksel

Simpan itu

dan sekarang kita tambahkan margin di sebelah kanan

dan sekarang hal yang menarik tentang ini

adalah jika kita klik kanan

dan memeriksa

dan kemudian di html kami, kami menemukan div kami

yang ada di sini

Anda akan melihat bahwa margin diterapkan

seluruh div

jadi begitulah elemen div bekerja

wadah yang mengelompokkan elemen lain

bersama-sama sehingga kita dapat membuat kompleks

tata letak seperti ini dan akhirnya kami

proyek youtube

baik-baik saja jadi ini mungkin yang paling

pelajaran penting dari kursus ini

kita akan belajar teknik yang disebut

teknik tata letak bersarang dan ini

akan membawa kita ke tingkat profesional

dengan html dan css

jadi apa teknik tata letak bersarang

ide dasarnya adalah bahwa ada dua

jenis layout yang pertama adalah a

tata letak vertikal yang terlihat seperti ini

di mana item berada di atas satu sama lain

dan kemudian yang kedua adalah horizontal

tata letak yang terlihat seperti ini di mana item

berada di samping satu sama lain

dan dengan menggunakan kombinasi vertikal

dan tata letak horizontal yang bisa kita buat

hampir semua hal yang kita lihat di situs web

jadi misalnya mari kita youtube

pratinjau video yang sedang kami kerjakan

kita dapat memecah ini dengan menggunakan a

tata letak vertikal

dan kemudian di dalam tata letak vertikal ini

kita akan memiliki tata letak horizontal

dan kemudian di dalam tata letak horizontal ini

kita akan memiliki tata letak vertikal

jadi seperti yang Anda lihat, kami memiliki tata letak di dalamnya

tata letak di dalam tata letak dan itulah sebabnya

itu disebut teknik tata letak bersarang

dan dengan menggunakan ini kita bisa cukup banyak istirahat

bawah hampir semua yang kita lihat pada

situs web profesional menjadi serangkaian

tata letak dan kemudian membuatnya kembali menggunakan kami

kode

jadi sekarang kita akan pergi melalui

bersama-sama cara yang kita bisa berlatih

menggunakan teknik tata letak bersarang untuk

menghancurkan sebuah desain

kita akan pergi ke proyek akhir kita

jika Anda menutupnya, Anda bisa pergi ke super

latihan simple.dev youtube

dan apa yang akan kita lakukan adalah kita

akan mengambil screenshot dari salah satu

desain ini dan kemudian kita akan

gunakan perangkat lunak pengedit gambar untuk menggambar

keluar tata letak

jadi pertama mari kita buat tangkapan layar

di windows Anda dapat menggunakan aplikasi bernama

menggunting

di mac kita akan mengetik perintah shift

n4 untuk membuat tangkapan layar

jadi mari kita ambil tangkapan layar ini

dan kemudian kita akan meng-upload ini ke

sebuah perangkat lunak pengedit gambar

sekarang merasa bebas untuk menggunakan apa pun itu

Anda merasa nyaman dengan tetapi jika tidak

tahu apa yang harus digunakan kita bisa pergi ke tab baru

dan kita akan mencari google

gambar

dan kita akan menggunakan ini

untuk mempraktikkan teknik tata letak bersarang

jadi setelah kita memiliki ini terbuka kita akan

unggah gambar kita

saya akan pergi ke komputer saya

dan unggah tangkapan layar ini

dan sekarang kita hanya akan menggambar beberapa

persegi panjang

untuk mewakili tata letak kami

jadi kita akan pergi ke sini

untuk bentuk

saya akan membuat persegi panjang

dan pertama kita akan membuat

tata letak vertikal

1 dan dua

jadi saya hanya akan menggambar

persegi panjang di sini

mari kita ubah latar belakang menjadi

transparan sehingga kita bisa melihat apa

di bawah

dan saya akan membuat perbatasan sedikit lebih

tebal

dan ubah menjadi merah

jadi lebih mudah dilihat

dan sekarang saya akan menyalin ini

dan rekatkan untuk membuat duplikat

dan aku hanya akan memindahkannya ke sini

dan mengubah ukuran persegi panjang seperti ini

baiklah jadi begitu saja kita membuat

tata letak vertikal

untuk saat ini jangan khawatir tentang waktu video

di sini kita akan membuat ulang ini nanti

dalam kursus menggunakan fitur lain dari

css

dan sekarang melihat desain kami, kami memiliki

tata letak horizontal 1 dan 2.

jadi untuk membuat layout horizontal kita

akan menarik keluar lagi menggunakan

persegi panjang

jadi mari kita masuk ke sini

dan kita akan membuat yang lain

persegi panjang

dan kita akan

gambar tata letak horizontal seperti ini

jadi begini

satu mengubah latar belakang menjadi transparan

membuatnya berani

dan saya akan menggunakan warna biru

untuk mewakili tata letak horizontal

sekarang saya akan menyalin ini

tempel di sini

dan mengubah ukurannya sedikit

seperti itu

dan sekarang kami memiliki tata letak horizontal kami

dan akhirnya di dalam sini kita akan

memiliki tata letak vertikal seperti ini

jadi sekali lagi kita hanya akan menjaga

menggambar persegi panjang

saya akan menyalin ini

dan tempel

dan pindahkan ke sini dan ubah ukurannya a

sedikit agar kita bisa melihatnya

jadi di sini

dan kemudian salin ini

lalu tempel lagi

kita akan membuat bagian kedua dari

tata letak vertikal kami

seperti itu

lalu salin

dan tempel untuk terakhir kalinya

dibawah sini

jadi begitulah cara kami menggunakan tata letak bersarang

teknik untuk memvisualisasikan dan memecah a

desain menjadi kombinasi vertikal

layout dan layout horizontal

sekarang mari kita lakukan lagi latihan kita

akan mengambil desain lain dan istirahat

yang turun menggunakan teknik ini

jadi kita akan membuka tab baru

dan kita akan pergi ke

twitter.com

super

sederhana

dev

dan kita akan mengambil hanya mengambil salah satu

tweet saya di sini

dan mengambil screenshot dari ini

dan kita akan memecah ini

desain menggunakan teknik yang sama

jadi mari kita kembali ke gambar google

dan kita akan membuat yang baru

menggambar untuk berlatih

dan mari kita upload screenshot yang kita

baru saja mengambil

ke gambar baru ini di sini

jadi sekarang kita akan melakukan hal yang sama

kita akan menggambar persegi panjang

mewakili tata letak bersarang

jadi mari kita lihat ini untuk melihat caranya

kita bisa memecahkan ini

segera saya melihat bahwa kita memiliki

tata letak horizontal

dan dua

jadi kita bisa memecahnya menjadi yang pertama

mari menggambar persegi panjang

untuk mewakili bahwa jadi inilah yang pertama

satu

dan aku hanya akan membuatnya biru

mewakili tata letak horizontal

dan salin

dan tempel

seperti ini

Oke

jadi itulah tata letak horizontal kami

dan sekarang melihat desain di dalamnya

di sini saya dapat melihat bahwa kita dapat memecahnya

lebih jauh ke tata letak vertikal

jadi saya akan menggambar lagi

persegi panjang

dan saya hanya akan menggambarnya di sini

dan gaya itu sedikit membuatnya merah

untuk mewakili tata letak vertikal

jadi salin
dan tempel

Aku hanya akan memindahkannya ke sini

Oke

oke jadi itu dua

Salin dan tempel

untuk mendapatkan tiga

jadi tidak harus sempurna itu

hanya di sini untuk membantu kami memvisualisasikan

desain

baik-baik saja jadi kami memiliki tata letak horizontal

dan kemudian di dalam kita memiliki vertikal

tata letak

dan sekarang melihat ini kita juga bisa

hancurkan ini

menjadi tata letak horizontal

mari menggambar beberapa persegi panjang lagi

sebenarnya saya hanya akan menyalin yang ini

dan tempel

dan ubah ukurannya di sini

jadi saya akan memecah ini lebih lanjut

ke tata letak horizontal di dalam sini

dan akhirnya kita bisa memecah bagian ini

lebih jauh ke tata letak horizontal

jadi mari kita salin ini lagi

dan tempel di sini

dan aku hanya akan

saya hanya akan membuat beberapa dari mereka

seperti ini

jadi begitu saja kami memecahkan ini

desain menjadi kombinasi vertikal

dan tata letak horizontal menggunakan nested

teknik layout

jadi sekarang kita memiliki pemahaman yang baik

tentang bagaimana ini bekerja kita akan belajar

cara membuat ulang ini menggunakan kode

jadi mari kita kembali ke proyek kita

saya akan menghapus semua tab tambahan ini

Di Sini

jadi kita akan pergi dari sesuatu itu

terlihat seperti ini untuk sesuatu yang terlihat

seperti desain akhir kami di sini

sekarang sebelum kita mulai kita benar-benar perlu

unduh gambar profil saluran ini

ingat untuk melakukan itu kita bisa klik kanan

dan memeriksa

klik ikon kiri atas di sini dan kemudian

klik gambar ini

dan kami memiliki url untuk mengunduhnya di sini

saya akan melayang di atasnya

scroll ke bawah dan klik link ini

sekarang ctrl s untuk menyimpan

dan saya akan menyimpannya di folder

yang berisi kode kita

yang ada di sini

dan sekarang ini akan muncul di kode kita

editor

jadi saya benar-benar akan membuat folder

untuk menyimpan semua profil saluran ini

foto-foto
karena kita akan memiliki banyak dari mereka

jadi saya akan memanggil saluran ini

gambar dasbor

dan saya akan menempatkan ini di sana

sekarang kita siap untuk membuat tata letak kita

jadi mari kita kembali ke desain akhir kita

dan lihat tata letak seperti apa yang kita miliki

jadi kita akan memiliki tata letak vertikal

yang itu

dan dua jadi dua baris dan kemudian di dalam

baris kedua kita akan memiliki

tata letak horizontal yang merupakan satu

Dan

dua

sekarang di dalam tata letak horizontal kedua

kita akan memiliki tata letak vertikal

satu

dua dan tiga

jadi itulah bagaimana kita akan memecah

desain ini

dan sekali lagi jangan khawatir tentang videonya

waktu di sini kita akan menciptakan ini

nanti di kursus

mari kita masuk ke kode kita dan kita akan pergi

untuk menerapkan itu

jadi pastikan bahwa kita memiliki proyek kita

buka di sebelah kiri sini

dan kita akan mulai dengan membuat

beberapa tata letak vertikal

untuk membuat tata letak vertikal kita akan

untuk membuat dua div

jadi ini akan menjadi vertikal kami

tata letak

sekarang ingat bahwa div adalah blok

elemen secara default sehingga mereka akan melakukannya

mengambil seluruh baris dan muncul satu

di atas yang lain dan itu persis

apa yang kita inginkan untuk tata letak vertikal

jadi mari kita lihat desain kita di sini

gambar di baris pertama jadi saya akan pergi

untuk memindahkan ini

potong dan tempel

dan kemudian di baris kedua yang kita miliki

yang lainnya

jadi saya akan meletakkan semuanya di sini

di baris kedua jadi potong

dan tempel

mari simpan dan segarkan

sekarang kita akan membuat horizontal

tata letak di sini

satu kolom akan memiliki saluran

gambar profil dan kolom lainnya adalah

akan memiliki teks

mari buat gambar profil saluran

Pertama

kita akan membuat sebuah

elemen gambar

kami akan memberikan sumbernya

dari gambar yang kita download di

awal

sehingga gambar yang ada di folder ini jadi

kita akan masuk ke folder ini terlebih dahulu

yang

saluran

[Musik]

foto-foto

dan kemudian ingat untuk memiliki garis miring untuk pergi

ke dalam folder itu dan kemudian saluran 1.jpg

Simpan itu

dan sekarang jika kita melihat kita saat ini

situs web gambar sebenarnya dengan sendirinya

baris dan itu karena paragraf tersebut

elemen blok sehingga harus muncul di

garisnya sendiri

kita akan mengubah ini dengan membuat

tata letak horizontal

seperti 1 dan 2.

jadi untuk melakukan itu kita akan membuat dua

div

inilah satu div

dan ini satu lagi

div

sekarang perbedaannya di sini adalah bahwa kita

akan membuat blok inline divs ini

elemen jadi ingat blok sebaris itu

adalah apa yang memungkinkan elemen muncul di samping

satu sama lain seperti ini sambil memblokir

elemen memaksa elemen untuk mengambil

seluruh baris sehingga mereka akan muncul

Tegak lurus

jadi kita akan membuat dua div ini

elemen blok sebaris untuk membuat

tata letak horizontal

mari kita referensikan desain kita terlebih dahulu

di kolom pertama kita memiliki saluran

foto profil

jadi saya hanya akan memindahkan ini

ke div pertama di sini

dan kemudian di div kedua kita memiliki semuanya

teks

jadi saya akan memindahkan semua teks

di sini potong dan

tempel

sekarang mari kita buat blok inline div ini

sehingga mereka muncul di samping satu sama lain

Aku akan memberikan kelas sehingga kita bisa

menargetkannya dengan css

sebut saja ini

saluran

gambar

dan kemudian kami juga akan memberikan

kelas ke div ini sehingga kita dapat menargetkan

dia

sebut saja ini info dasbor video

dan sekarang di css kami

kita akan membuat gambar saluran

gambar

menampilkan
blok garis putus-putus

dan kami juga akan membuat videonya

info ditampilkan di blok baris sehingga mereka

muncul bersebelahan

dasbor video

info

menampilkan

Di barisan

memblokir

simpan dan segarkan

sekarang Anda akan melihat bahwa mereka masih aktif

atas satu sama lain dan itu karena

div secara default memiliki lebar a

seratus persen jadi kita perlu mengurangi

lebar kedua div ini sehingga mereka

muncul bersebelahan

jadi ingat itu untuk pratinjau video

kartu jadi semua ini

kami mengatur div ke 300 piksel dan itu

bagaimana mereka bisa muncul di samping satu sama lain begitu

kita akan melakukan hal yang sama untuk kita

tata letak horizontal di sini

untuk gambar saluran mari kita atur a

lebar

dari 50 piksel

dan kemudian untuk info video kita akan

untuk mengatur lebar

hingga 200 piksel

jadi ini adalah kolom pertama kami

tata letak horisontal itu akan mengambil

50 piksel seperti ini

dan kemudian ini adalah kolom kedua itu

akan mengambil 200 piksel itu terjadi

untuk muncul di samping kolom pertama

karena keduanya adalah tampilan inline

memblokir

jadi mari kita simpan ini

dan Anda akan melihat itu terlihat sangat aneh

jadi mari kita lihat kode kita dan lihat apa

masalahnya adalah

saya akan menggulir ke sini dan Anda akan

perhatikan bahwa kami mengatur lebar

judul video yang teks ini ke 300 jadi

kami memaksanya meluap di sini dan

bukan itu yang kita inginkan

jadi kita hanya perlu menghapus ini

dan tidak memaksa lebar

jadi jika kita tidak memaksakan lebar 300 tersebut

paragraf hanya akan mengambil keseluruhan

ruang wadah yang 200

piksel

sekarang hal kedua yang kita perhatikan adalah itu

gambar ini meluap dan itu

karena gambar secara default meluap

sehingga mereka mempertahankan dimensi aslinya

sehingga mereka mempertahankan ukuran aslinya dan

yang menyebabkan mereka meluap seperti yang kita inginkan

untuk mengubah ukuran gambar ini sehingga hanya

membutuhkan 50 piksel
mari kita lanjutkan dan lakukan itu sekarang

mari kita beri kelas agar kita bisa

ubah ukurannya

dan aku akan menyebutnya

gambar dasbor profil

dan kemudian saya akan gulir ke sini

profil titik

gambar

dan kemudian saya akan mengubah ukuran lebarnya

hingga 50 piksel agar pas

kolom ini

saya akan menyimpannya

dan sekarang terlihat cukup bagus

kita benar-benar dapat melihat tata letak di kami

browser

dengan mengklik kanan memeriksa

dan menemukan html ini

jadi saya bisa mengklik ikon kiri atas ini

dan klik saja gambar ini

jadi saya akan menunjukkan kepada Anda seperti apa bentuknya

html

jadi di sini kita punya

tata letak vertikal jadi satu dan dua

dan kemudian di sini kita memiliki horizontal

tata letak satu dan dua

sekarang cara yang lebih baik untuk melakukan ini sebenarnya

untuk mengatur ini ke 100

jadi ini berarti gambar akan mengambil

seluruh ruang wadahnya jadi jika kita

lihat html kita

gambar ini ada di dalam wadah ini

jika kita set ke 100 itu akan mengambil

ruang dalam wadah yang

pada dasarnya 50 piksel yang kita miliki

Di Sini

mari kita simpan

berikutnya ingat bahwa kita telah melihat ini

masalah sebelum mereka tidak selaras

jadi kita akan menyelaraskan inline ini

blok elemen ke atas

untuk melakukan itu kita akan menggunakan ini

properti di sini sejajar vertikal di atas itu

pernah kita lihat sebelumnya

vertikal

garis putus-putus

atas

Simpan itu

baiklah jadi kita hampir sampai tapi perhatikan

bahwa keduanya tidak selaras

paragraf ini memiliki beberapa margin di

atas

ingat bahwa paragraf datang secara default

dengan margin di atas dan di bawah

jadi kita akan masuk ke kode kita dan

kita akan menyingkirkan margin ini di

atas jadi mari kita gulir ke atas

oh jadi kami benar-benar menghapus gaya itu

mari kita buat gaya baru di sini kita

akan menargetkan
judul dasbor video

Aku akan menargetkan kelas

judul dasbor video

mengatur margin

dasbor atas

ke nol

dan itu akan menghilangkan ruang

di sini

jadi saya akan berhenti di sini karena kita sudah

benar-benar membuat tata letak bersarang itu

kita butuh

mari kita lihat html kita di dev

peralatan

dan jika kita melihat preview video ini kita

memiliki tata letak vertikal 1 dan dua

di dalam tata letak vertikal kita memiliki

tata letak horizontal

satu dan dua

dan kemudian di dalam tata letak horizontal kami, kami

memiliki tata letak vertikal lain satu dua

tiga

jadi itu contoh praktis penggunaan

teknik tata letak bersarang untuk membuat a

tata letak yang bentuk yang mirip dengan ini

satu-satunya hal yang tersisa untuk dilakukan adalah

gaya website kami

dengan css satu per satu sampai terlihat seperti

ini

jadi kita akan melakukannya sekarang

jadi mari kita masuk ke kode kita dan kita

akan gaya elemen ini satu per satu

jadi aku benar-benar akan memindahkan ini ke bawah

di sini sehingga saya bisa melihatnya jauh lebih mudah

jadi hal pertama yang saya perhatikan adalah bahwa

gambar berbentuk bulat

jadi ingatlah untuk membuat gambar bulat atau

bulat apa saja

kita akan menggunakan sudut membulat jadi

kita akan mengatur perbatasan

radius

katakanlah 20 piksel

Simpan itu

oke jadi kami memiliki sudut membulat dan itu

mendapatkan lebih bulat tapi itu tidak penuh