Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas.

Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ?

Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing.

Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya.

Cara memperbaiki jika terjadi error atau kesalahan penulidan pada desain website dalam hal ini styles.css, maka tidak akan pesan error seperti halnya php, tetapi website kita akan memiliki desain yang hancur atau tidak ada perubahan dalam desain website yang kita buat. Ini sudah sering sangat saya alami saat mendesain web dan selalu solved alias teratasi dengan cara undo atau melihat tanda ; atau } yang tertinggal.

Sekarang coba kita praktekkan bagaimana cara membuat website responsive. Perlu di ingat, Cara menghapal koding dengan mudah adalah anda harus nyoba atau peraktek sendiri dan jangan copy paste karena hal itu bisa mengakibatkan anda susah menghapal kodingnya.

Setalah kita mempelajari cara membuat website responsive di css kemaren Cara Membuat Website di localhost dengan html php. Sekarang kita akan mempelajari bagaimana cara menyesuaikan desain dengan layar yang mengakses website kita dalam kata lain Website Responsive atau Responsive Website. Hal yang perlu di perhatikan dalam toturial cara membuat website responsive ini anda harus mengerti koding css untuk global kemaren.

Apa itu css global ?

Karena css kemaren tidak ada spesifikasi layar yang ditujukan. Maka dapat kita katakan css kemaren adalah css global. Sekarang bagaimana caranya membuat css khusus atau Website Responsive ?
Sekarang coba kawan logikan script berikut ?

Responsif konsep

@media (max-width: 480px){


}

Apakah kawan sudah pasti mengerti maksud dari script di atas ?
Maksud dari script di atas adalah @media (max-width: 480) maka Media / layar yang lebarnya paling besar 480 pixel. Artinya script yang ada di dalam @media (max-width: 480px) hanya berfungsi jika layar tidak lebih dari 480px biasanya layar 480px ini ponsel yang berukuran 4 inchi.

Nah jika sudah mengerti bagaimana cara membuat website responsive. Jika belum mengerti coba simak contoh dibawah ini.

Perhatikan jika seandainya layar yang mengakses website anda berukuran 480 px maka yang digunakan css global akan seperti ini :

Sekarang kita modifikasi sedikit script css global khusus untuk layar ukuran 480px. “Merubah website menjadi Responsive Website”. Dan perlu anda ingat nama classnya harus sama dengan yang ada di css global.

Tempatkan script sidebar di bawah ini kedalam @media tadi :

Responsif konsep

.sidebar {
width: 100%; /* kawan bisa mengganti dengan pixel atau % persen :) */
float: none;
padding: 15px;
background-color: #ddd;
}

Perlu anda ingat, bahwa script di dalam @media ini disesuaikan yang mana yang akan diubah, bisa juga menambah fungsi class dan jika ingin menghapus fungsi misal padding anda harus menulis padding : 0; anda tidak bisa hanya menghapus scriptnya dengan mengilangkannya saja. Fungsi dari script website responsive hanya mengganti fungsi dari css global.
Nah berikutnya kita ubah lagi class contentnya kawan lebih menarik :

Responsif konsep

.content {
width: 100%;
float: none;
background-color: #fff;
padding: 15px;
}

Maka script akhirnya harus kaya gini ya gan, dan tempatkan paling bawah dari css global.

Responsif konsep

@media (max-width: 480px){
.sidebar {
width: 100%; /* kawan bisa mengganti dengan pixel atau % persen :) */
float: none;
padding: 15px;
background-color: #ddd;
}
.content {
width: 100%;
float: none;
background-color: #fff;
padding: 15px;
}
}

Sekarang coba mulai kembali halaman website localhost/study-newbie. Dan penampakan akhirnya harusnya sih akan seperti ini :

Script di atas adalah sebagai contoh buat anda yang ingin belajar membuat website responsif. Selanjutnya silahkan anda memodifikasi script css diatas untuk website anda. Kalau seumpamanya ada masalah silahkan berikan komentar dan kita bahas disini. Biasanya saya menggunakan max-widthnya 1200px, 992px, 768px, 420px

Ingat, urutannya untuk max-width dari yang paling besar ke paling kecil, untuk min-width urutannya dari yang paling kecil ke paling besar.
Kawan bisa membaca artikel selanjutnya Belajar PHP - Membuat Website Jejaring Sosial.

Sekian Tutorial Web tentang Belajar Web - Membuat Website Responsive CSS, jangan lupa Bookmarks dengan cara Ctrl + D website kami. Dapatkan Tutorial Web lainnya diwebsite ini. Jika anda kesulitan dengan tutorial diatas anda bisa berkomentar dibawah ini saya sangat senang jika bisa membantu kawan-kawan. Sekian dan Terima Kasih.