Anggardha Febriano

Video ini membahas implementasi produk terlaris dalam website development dengan konsep layouting menggunakan flexbox dan pengaturan overflow untuk scroll. Penjelasan juga mencakup cara membuat efek overlay pada gambar dengan menggunakan absolute position dan opacity. Konsep ini membantu highlight informasi produk terbaik serta memberikan panduan praktis dalam mengatur tata letak elemen-elemen pada website e-commerce.

Oke setelah kita berhasil nih tadi udah bikin nafbar dan kita udah bikin kategori produknya dan pastikan kalian udah ngerjain PR dari saya

yang untuk melengkapin ini semua. Selanjutnya yang akan kita implementasi itu adalah produk terlaris.

Nah untuk produk terlaris ini mungkin agak sedikit beda terlihatnya cuman sebenernya konsepnya itu sama kayak cara layoutingnya itu sama

dan stylingnya itu juga sama gitu cuman mungkin kita disini akan introduce beberapa konsep baru kayak gimana cara kita bisa memainkan

position dengan menggunakan absolute value atau dengan relatif posisi dari parentnya dan kawan-kawan gitu ya.

Jadi yang mau saya lakukan disini adalah coba sharing sedikit ide dari saya itu gimana dan mungkin sedikit ya coba untuk menjelaskan dengan

coret-coretnya gitu ya. Jadi pertama yang bisa kita lakukan itu adalah of course pertama itu pastinya adalah kita akan memanfaatkan

flexbox juga ya. Jadi kayak lagi-lagi kita menggunakan container untuk membungkus ini semua dan dia tetap pake flexboxnya itu adalah

flexdirectionnya kolom ya kalau ide saya. Jadi kayak memisahkan antara si judul ini dan juga si konten ini dimana konten ini mungkin bisa kita sebut

sebagai karusel. Kenapa karusel? Karena dia bisa kita bisa kita ini ya bisa kita apa namanya bisa kita scroll ke samping. Jadi ini kan ini keliatan

kepotong ya jadi itu bisa di scroll ke samping gitu. Nah yang perlu kita pikirkan adalah gimana caranya kita bisa mengimplementasi si scroll ini gitu ya.

Nah sebenernya kalau misalnya kalian baru mulai belajar website development atau ya layouting CSS mungkin agak susah kebayangin itu gimana gitu ya.

Jadi saya akan coba untuk mencoba untuk melakukan visualisasinya. Sebenernya overflow itu gimana? Jadi overflow itu sebenernya anggaplah kalau misalnya ini adalah

sebuah kotak ya dimana kotak ini misalnya fix widthnya itu adalah 100% dari si parent. Anggaplah parent itu misalnya disini itu 90vw gitu ya.

Nah supaya bisa membuat ini semua jadi overflow kita perlu bikin childnya itu lebih dari 90vw gitu ya. Jadi lebih dari si parentnya gitu widthnya.

Nah yang jadi masalah adalah kalau misalnya kita secara naif melakukan itu yang terjadi adalah overflow dan disini itu tuh akan ada jelek gitu kepotong gitu dan kepotong itu kayak tidak expected gitu ya.

Nah caranya untuk kita biar bisa scroll tapi tetap bagus itu adalah kita langsung jangan sengaja kita kasih overflownya itu hidden gitu.

Jadi overflow hidden. Dimana overflow hidden itu nanti kita kombinasikan dengan overflow scroll untuk si child elementnya gitu.

Jadi kalau misalnya kita gambarin disini ini misalnya parent gitu ya. Nah si childnya itu nanti akan panjang disini gitu.

Ini si child dan nanti ini bisa di scroll nih gitu. Jadi kalau misalnya ini 90vw maka ini total harus lebih dari 90vw gitu ya atau y sama dengan 90vw plus x gitu dimana x itu adalah lebih dari si childnya itu.

Jadi harus kayak gitu dan nanti dia ini overflownya itu harus scroll gitu ya supaya dia si parent ini bisa ada behavior scroll buat si childnya itu.

Jadi sebenarnya ide buat si scroll itu kayak gitu dan ini yang di implementasi disini itu juga menggunakan konsep ini gitu ya dimana kayak parentnya itu harus lebih kecil daripada si child dan childnya itu harus lebih panjang supaya nanti bisa di scroll.

Nah other things yang mau saya share itu adalah disini nih item si best selling productnya ini.

Jadi sebenarnya best selling product ini warnanya itu gak segelap ini gitu jadi kayak ini tuh sebenarnya warnanya terang si gambarnya cuman jadi hitam karena saya kasih overlay.

Jadi disini tuh ada overlay warna hitam mungkin kayak di masking gitu ya atau istilahnya ya pokoknya di hitamin gitu supaya kita bisa highlight tulisan ini.

Jadi biasanya kalau misalnya designer itu melakukan hal seperti itu kalau misalnya mau ada tulisan overlay di atas sebuah gambar gitu jadi kayak supaya ini tulisan bisa kelihatan makanya gambarnya di hitamin.

Nah caranya gimana? Caranya kita bakal pake yang namanya kayak kita mainin absolute position dari si kontak ini nih si hitam ini dan juga nanti si kontak hitam itu kita tumpuk ke atas gambar ini.

Jadi kalau misalnya ini gambar nih ini gambar gitu ya nah ini ada kotak lagi yang ukurannya bener-bener sama persis dengan si kotak ini dan ini ditumpuk ke sini dan kita kasih opacity atau transparansinya itu jadi lebih transparan gitu.

Jadi kayak misalnya hitam tapi hitamnya itu gak ketat jadinya misalnya kayak transparan 0,5 opacity nya atau gimana gitu jadi makanya jadi hitam.

Nah terus si tulisan ini ini nanti juga bakal ditumpuk lagi jadi tulisan ini nanti ada kotak lagi dan disini ada tulisan nah ini kita tumpuk lagi disini gitu jadi kayak kita mainin tumpuk-tumpukan gitu jadi kayak mungkin agak kurang kebayang atau mungkin udah kebayang tapi ide yang saya lakukan disini itu seperti itu dan nanti kita akan langsung coba praktik bagaimana cara untuk mengimplementasi si tumpuk-tumpuk ini gitu ya.

Membuat Section Produk Terlaris Part 1

DEKSRIPSI

PENGAJAR

Anggardha Febriano

Anggardha Febriano

DEKSRIPSI

Anggardha Febriano

Anggardha Febriano