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

Mari kita lanjutkan latihan kita membuat website sederhana, kali ini dengan menambahkan konsep float pada halaman kita.

Let's Code!! Mari Ngoding!!!!

---

Ikuti Playlistnya dari awal:

download slide:

---

CSS Micro Clearfix

---

download mockup / kerangka website (update)

---

- HTML Dasar

- CSS Dasar

- Tutorial Sublime Text

---

follow juga akun media sosial kita yang lain :

terimakasih dan selamat #ngoding!

@sandhikagalih

[fahmirizasyahrani]

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

[irfannovendi]

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

[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 </div>
yang seharusnya terletak diatas sidebar

[yurichandra]

Terimakasih mas Sandhika atas tutorialnya. Keep it up mas!

[jarangtidur]

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

[sofyanekosanjoyo]

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

[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

[ainsyahabdullah]

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

[alvinrochafi]

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 ?

[NoName-pyun]

Terimakasih ilmunya, sangat bermanfaat

[JejeBante]

Buat yang micro clearfix nya gk bisa coba class yang content itu gabungin sama cf jadi kaya gini:

class="content cf"

Kalo salah koreksi ya😅

[williamphilip]

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

[Juliaftr]

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

[fadhilansyah]

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

[iko]

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

[hendrywijaya]

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

[qraainii]

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

[mujahidinabdulfadly]

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

[refdinalal]

buat yang 2021 gw recomanded pake visual studio code.