CSS Layouting - #10 Float : Membuat Website Sederhana (Part 2)

[@fahmirizasyahrani1720]

Terima kasih mas Galih. Saya sudah bisa membuat sperti ini tanpa nyontek videonya. Walaupun sesekali ngintip, krna masih ada bingung dan salah2. Tetapi sejauh ini saya cukup faham mngenai materinya, padahal baru 4 hari ngikuti materi dr awal html :D Penjelasan dan pnguasaan materinya uenak, mudah di tangkap untuk pemula. Lanjutkan mas! Josss

[@irfannovendi9969]

terimakasih banyak pak galih, dengan video2 yg anda share di yt ini saya belajar sangat banyak,, andaikan saja Indonesia punya orang2 yang peduli sesama dan ikhlas memberi ilmunya untuk sesama terutama ke pemuda-pemudi Indonesia, saya yakin Indonesia tidak akan kekurangan tenaga IT khususnya web developer, setidaknya semuanya akan melek teknologi, miris sekali sekarang belajar programer kya gini pada patok harga mahal, saya tau ilmu ini mahal, tpi mnurut saya klo semuanya bisa berbagi tanpa menutup2i ilmunya pasti Indonesia maju teknologinya, karna banyak sekali anak2 yg ingin sekali jdi programmer tpi terkendala dengan biaya

[@Rosdiana-qj8dt]

Setuju sekali... 👍🏻

[@Mieayamracer]

Udah mulai paham sedikit sedikit utak atik html sm css, walopun hasil website masih rada acak ga seperti punya pak galih tp im so excited :') semoga amal ibadah pak galih dilipat gandakan oleh Allah SWT

[@rifkiromdons]

Yang mengalami error saat menambahkan float: left; silahkan tambahkan tag penutup yang seharusnya terletak diatas sidebar

[@amaramzari4041]

udah, tetep aja error pas masukin clearfix nya -_-

[@rizkymaulana2123]

@@amaramzari4041 coba coba aja bro, gw juga sering kalo error gitu mah. biasanya mah kurang tanda ato gimana gitu.

[@rizqyputranto8831]

@@rizkymaulana2123 iya gw juga sering gitu kuranh teliti

[@ilyaszulfikar7585]

@@amaramzari4041 pake cara div kosong aja bang, nnti dikasi class="clear" abistu di css nya .clear { clear: left; }

[@irwancahyos5325]

Mas saya mengalami eror di bagian itu, boleh saya minta bantu solusi ya mas ?

[@sofyanekosanjoyo8091]

Terima kasih banyak ilmunya Pak Dosen Sandhika yang baikkkk....

[@vikrinurrohim1848]

2020 daripada nganggur oleh pandemi😁

[@saefulependi4633]

true

[@dapaaaa2236]

@@saefulependi4633 pohon

[@yurichandra1157]

Terimakasih mas Sandhika atas tutorialnya. Keep it up mas!

[@jarangtidur1914]

Halo, pak sandhika thank you buat materi2 nya. Ora Umum ora umum orrrra umummm! 👍 Joss

[@ainsyahabdullah1572]

sangat membantu sekali pak. . makin smangat belajar ngoding nya.

[@sandhikagalihWPU]

+Rehan Blacklist thankyou Rehan! :)

[@ainsyahabdullah1572]

sama2 pak .

[@dimascndraa5213]

2020 masih ada yang nonton:)

[@zaxdesain5556]

You not alone bro :'

[@mza-muh.zavierar-rizq9276]

yes

[@ayyraxx3257]

☝️

[@wann310]

2022 nyimak bg :(

[@yourhanes]

2023 nih

[@alvinrochafi6600]

Kak sandhika, terimakasih sudah membuat seri video yang mudah dicerna bahasanya Pertanyaan : Ketika .main di tambahi propertyy box-sizing : border box berarti lebar kontennya (menampung text) menjadi 560 bukan ? mengingat 20 digunakan untuk padding kanan, 20 untuk padding kiri --> 560 + 20 + 20 = 600px Gimana kak ?

[@sandhikagalihWPU]

terimakasih juga Alvin sudah nonton videonya.. :) box-sizing: border-box; membuat kita tidak perlu menghitung lagi ukuran dari elemen, ketika elemen tersebut ditambah padding dan border.. jadi ketika kamu memberi dimensi elemen misalnya 600px x 400px, setelah itu kamu beri padding 50px, maka ukuran total ukuran elemennya akan tetap 600 x 400, width dan heightnya akan otomatis menyesuaikan sendiri terhadap penambahan padding tadi.. mdh2an paham.. :)

[@alvinrochafi6600]

Web Programming UNPAS Emm terimakasih kak, mungkin nanti akan coba buat dan di inspect, biar makin paham

[@MNS_Computer]

Keren pa Dika. Barang kali dgn tutorial membuat website sederhana ini d lanjutkan di seri js atau php nya. Biar lengkap 1 tutorial uda ada html css js n php dlam 1 website sederhana. Hehehee

[@NoName-py1un]

Terimakasih ilmunya, sangat bermanfaat

[@SupriAdi-oz6di]

tq pak galih ilmunya

[@ridhofebrian2256]

Terimakasih atas ilmu nya 👍❤

[@refdinalal]

buat yang 2021 gw recomanded pake visual studio code.

[@maulanaarvy]

Berkah mas

[@fostuskarel]

2024 masih ada yg nonton gk

[@fadhilansyah25]

sekarang udah ada display: flow-root hehe. bagi temen" yang baru belajar taro di .container { display: flow-root}

[@areahijau8861]

udah gue coba, berhasil bro. thanks,

[@areahijau8861]

@Fani Novianti gak payah...

[@ahmadprabangkara1116]

apa tuh

[@akaneakwkwiwj]

punya saya ko gak ada properti itu yah bang?

[@andinata]

terimakasih pak dika

[@zenifersanches3958]

Thnks iyaa kk Buat part ke dua

[@plesirdumay4153]

selalu like

[@williamphilip6893]

Sandhika lanjutkan terus videox menambah ilmu lagi buat saya...saya juga sudah subricde thanks

[@sandhikagalihWPU]

Thanks William.. :)

[@williamphilip6893]

saya kayaknya kebetulan bekerja di sebuah Rumah Sakit di Makassar sebagai tenanga IT.hanya untk memhami web programming terus terang bang saya masih banyak belajar..melihat video2 anda saya terkesan untuk sering share untuk membuat sebuah web untuk rumah sakit di tempat saya..terima kasih untuk kesediaan membagi ilmu...

[@williamphilip6893]

oh ya sandika saya mau tanya kalau membuat flash gambar berjalan di website bgmn carax ya?terima kasih sebelumnya

[@sandhikagalihWPU]

membuat gambar berjalan bisa menggunakan flash, tapi lumayan agak berat. Supaya lebih ringan dan mudah bisa juga menggunakan CSS & Javascript. Nanti saya buatkan contohnya di seri CSS3, ditunggu aja ya William.. :)

[@williamphilip6893]

ok trima kasih banyak untuk infox sandika...ok saya tunggu sandika seri CSS3x :)

[@qraainii]

Mas sandhika, izin tak jadikan materi buat temen-temen ku ya

[@Juliaftr]

tutorialnya sangat membantu, terimakasih. berikutnya tutorial php nya ya pak dosen ^_^

[@sandhikagalihWPU]

+Julia ftr Terimakasih Julia.. ditunggu aja yaa.. :)

[@alqaschannel]

Mantapzzzzzzzz,,,,,,trimksh bang,,

[@Sumirat517]

Mantap

[@prismaputra8181]

Pingin punya dosen kayak pak Sandhika . -.

[@Novarisetiawan]

eror selama 2 hari di bagian footer ...finaly ketemu juga ...alhamdulilah

[@adipati27ma]

Pak dhika mau tanya dong, berhubung saya baru tau tahun ini tentang float,clear, dan flexbox(di w3schools) Karena skrg kan udah ada flex box ya, apakah float dan clear udah jarang atau bahkan ga pernah di pake lagi? Atau float+clearfix masih bisa di pakai untuk di beberapa kondisi? Karena kalo pake float kayanya saya lebih pusing daripada kalo udh pake flex *maafnewbie

[@mhmderiyanto1018]

alhamdullah cepet ngertinya

[@adytiaputraramadhany4440]

baguss

[@jamharione7871]

sangat bermanfaat

[@gregoriuskamandanu6897]

pak izin tanya, di video sebelumnya yg clear bapak mengatakan bahwa lebih disarankan untuk clear menggunakan micro clearfix ketimbang membuat div kosong. nah itu kenapa ya? kalau saya sendiri kok lebih nyaman pakai div kosong karena lebih srek sama logikanya hehehe. apa berpengaruh sekali pak? terima kasih

[@ininamakokharusdijarak6815]

keren

[@fauzan5448]

Sebagai bayaran kampusnya,"nonton aja iklannya sampe habis"

[@muhammadalvie4780]

Thanks man!! it's working it's working!!!

[@fujidong9838]

terbaik

[@rafliqurtubi8618]

Sore pak dika izin tanya, kenapa di bagian side bar gk di kasih box sizing ya pak??niatnya kan mau dapet space kosong di tengah main&side bar 60 px, tapi di bagian side bar widthnya 300px dan padding 20px , jadi kalkulasinya main(600) +side bar (300+20)=920, space kosongnya jadi cuma 40px dong ya pak.bener gk itungannya begini pa dika?makasih

[@yupi6900]

Assalamualaikum pak sandika..Tambahin tutorial menu dropdownny pak sandika.. Terimakasi atas iLmuny..Semoga slalu diberikan kesehatan.. Amiinn ..

[@samsulr9]

Ka buat tutorial tentang website sederhana menggunakan CI dong 😀

[@joshkenji6405]

sangat membantu saya yang baru belajar (walau udah umur 42 hehehe).. saya mau tanya, waktu saya coba beri background color pada .sidebarnya terlihat box sidebarnya mengikuti isi paragraf, nah kalau saya mau box sidebarnya mengikuti tinggi box dari class main (atau sebaliknya, mana yang lebih tinggi heightnya) gimana ya? makasih sebelumnya

[@AndyDarwin_Kh]

Sama...saya jg memiliki pertanyaan yg sama.. sidebar ketika diberi background warna lain akan keliatan bergantungan..

[@mujahidinabdulfadly2027]

Pak mau bertanya, yang dibagian sidebar tentang penulis, pada saat float:right, kenapa gambarnya gak di sebelah kanan ujung pada div class = "sidebar" dan tulisannya gak dari kanan ke kiri pak..seperti contoh pada box model..terima kasih jika bersedia menjawab

[@hendrywijaya1017]

pak, saya ada masukan, kalau di HTML5, div header langsung dipake di tag header div main langsung pake tag main div sidebar langsung pake tag aside div footer pake footer yang copyright jan lup code "&copy" trus ada tag section, dialog, detail itu pak bbrp tag baru di HTML5

[@sandhikagalihWPU]

yap setuju, saat ini sudah banyak tag baru di HTML5... terimakasih! :)

[@hendrywijaya1017]

sama - sama pak

[@Fran-zf1mf]

Gampang2 susah...

[@iko1164]

Ass..wr..wb.. pak dika vidionya keren keren bgt dah saya ikutin semua Dan untuk vidio ini ga àda seri lanjutanya ya pak, dan kalo bisa tambahin dropdown menu berikut nampilin link nya pak

[@sandhikagalihWPU]

coba cek di playlist membuat website sederhana

[@akmaldzulfikar2236]

2021 hadir pak !

[@FookinMoza]

Suka lucu sama kata kata Lorem itu saya pak haha🤣

[@yolutobadi6820]

Kenapa tidak pakai inline-block untuk memsiahkan div

[@rizkisetyawan1994]

Pak Dhika misalkan di class footer di kasih properti clear: both; bisa jg kan ? Jd g perlu pke Micro clearfix lg

[@sandhikagalihWPU]

bisa

[@xchiixzzy8884]

work bg

[@iko1164]

Keren vidionya pak, Kalo misal ada 2 artikel atau lebih gmn nampilinnya pak, minta petunjuknya.👃👃👃👃

[@ilhamrahmadramadhan4155]

bismillah

[@zenifersanches3958]

Mkasih kk O iyaa kk minta part 3 dongk

[@suryadisamudra8097]

Mas mau nanya lagi, gimana caranya membuat order list di div yang sudah kita clear float? soalnya saya bikin list di side bar tapi disk nya gk muncul.. hanya tulisannya aja. thanks.

[@limbochannel6776]

sefu.. di tunggu video untuk pembahasan javascript dan PHP nya yah :)

[@sandhikagalihWPU]

Siap Jhonny.. sabar yaa... :)

[@araryaarkaanugraha3797]

Jhonny?

[@andidevrian]

very helpful.... :)

[@sandhikagalihWPU]

terimakasih Andi.. :)

[@alvinwillian7912]

Hallo pak kenapa ya code css saya tidak bisa dirubah nilai nya di seri kali ini padahal pas waktu pertama buat dibikin sama percis seperti yang bapa buat tolong bantuan nya pak

[@victorerwindionisius1300]

mas saya udah ikutin dan pakai clear fixnya...tapi kok footernya gak balik lagi kek bawah ya?....cman backgroundnya aja yang nutup lagi

[@alifnurrohman9940]

Dari awal Ampe css3 cuma ini materi yg gak masuk masuk ke otak.

[@bayulempo6419]

Mau tanya mas, Kenapa pas dicoba untuk sidbarnya sdah di kasih float dan clear masih di bawah. Sidbar Bukannya pindah ke kanan atas, tpi di kanan bawah ?

[@NotAGoodYtChannel]

Coba cek di class .main ada" float:left" nggak

[@yogaasfianto7238]

Gatel pgn nambahin text-align : justify pa :D

[@ngakakbarengyuk61]

Punya saya pada Tentang penulis dan image kenapa tetap dibawah ya? gak mau pindah kesamping..

[@muhammadbahrurrizqi6]

pak sandhika... aku pake vscode clearfixnya slalu ada error titik 2 (:) setelah zoom. Tapi aku coba nih di hp bisa, yg salah ini emg vscodenya?

[@bian1364]

pak Dhika, mohon izin bertanya, kenapa saat saya mengcopy cf ke dalam css saya tiba tiba ada notifikasi 1 problem yaa?padahal di bagian content sudah saya tambahkan cf

[@adisetiabudiman4544]

pak micro clearfix nya nggak kebaca di main udah ditambahin class cf. footernya jadi ke atas

[@fadhilansyah25]

pake display: flow-root aja gan

[@Juan-gl3nh]

@@fadhilansyah25 mksdnya gimana bro? Masalahnya sama nih, footernya naik, terus contentnya jadi nimpa footernya

[@pistachiocat]

@@Juan-gl3nh jangan lupa di htmlnya ditaroh cf nya di tag elemen mana, kalo saya ditaroh di div class=content jadi footernya ada di bawah

[@Juan-gl3nh]

@@pistachiocat oke bro

[@zelknu]

2:01 pak kenapa di bagian yang colom tidak dibuat div baru trus isi dari div tersebut dibuat 2 div yang mempunyai display inline-block

[@fahmirizasyahrani1720]

Untuk ukuran layout webnya, apakah ada ukuran2 standar baku yang digunakan mas? Atau tergantung kita saja yang ngatur sesuka hati? kalau seperti diataskan ukuran lebar keseluruhannya 960px. Nah ini mas sendiri yang ngatur ukurannya, atau memang ada ukuran standar web yang segitu? Terima kasih sebelumnya mas.

[@suryosujoko8890]

susah bedain position ama float...

[@sarohadamayanti599]

pak mau naya? vidio berapa yang ngbahas gisi konten home, about dll.,. mohon bantuan y pakkk

[@RohmadWibowo]

Itu aplikasi coding nya pake aplikasi apa ya? Saya biasanya cuma pake notepad++..

[@ichwansetyawan4194]

mas mau tanya dong kalau micro clearfix itu hanya digunakan satu kali atau bisa berulang kali namun dengan nama class yang berbeda?

[@LukmanHakim-rf8vv]

Sy sdh mengikuti videonya dari seri pertama (HTML Dasar) hingga seri ketiga ini. Sangat bermanfaat. Terima kasih atas ilmunya.. Pada video ini, ada yg ingin sy tanyakan. Sy mau tanya soal clear float pake cara ketiga, yaitu micro clearfix. Sy sudah copy kode micro clearfix dari website nicholas gallagher, terus dipaste di bagian akhir kode CSS pada code editor ku (Sublime Text 3), lalu menambahkan cf di class content (akhir kata content), TAPI koq kodenya tidak berfungsi ??? Terima kasih sebelumnya mas.

[@sandhikagalihWPU]

terimakasih juga Lukman sudah nonton videonya.. :) hmm, harusnya itu langsung berfungsi kok Man.. coba cek lagi nama classnya di content nya biasanya suka ada yang lupa masih pake .cf atau mungkin css nya belum di save ? :p

[@LukmanHakim-rf8vv]

sy tulis "content cf" tp kodenya ttp tdk berfungsi mas..

[@sandhikagalihWPU]

coba kamu copy-kan html dan css nya di codepen.io, lalu paste link nya kesini, nanti coba saya lihat.. :)

[@LukmanHakim-rf8vv]

Terima kasih sebelumnya mas.. codepen.io/anon/pen/vgXGoj?editors=1100#0

[@LukmanHakim-rf8vv]

Setelah kodenya sy paste ke codepen, image heronya jg jadi tidak muncul.. knp ya mas ??? trims..

[@muhammadrafii8751]

mau tanya dong, ada video untuk otomatis slide image gak? buat cover web gt..

[@sandhikagalihWPU]

belum ada untuk sekarang Rafi :)

[@claytonmildy5731]

ko sidebar saya sebelum dikasih float ada di bawah kiri tetapi sewaktu udah dikasih float:right; malah jadinya di bawah kanan, kenapa ya

[@muhammadikbal2295]

ijin mau nanya mas, kenapa ya setelah saya beri float right, gambarnya bukan diatas kanan, tapi dibawah kanan diatasnya footer

[@trisa_artika]

Saya juga sama mas, boleh tau udah bemu solusi ya?

[@ri_lnr9516]

Kenapa ya punya ku eror di bagian micro clearfix .cf{*zoom: 1;} Eror nya di bagian itu aja tuh, alhasil (copyright) nya ini nempel di "hero" nya. 😢

[@ri_lnr9516]

Jadinya aku bikin "div kosong" buat menampung "clear:" hehe..😅

[@kangefulofficial5878]

I downloaded the program but everytNice tutorialng still says trial version on it??

[@chungfeng4765]

Hey, i have a problem with the channel rack. Everyti I add an instrunt, for example the soft he added, it keeps loading for a long

[@sarimafitri8196]

mohon dibantu pak , dibagian img penulis itu kok saya disamping nya ada jarak gitu ya pak dgn tulisannya, padahal sya belum menambahkan padding, apa mungkin pengaruh gambar nya yg tidak sama sisi seperti bapak? saya persegi panjang pak soalnya

[@Menuof]

Saat sya templet kan clerfixnya gak bisa

[@nanangsa2357]

Mas, kalau mau isi misalkan diklik menu about trus muncul tulisan2 gimana y? Apa harus copy filenya trus diisi tulisan2 trus di link kan ke menu about? Masih belum paham kalau mau isi menu2 tersebut

[@khafidzmaulana3004]

Clear fixnya udh ga bsa lgi yaa?? Footer msh tetep di atas soalnya

[@akaneakwkwiwj]

sama gan

[@Pocoloco28]

Pak sandhi mau tanya pak.. itu yg dibawah komentar line 6 dst itu kalo gak ada gpp pak.? Terus pengaruhnya apa y pak.? Trimakasih 🙏🏽😁😁😁 Trimkasih untuk ilmunya pak sandhi barakallah 🙏🏽🙏🏽

[@yeningesott196]

Itu hanya buat tanda aja biar gak bingung klo pas terjadi eror website nya

[@irfanwidiantoro6564]

Pak ada satu kasus nih Ketika home saya ganti menjadi biodata Nah tiba tiba di brower itu bagian header judul mengecil sendiri pak Padahal saya cuma ganti html nya aja dan cuma itu aja pak..tp kok tiba tiba berantakan Dan saya hapus bagian header lalu saya ulangi lagi head ul li masih gk berubah pak..malah css nya ikut berantakan saat buka ke browser Padahal saya gk menyentuh css sama sekali pak? Bagaimana ya pak? Makasih pak sebelumnya

[@muratnonoe7736]

pak maaf mau tanya nih... gmn caranya membuat text menu,abaut,produck,servis, bisa ngelink ke halaman lain terima kasih

[@sandhikagalihWPU]

bisa menggunakan tag a, lalu href nya arahkan ke alamat yang dituju..

[@qhoha78]

RetroSun oh my god too let know when you figure it out

[@iqbalf8387]

Maaf Pak Sandhi, saya ikutin kok float di bagian sidebarnya gak naik ya malah mentok di kanan bawah 🙏🏻

[@rahmatprayogo]

Kenapa setelah punya saya diberi micro clearfix, element yang content yang diberi float tetap collapse?

[@dimasqiramadhani2262]

Belum ditambahin class cf mungkin bro di elemen contentnya

[@rianramadhan8094]

Micro clear fix udh gabisa pake aja div

[@dessha]

​@@rianramadhan8094udah ga bisa di pake emg bro? Gw bagian *zoom nya error gatau diapain

[@adytiaputraramadhany4440]

halo mas, kalo float itu dengan value bottom atau top gak bisa yah?

[@mohammadrizkiramadhan5032]

pa dika tutorial sass pake gulp dong

[@kierantrippier-m9o]

kok kode micro clearfix yang saya pakai error ya di style css nya? ada yang sama gk?

[@cubeid3695]

Mau nanya kenapa ya pas bikin sidebar malah di bawah main bukan di tempat seharusnya

[@kholidirfangi9346]

Kenapa punya saya tentang penulisnya berada di bawah ya ga di samping

[@sriedynurcahyo3894]

oya mas kalau fungsinya ease pada animation buat apa ya ?? dan adakah atribut selain ease ya ??

[@sandhikagalihWPU]

untuk mengatur kecepatan animasi.. cek aja di video transition di playlist CSS3

[@kholidirfangi9346]

Saya coba pake apk a code di hp tapi clearfixnya ko ga work ya.. Apakah emang harus pakai laptop/pc?

[@dediirwantosamosir9562]

Saya sudah buat inline block pada css tapi kenapa tidak ada perubahan pada tanpilannya..mohon bantuaanya

[@octavianrizkydwicahyo782]

Mas, sebelumnnya saya udah ngikuti tutorial yang pertama semuanya udah fix jadi, ini pas lagi mau ngikuti tutorial yg kedua lah mau ngerubah width pada container kok nggak pengaruh ya mas? Mohon solusinya mas. Makasih

[@sandhikagalihWPU]

bisa simpan html dan cssnya di codepen? biar bisa dilihat

[@bhadruentgaming3088]

mau nanya lagi mastah cara agar website yg kita buat itu bisa suport hp,, gak ngawur tampilannya ..saya mau pas di buka di web full dan pas di buka di hp cuman bagian kontainer yg ajj yg load stah?

[@sandhikagalihWPU]

itu pake teknik responsive website Dru.. coba kamu cek seri NGOBAR di channel ini.. :)

[@darmawirawan9758]

Ini part 1nya mana bang

[@syafikabduljabbar4304]

buat tutorial front end mas

[@ariafajarramdhany7979]

kan ini front end pak :D