Membuat Desain Web Simple dan Menu Dropdown Keren

Assalamu'alaikum Wr. Wb.

Apa kabar semuanya ? Semoga baik-baik saja. Di blog yang baru ini saya akan mengawali berbagi ilmu pemrograman tentang Web Desain. Sebelum kita masuk ke coding back-end nya, kita buat terlebih dahulu tampilan / front-end nya.

Di tutorial pertama ini, saya mencoba membuat suatu desain web yang simple dengan menu dropdown yang keren. Ini screenshotnya :


Gimana, lumayan keren kan ? Script nya juga sedikit, makanya simple :D

Video tutorialnya bisa dilihat dibawah, tetapi jika tampilannya kurang jelas, setting dulu kualitasnya pilih yang HD. Ok langsung saja kita lihat tutorialnya dibawah :



Semoga bermanfaat, apabila ada yang kurang jelas silahkan tinggalkan komentar. Happy Coding :)

Baca tutorial sebelumnyaPerkenalan Dengan PHP

Baca tutorial selanjutnya : Membuat Tampilan Halaman Login Keren

Wassalamu'alaikum Wr. Wb.
Membuat Desain Web Simple dan Menu Dropdown Keren
Item Reviewed: Membuat Desain Web Simple dan Menu Dropdown Keren 9 out of 10 based on 10 ratings. 9 user reviews.

saya pemula yang sedang belajar php... salam kenal...

ok salam kenal juga gan, selamat belajar :thumbup

gann ko gak bisa logout yyah ? mohon bantuannya

Udah ada logout nya belum ?
Lihat source code mu

kok punya saya footer nya di tengah tolog di beritahu masalahnya

Sudah saya praktekan dan alhamdullah berhasil dengan sempurna.
Terima kasih atas tutorialnya....salam kenal
from Kebumen

Alhamdulillah :)
Sama2, salam kenal juga gan dari Pati :D

salam kenal.
gw mau belajar dari sini juga ya. soalnya belajar dikampus berkali kali, tapi masih ga berkembang skilnya.

Salam kenal juga gan.

Silahkan gan, semoga bermanfaat :)

Semoga ALLAH SWT yg balas atas niat baik admin yg dgn ikhlas berbagi ilmu ke org banyak,semoga jadi ilmu yg beguna dan bermanfaat bagi org lain...aamin

Amin Ya Robbal 'Alamin :)
Terimakasih gan :2thumbup

mantap gan, thanks sudah share ilmunya.. semoga jadi amal jariyah sampeyan..

Sama2 gan :)
Amin, thanks do'a dan kunjungannya :2thumbup

Gan, saya mau tanya.
Kan di tutorial ini dropdown akan ditampilkan saat kursor di arahkan. Kalo ingin dripsown ditampilkan saat mouse klik kiri cara nya gimana ya gan? Saya sudah coba, hover diganti dengan active, tetapi hasilnya tidak sesuai yg diinginkan?

Tutornya sangat bagus dan sangat bermanfaat gan. Saya sangat belajar dari tutor yang agan buat. Terima Kasih

Gan, saya mau tanya.
Kan di tutorial ini dropdown akan ditampilkan saat kursor di arahkan. Kalo ingin dripsown ditampilkan saat mouse klik kiri cara nya gimana ya gan? Saya sudah coba, hover diganti dengan active, tetapi hasilnya tidak sesuai yg diinginkan?

Tutornya sangat bagus dan sangat bermanfaat gan. Saya sangat belajar dari tutor yang agan buat. Terima Kasih

Kalo pingin dengan action click berarti bukan lagi pake' css saja bang, melainkan pake jQuery juga. Silahkan pelajari jQuery.

Alhamdulillah, terimakasih :)

Mantapp mas, blognya bermanfaat banget bagi newbie seperti saya :D
Thanks sharingnya :D


Visit juga http://www.dumube.com/

Thanks.
Y're welcome :)

Komentar ini telah dihapus oleh pengarang.

Gan boleh minta emailnya untuk tanya tanya?

kalau tidak ini ada email saya gan yudarizki.82@yahoo.co.id

soalnya saya mau lomba web gan,agar bisa lebih belajar lagi

Ditengah gimana gan ?
Kalo ingin konsultasi bisa via fb gan : https://fb.com/yukcoding

Ngobrol disini saja https://www.facebook.com/yukcoding

Ngobrol lewat sini saja https://www.facebook.com/yukcoding

masih bingung php, html, dll itu namanya bahasa pemrograman ya min? hehe. pemula.

Iya. Lebih baik belajarnya bertahap saja. Pertama pelajari tengang HTML kemudian CSS baru PHP dan MySQL. Belajar enak untuk pemula disini w3schools.com dan yukcoding.blogspot.com :)

sangat membantu gan buat yang baru belajar :D thanks buat share ilmu nya :D
:thumbup

Alhamdulillah :)
Sama2 bang
:2thumbup

Ka maaf mau tanya nih, saya sudah membuat source kode upload file sesuai dengan yg ada di youtube yukcoding, tapi saya gagal terus untuk menguploadnya. mohon tanggapannya ka.
terima kasih.

Ada yang salah script-mu gan. Silahkan ngobrol disini saja https://fb.com/yukcoding :)

terima kasih banyak untuk ilmunya... sepertinya saya yang pemula ini lebih mudah memahami penjelasan Agan

Sama2 gan. Alhamdulillah :)

Makasih banyak min ilmunya, tapi lainkali kalo mau coding lagi pake Sublime Teks yaa,,.. soalnya lebih mudah dan lebh enak gituu... soalnya ane udah ketergantungan pake sublime min... :D

Sama2.
Itu kan sudah pake Sublime Text gan.

Download paket savefrom aja gan

videonya gak bisA DIDOWNLOAD

Coba pake savefrom.net aja gan

kok pas ngetik hover gak ijo ya min..jadi pas di run gak bisa menu hover

Cek lagi css hover-nya mas

Mas mau nanya donk gimana cara buat slider dan tambahin picture di halaman itu?

mas kalo aku mau bikin supaya header,menu dan footer nya fix.
jadi isi nya walaupun banyak header menu dan footer nya tetep.
gmn css nya ya?

Pingin pake coding manual atau pake framework css (semisal bootstrap) ?

Coba css header-nya tambahkan position:fixed; top:0px;

mas yg bikin ful 1 layar di css nya di bagian mana ya?
karena ketika di layar 21 inch tampilannya cuma setengah

mas punten sebelumnya, kira2 masnya ada ngeshare kodingan yang mas buat di tutorial ini ?

mas untuk membuat database , db nya ko ga bisa ya ,
masih pemula

Ada, source code hasil tutorial akhir. Tapi ada ketentuannya. Silakan inbox di fb.com/yukcoding

Alhamdulillah belajar di yukcoding perlahan-lahan mulai mengerti apa itu coding

keren kang tutorialnya.. saya ngikutin dari awal sangat bermanfaat (Y)

sy mau belajar juga mas, masih baru..

haturnuhun ka ilmunya.. moga berkah ka..

mas ko hover punya saya nga jalan

Coba di cek lagi CSS nya, disesuaikan dengan tutorial :)

Mantapz /.... Trus Sofwarex Download dimana gan yang gratis ???

Thanks. Software apa gan?

Komentar ini telah dihapus oleh administrator blog.
Komentar ini telah dihapus oleh administrator blog.
Komentar ini telah dihapus oleh administrator blog.

gan sory ni mau nanya untuk aplikasi yang digunakan apa cuman XAMPP dan sublime text? karena di laptop ane code terkait mysql gak bekerja dengan baik

Iya. Kalo ada yg error googling errornya, atau bisa instal ulang web server nya


min, untuk cara manual di SQL, bisa di jelasin ?
karena yang di video kan dari database nya langsung...
pengen tau cara manual pembuatanya lewat SQL

Assalamu'alaikum Mas Nur,.. kalau semisal setiap tutorial dikasih scriptnya gimana jadi bukan hanya video scriptnya dalam bentuk image.jpg gpp tar kami yang ketik sendiri, terimakasih Wassalamu'alaikum...

Iya jadi bentuknya image saja jangan yang bisa di copas biar semua mengetik dah tahu maksud dari script2nya,...

Wa'alaikumsalam wr. wb.
Thanks masukannya bang, mungkin bisa kami tambahkan untuk tutorial2 selanjutnya.

assalaualaikum, nak tanya kenapa kotak menunya ikut sekali bergerak ketika keluar sub menu

gan ma tanya ini tampilan awal ko setelah diedit pake assets itu bar nya jadi diatas ya gak disamping ? mohon pencerahan gan

Anonim : Wa'alaikumsalam. Maksudnya bagaimana? Jika ada kendala bisa diskusi di grup telegram https://t.me/yukcodingid

zzz : Maksudnya bagaimana? Jika ada kendala bisa diskusi di grup telegram https://t.me/yukcodingid

kak,om,eyang,abah mau nanya klo ngecoding nya di notepad++ bisa gk?mohon bantuan nya..plis

Bisa, itu kan cuma text editor

gan ga ada koding tex ya.???
cuam video doang

Saya input edit delete sudah lumayan bisa..tp stok in dan stok out masih bingung..hihi

Kalo udah ada examp nya di laptop gimana gan?

baru dapat jaringan akhirnya bisa liat webnya . terima kasih telah membagikan hal seperti ini

Salam bang,izin bertanya,klo setelah buat database di php my admin lalu ketika mencoba buka webnya ternyata tertulis object not found, kenapa bang ya,mungkin bisa dijelaskan solusinya...

salam kenal bg. izin min ada gak tutorial versi e-book?

Bang kenapa punya saya dibagian menunya displaynya ga nampilin satu² malah udh ada dimenu utama

Juragan Jenius...Lanjutkeun karyanya...., Toop

Emoticon? nyengir

Berkomentarlah dengan bahasa yang relevan dan sopan.. #ThinkHIGH! ^_^

Info

Agar tidak ketinggalan update menarik :

Follow instagram @yukcoding
Subscribe youtube YukCoding Media

Happy coding :)
Just load it!