CSS Layouting - #7 Box Model : Membuat Website Sederhana

Nah, sekarang saatnya kita membuat website sederhana pertama kita dengan menggunakan pemahaman yang sudah kita pelajari di seri ini..
---
🔥 Promo Unlimited Hosting Niagahoster (saat ini Hostinger) : diskon up to 50% + gratis domain + SSL 🔥
👍🏼 Gunakan kode kupon WPUNPAS untuk tambahan diskon up to 60%
👉🏼 Klik www.hostg.xyz/...
---
download slide:
www.slideshare....
---
download mockup / kerangka website
www.dropbox.co...
---
- Download gambar bebas pakai
unsplash.com/
- Nama warna CSS
www.w3schools.c...
- Download pattern / pola untuk background halaman
subtlepatterns....
---
- HTML Dasar
• HTML Dasar
- CSS Dasar
• CSS Dasar
- Tutorial Sublime Text
• Tutorial Sublime Text 3
---
🔥 SUPPORT WPU 🔥
👕 Beli Hoodie & T-Shirt di WPU Official Store 👕
shopee.co.id/w...
👾 Gabung Server Discord WPU 👾
/ discord
- Traktir Pa Dhika Kopi (OVO / GoPay / Dana / LinkAja)
saweria.co/san...
karyakarsa.com...
---
📢 FOLLOW SOCIAL MEDIA 📢
- / sandhikagalih
- tiktok.com/@sandhika.galih
- / sandhikagalih
- github.com/san...
terimakasih dan #janganlupatitikkoma!
@sandhikagalih

[@sekolahkampus]

2020 msh ada yg nonton? Mantap sekali, kalau googling belajar web selalu diarahkan ke channel ini.

[@Pipskiyy]

Saya masih nonton wkwk

[@sekolahkampus]

@@Pipskiyy Mantap

[@deua]

baru belajar soalnya tertarik ama teknologi informatika

[@zakyalfarisi9665]

satu server

[@RenalTutor]

Saya msih nonton juga, baru mulai malahan

[@mujtaba7194]

Alhamdulillah berkat bantuan bapak dosen, Saya jadi faham apa itu struktur html & css.. Semoga pak guru selalu sehat dan lancar terus rezekinya😊

[@nurulwahdatulsigma4265]

saya datng ditahun 2022 belajar pemograman ini dan bisa buat sama seperti yang bapak arahkan rasanya terharuu bangeettt😭😭 ( maap sedikit lebay ). terima kasih banyak pak ilmunya bakal saya pantengin semua video nya semoga dilancarkan terus rejekinya pak karna sdh mau berbagi ilmu 🥲🥲🥲

[@leung_rasta]

sama masih belajar di tahun 2022

[@storyprojects3685]

Sama

[@naim7317]

buat yang merasa navigatornya tidak sejajar dengan h1, itu karena ul memiliki nilai margin dan padding default. (entah kenapa bisa beda sama yang dibuat di video, mungkin memang ada pembaruan perilaku). solusinya tambahkan kode berikut di css kalian buat setting margin dan paddingnya ke 0: .header .ul{ margin: 0; padding: 0; }

[@justinejingga5323]

Makasih ya, ini bantu aku banget. Tapi setelah aku coba tetap gabisa. Di aku bisanya gini .header ul (Tidak pakai . di ul nya)

[@justinejingga5323]

😊

[@anggunpurnomo2397]

Terima kasih

[@alinkim8929]

Mantap sekali Pak, saya kuliah jurusan akuntansi jadi bisa bikin web hanya dari belajar di channel Bapak. Padahal kalau elearning berbayar ini harganya jutaan.. Terimakasih banyak

[@strptl7]

Mantap kim

[@raffiandika3965]

mantab mas tutuornya,, jelas audiionya + mudah di pahamin,,, buat lagi mas totorial web lainnya karena masih dikit chanel yang membahas web design yang videonya berkualitas seperti ini

[@ahmadgaraudi9076]

video ini sangat membantu banget, terutama buat saya yang masih awam dengan HTML, CSS, & PHP. video ini sangat untuk temen temen yang ingin belajar buat Website. terus berkarya mas sandhikagalih. dan kalo ada pertanyan boleh bertanya mas. ditunggu video selanjutnya....mas sandhikagalih.

[@dullls_752]

menurut saya sih bagus ni webshite walau cuma pake html css box model. saya ada saran bagi yang mugki sudah belajar atau sudah mengetahui tentang bootstrap mungking navigasi barnya bisa di ganti, tapi jika belum belajar bootstrap seperti ini saja sudah bagus. tambahan lagi mungkin bordernya di hero image itu bisa di buat memutar saja soalnya kalau cuma kanan kiri agak aneh dan kurang estetik. terimakasih kpd pak dosen yang sudah memberikan tutorial hingga vidio ini, ilmunya sangat bermanfaat dan semoga bisa menjadi amal jariyah _/\_

[@muhammadranda3695]

Makasih bnyk ilmunya pak yang awalnya saya buta ngoding sekarang udh mulai paham 🙏🏻🙏🏻 semoga jadi ladang pahala didunia dan akhat 😭

[@triwiyanto4471]

Mantap, keren banget. Tahun 2021 masih nonton full nih. Terima kasih ilmunya

[@fauziseptyansyah2074]

makasih pak galih, baru belajar beberapa minggu udah bisa buat web dasar gini, penjelasannya juga gampang banget di pahamin, keren abis deh buat pak galih

[@alwantangker3352]

mas dika vidomu sangat banyak meruba hidupku, aku mengikutinunya sejak tahun 2016

[@taufikromansyah2796]

nonton dan belajar di 2024 mudahan lancar😁

[@aldiriyanto8540]

Bagus banget nih channel cocok buat yang mau belajar pemograman web untuk pemula maupun yang udah mahir.

[@noveliaarum5820]

Apa saya doang yang heran ini video udh 4 thn lalu, terus di website ditulis 2020? Seolah-olah baru aja dibuat ini video:" Kebetulankah? Konspirasi macam apa ini?heuu..

[@nasyahniesyah1710]

Ngakak konspirasi😭

[@youngestbro1318]

akhirnyaaa jadi web sederhana pertama saya,terlihat mudah tapi pas praktek harus liat tutorial terus menerus haha asik seru banget,terima kasih pak galih!

[@gantz5358]

Kang sandy tolong bikin tutorial membuat Login Html dong :) ngomong ngomong, semoga sukses kedepannya Kang :)

[@sandhikagalihWPU]

boleh, nanti kita buatkan.. :) terimakasih ya..

[@bawidyantoro]

Alhamdulillah, akhirnya bisa buat website simple seperti tutorial. Seneng banget websitenya udah jadi. Semua penjelasannya mudah dimengerti dan alurnya jelas. Semangat terus buat semuanya.

[@akbarramadhan2954]

Kasih padding

[@SubhanHamid]

Mas, Ada gak ya tekniknya untuk mengetahui dengan cepat jika penutup html tag yang mana yg missing. Soalnya warna text paragrap saya berubah ke warna hijau, padahal sebelumnya warna grey, saya yakin ini karena saya lupa html closed tag, tapi gak tau posisinya dimana, soalnya element html nya banyak banget. Saya pakai Atom

[@sandhikagalihWPU]

cara gampangnya jangan tulis tag penutupnya secara manual.. biasakan menggunakan fasilitas kode editornya.. biasanya cukup tulis div lalu tekan tab..

[@raflysalim5815]

Makasi bgt Pak Sandhi, padahal cuma buat website sederhana, tapi senang rasanya. Semoga usaha belajar kita semua bisa membuahkan hasil ya.

[@rudiharyanto5376]

Akhirnya ngoding juga :D di tunggu upload selanjutnya kak.. oh iya itu konsep web page nya buatnya gimana kak? ada aplikasi khusus?

[@sandhikagalihWPU]

Itu pake software namanya Balsamic Mockups

[@dwirohmadi9870]

marathon selama 2 minggu dari HTML dasar sampai latihan ini, terimakasih pak dhika

[@idistrogadgetsby7096]

sama brohhhh

[@dwirohmadi9870]

@@idistrogadgetsby7096 ya walaupun saya belum punya laptop, jadi ngikut prakteknya pakai HP 😂😂

[@blabudick2984]

thank u, moga bermamfaat. aamin

[@muhammadfaizmaruf361]

Terima kasih banget ka galih, dengan channel2 ka galih saya jadi paham html, css, dan js. Saya pantau terus channelnya ka..semangat terus ka, semoga sukses🤲. Salam kenal faiz🙏🏻

[@abonsapi9101]

Pak Galih, next video bikin untuk tutorial laravel dasar dong hehe 👍 Terus berkarya pak, saya suka video2 bapak, sangat mudah dipahami setiap materinya.

[@rezkinadeak9722]

Sudah menikmak ini

[@deniandreas8927]

Mantep bgt ilmunya, stelah nonton ampe selesai lanjut nyoba bikin sendiri. Pengen review seberapa paham materi² sebelumnya juga ternyata masih ada bagian yg kesusahan, penulisan shorthand html masih sering salah (walau bisa manual), sama di bagian .hero kenapa gambarnya ga pas² ternyata pas direview lagi di materi background gaada background-size: cover; akhirnya nyontek wkwk Kelar hampir 4jam baru kelar hahaha tapi mantep bgt pak makasih ilmunya

[@faktulufi0213]

Bang.. saya mau tanya. Saya mengikuti tutorial Anda menggunakan Android. Ketika file HTML dan css nya sudah jadi.. untuk browser chrome tidak mau menampilkan gambar.. sedangkan untuk uc browser dan lainnya gambar nya bisa muncul. Apakah chrome saya yg bermasalah atau koding saya yg kurang? #mohon dijawab🙏

[@RaamNICETRY]

sadboy

[@sopimayang472]

alhamdulillah bisa selesai buat website sederhana walaupun masih dikit-dikit lihat di video berkah ilmu nya pak 🙏

[@AliJR-s1y]

mas kalu buat sidebarnya pakai property apa, tolong pencerahannya

[@sandhikagalihWPU]

cara bikin sidebarnya ada di latihan selanjutnya Ali.. cek videonya disni kzbin.info/www/bejne/mZrWYYJofMyIjKs

[@AliJR-s1y]

mas cara untuk membuat font resfonsif secara otomatis

[@dweisurya8432]

Tutorial nya sangat membantu sekali

[@muhamadabdulgani1706]

Web Programming UNPAS

[@luhurfatah4829]

keren bener ah.. dulu suka ngotak-atik css di blogger.. cuma ngga tau namanya apa.. cuma tau fungsinya :D thanks bgt setelah nonton jd tau

[@sandhikagalihWPU]

terimakasih juga ya Luhur! :)

[@basok2360]

.me { Wonderful: amazing; terimakasih; }

[@pirategaming1107]

Jangan lupa titik koma nya (;):v

[@jeremyfrando2782]

Belum ditutup hehehe

[@ezaparadise]

Muantapp.. luar biasa dengan pembelajarannya . sangat mudah untuk di cerna tiap kali pelajaran nya,, saya yang tadinya sudah mulai lupa jadi mengingat kembali.... semoga selalu diberikan sehat dan rezeki yang berlimpah agar selalu dapat memberikan ilmu yang bermanfaat buat teman-teman yang lain... aminn

[@raghibhabibi210]

2019 msh ada yg nonton?

[@nooms4385]

2020 nih

[@mrif45]

2020 dong wkwk

[@alfipratama5303]

hadir wkwkw

[@dedesaputra10]

Boleh mintage slide gak

[@MichaelLightStar]

Hadir hadir

[@aisyahofficial804]

Serasa ngampus lagi. Terima kasih ilmunya pak dosen Saya tontom berulang ulang dari sesi html. Dari nol sekarang Alhamdulillah sudah mulai merangkak 😬

[@aldimariosunandar1121]

2020 masih ada yg nonton

[@daffaraihansyahtjoen4671]

dari 2021 hadir

[@salmantechno]

Terima kasih Pak atas sharing ilmunya 🙏 Bermanfaat sekali Ayo belajar dan berkembang bersama SalmanTechno 💪👍

[@inoncahya473]

pak navigasi dengan ul, li saya kok gak seperti bapak? kl di video itu sejar kiri dg h1. kl di saya navigasi home masuk ke dalam spt ada jarak pd hal ga kasi margin dan padding? saya ulang2 videonya tetap ga nemu...

[@QueenDogado]

Request Pak Dozen. Tolong dibuatkan tutorial WEB portal berita pake Wordpress, plugin elementor, tema news magz seperti theme nya punya niaga hoster yang Detak Terkini, tampilannya bersih, bagus dan responsive dan tutorial WEB portal berita pake Blogger pake tema Magazine. Terima kasih banyak Pak Dosen atas atensinya. Salam sukses selalu berkelimpahan dan dahsyat untuk semua pemirsa setia channel pak dosen Unpas.

[@sasmokoginta2389]

saya baru belajar html, channel ini sangat membantu.. semoga ilmunya berkah bang.. terima kasih, salam dari Bolaang mongondow timur, sulawesi utara

[@sekolahkampus]

Channel UNPAS ini sejauh ini yang paling kumplit dan lengkap yang versi berbahasa Indonesia.

[@sasmokoginta2389]

@@sekolahkampus iya bang.. cara penjelasannya juga gampang dimengerti

[@innerpartymember187]

Mantap pak!! Saya jadi berasa bangga sama diri sendiri setelah berhasil.

[@agussawindra9920]

Trimakasi bang sandi. Saya belajar banyak. Btw saya belajar tutorial abang lewat hp android apk dcoder dan hasilnya bagus..trimaksi bang

[@HardyAr]

Mantaappp.. Alhamdulillah top deh di tahun 2023 masih belajar ngoding.

[@zuzuzuko3947]

3 tahun saya kuliah sistem informasi, baru kali bisa klik 😂. Terima kasih mas Ghalih 🙏

[@santrehNgoding]

Alhamdulillah.... Terima kasih Pak Dika... Sy sdh bisa menerapkan ilmu di video2 sebelumnya ke dalam website meskipun msh sederhana.. Rasa penasaran saya semakin tinggi tuk video2 selanjutnya.. Meski sy lulusan ilmu sosial.. Hehe

[@shine2027]

Alhamdullilah ,akhirnya pak bisa sampe sini belajarnya Setelah melawan kemalasan ,akhirnya bisa sampe membuat website sederhana dulu ,terimakasih pak semoga sehat selalu dan selalu memberi informasi berguna kedepannya.

[@IrwanIb]

ANJAYY GILA YE SERASA IKUT KURSUS PROFESIONAL TAPI GRATIS, MANTAP BRO GW JUGA SAMA NGELAWAN RASA MALAS DAN SAAT SETELAH SAMPE SINI GILA GW DPT ILMU BANYAK BGT TINGGAL SERING" NGODING AJA BIAR TAMBAH JAM TERBANG, MANTAP BRO SEMANGAT JUGAA!!!

[@habibcahya7226]

@@IrwanIb yk semangat yuk

[@Muhammadalif-tl7tw]

makasih bang berkat kamu tugas ku selesai semoga kamu sehat ya bang salam dari bekasi

[@fahryalimuhdy7925]

Penjelasannya sangat" jelas pak,,asik jg di tonton.. Jadi semangat buat belajar web programming... Sukses terus pak...

[@DageTv]

yaampun, dari dulu belajarnya bikin pake tabel yg disusun2 buat bikin kerangka, taunya ada cara yg gampang nya . makasih pak (y)

[@farhanasaraswati9280]

Terima kasih pak Sandhika, akhirnya berhasil bikin website sederhana. Ga sabar buat materi-materi selanjutnya!

[@watihendrawati5019]

Terima kasih mas buat ilmunya. Sangat bermanfaat, untuk menghargai itu saya tidak akan menskip iklan. Sukses selalu. GBU

[@dapratama76ers78]

Tak pernah aku latihan bikin web sambil melihat tutorial sepaham ini.. Luar biasa..

[@KamalMaulanaAdha]

sehat terus di saat pandemi ini 2020, di tunggu vode super lain nya, sukaa bngtt, izin menimba ilmu, thanks

[@natanaelafrines3821]

Sangat menarik pa dhika

[@yuto-_6353]

akhirnya jumpa guru yang benar, pelajarnnya benar2 paham

[@arduinojr]

Alhamdulillah, di tahun 2021 bisa belajar konsep membuat website

[@gilang6128]

saya terpukau, terhibur dan belajar banyak, seperti nonton sebuah show !!

[@yuartantomanbatam8453]

dari 4 th lalu...sd sekarang sering ulang ulang...semoga berkah ilmunya..terimakasih

[@GNBY]

Gimana caramasang emet di sublime text?

[@riodesign3596]

Permisi mau nanya kok di browser saya gambarnya tidak mau muncul ya padahal saya mengikuti cari di atas, Terima kasih🙏

[@nurkholiq4351]

terimakasih banyak pak ilmunya, semoga sehat selalu , syukurlah saya akhirnya mengerti cara pembuatan web dari 0 bagaimana

[@muhammadvickyanugerah6230]

terimakasih banyak pa dika atas ilmu yang bapak share pa, sehat selalu dan semangat selalu pak

[@harsonoharsono4950]

Mantap untuk pemula mah. Nuhun Kang Dika jazakuloh koiron kasiron. Semoga selalu diberkahi oleh Allah swt ya kang Dika

[@pradiptaramadhan3011]

Saya coba gunakan semua fungsi yg dari awal padika ajarin 🤙🙏makasih bnyak pak. Sangat berguna

[@wandiesyachfutra5817]

Pak Galih, saya menggunakan CSS Reset paling atas di style.css lalu menggunakan .header .judul font-size: 40px; dan font-weight: bold; tidak ada pengaruh apa-apa yaa baik text nya menjadi besar dan bold? tetapi setelah saya coba CSS reset di delete ada perubahan di text dan menjadi bold. mohon penjelasannya

[@hulaefisemangat3358]

2022 lah,mantep dah pokoknya smkin ksini,malah smkin dibutuhkan nanti,

[@NanangFirmansyah02]

Suka sekali cara penyampaiannya krn sangat muda di mengerti dan di pahami.

[@jackyhauofficial]

Simpel but bagus banget, cuman ngandelin css dasar sudah sebagus ini, salut pak 👍🙏

[@RahmadSetiaBudi]

jadi rindu masa2 kuliah, kalau nonton channel ini. sehat selalu pak

[@serbaserbibola13]

mantap kak terimakasih untuk tutorialnya. semoga sukses selalu dan selalu membuat konten yang bermanfaat

[@wargakuno]

sangattttttttttttttttttttttttttt bermanfaaaaattt,terima kasih ilmunya ,saya sangat suka ,walau saya masih kls 3smk,tp ini gampang di pahami,thanks bangtttt

[@sandhikagalihWPU]

Sama2 Dedy, terimakasih juga sudah nonton videonya.. :)

[@explorejambi]

karena tuntutan zaman dan revolusi industri. 4.0 mau tidak mau saya harus belajar dan saya sampai sini alhamdulilah faham.

[@pendatangbaru1167]

keren bener sampean pak!! 20 menit sambil jelasin bisa jadi satu halaman.. edan!! =))

[@sintiamey5762]

Bagus banget, dijelasin detail + pelan2 jadi paham😍.

[@victorerwindionisius1300]

makasih banget...walaupun cuman ngikutin...tapi seneng banget bisa bikin website simple bgni......

[@moch.haydar9127]

sama bang kayak bangga gitu

[@a7toki]

Akhirnya aku nemu konten yang pas untuk belajar web,thanks Kaka,terus berbagi ilmunya ya ka...

[@kagari21]

Belajarnya Mundur dulu ke belakang, biar css nya makin Paham. terima kasih buat tutorialnya pak, banyak yg belum saya tau di css layouting ini 😁👍

[@willisyahriyanti7799]

Mantap sekali tutorialnya...bisa nggak ajarin bikin website menampilkan produk handphone Seperti penjualan gitu

[@kakapilow9049]

Dosen termantap ter the best lah pokoknya, sukses & sehat selalu pak :D

[@bian1364]

Pak Dhika, maaf mau bertanya kenapa punya saya mulai dari judul artikel sampai dengan isi artikel sebelum copy right berada di dalam hero image yaa bukan di bawahnya?

[@izzuddinazzam6939]

keren pak, semoga bermanfaat bagi semua orang aamiin

[@ainsyahabdullah1572]

informasinya sngat lengkap dan mudah di mngerti . .

[@sandhikagalihWPU]

+Rehan Blacklist terimakasih rehan.. :)

[@ahmadzaki2500]

Saya lulusan sma, masih tekun dengan nonton wpu Terima kasih bapak ilmunya sangat2 membantu

[@Kepoooamaaaaaatttttt]

Bang makasih banyak bang ilmunya semoga rezekinya dilancarkan.

[@gasa2713]

Alhamdullilah bisa bikin website sederhana

[@Islamic_Rand0m1520]

terimakasih pak semoga sehat selalu ngoding hampir 4 jam padahal nyontek😄

[@fransiscoluk1847]

Mantap sekali pak.. Saya sangat terbantu untuk seorang pemula 🙏

[@muhammadachir1495]

.aku tambahin justify di tag p nya .content p{ margin-bottom: 20px; font-size: 14px; text-align: justify; }

[@t00nlegend51]

Ada yg tau knp pas saya tambahkan elemen pd style, seperti ini : .header ul li a { display: inline-block; background-color: salmon; margin: 10px; } di web ,display nya tidak berubah ke inline-block melainkan tetap block...?

[@arelist2817]

sama saya juga

[@muhammadibnuaffan4061]

gausah pake tag a nya coba bang, gua juga kek gitu cukup ul,li aja

[@alfipratama5303]

sekarang css sudah lebih maju,

[@alhafidz6655]

akhirnya bisa melihat secercah cahaya mengenai gambaran utuh semua syntax yang udah dijelasin, dari kemarin masih gelap gulita belum ada gambaran/bayangan sama sekali wkwkwkwk

[@faturrahman1993]

maaf mas tolong mitol di beri dropdown menu .... soalx dari semua turitorial cara menjelaskan anda yang paling aku sukai!!!!!!

[@bimaskristendobo4497]

keren, sangat inspiratif,, mohon di lanjutin pak, untuk child menu di dalamnya gimana, makasih sebelumnya.. terus berkarya buat anak bangsa..

[@abdillahputraal-iman1370]

meskipun videonya sdh 8 thn yg lalu tpi sy dan anda msh menonton video in :)

[@sebastiaopereira8365]

terima kasih mas,,, tutorialnya sangat membantu saya belajar sendiri di rumah.

[@haryzach2955]

Gw ngikutin persis syntax-nya sesuai di video, tapi malah beda² posisinya. li (home, products, dll.) malah menjorok ke dalam. Akhirnya gw ganti²in padding, margin, dll.. Apa emg udh beda versi sublime text-nya ya? Gw ngodingnya di tahun 2020.

[@laesiesi7376]

terima kasih pak dosen. saya telah menyelesaikan website pertama saya

[@sofyanekosanjoyo8091]

Terima kasihh banyaakkk ilmunya Pak Sandhika Galih....

[@timmyyt2381]

sehat selalu untuk bapak dan keluarga saya belajar banyak dari bapak terimakasih banyak ya pak😁

[@CHANNELYOTOQIU]

hader kk mantap sudah berbagi ilmu.

[@urbanusdohude6318]

Ijin tanya pak, cara memposisikan ditrngah halaman itu gimana ya pak? Posisi web saya pas diliat di browser, full body pak.

[@abdulharris8183]

mas sintaks css nya dong yang di video bagian sebelum /*style*/ itu kan gak nampak semua....untuk mengatur posisi rancangan tampilannya

[@mochamadrasyad338]

bang itu tuh pake css reset metode mayerweb.com bang....semoga membantu

[@zorrolegend7574]

Makasih banyak mas, tutornya sangat membantu, cara penyampaiannya enak, mudah difahami. Lanjutkan terus