Langkah Mudah Membuat CSS Responsive, bagi anda yang sudah bergelut dengan website tentu tidak asing dengan CSS.
bagaimana cara untuk membuat CSS Responsive Web ? apa itu CSS ? apa itu Responsive.

Bagi anda yang baru saja ingin terjun menjadi creator web atau juga web developer, kalian wajib tau apaa itu CSS dan Responsive.
Kalian harus baca artikel ini sampai habis.

CSS ialah bahasa Cascading Style Sheet yang biasanya untuk mengatur tampilan elemen yang tertulis dalam bahasa markup,
seperti HTML.

CSS sendiri berfungsi untuk memisahkan konten dari tampilan visualnya di situs. Pencipta CSS adalah W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana.

Baca Juga : 5 Jurusan Kuliah yang banyak Dibutuhkan Tahun 2021 Mendatang!

Dalam pembahasan kali ini saya akan menjelaskan dan membuat css responsive web, css responsive image, css responsive typografy dan css responsive layout.

Langkah Membuat CSS

index.html

Sekarang kalian buka text editor kalian bisa menggunakan sublime, atom, dreamweaver atau visual code studio. Buatkan 1 folder baru dan buat file baru dengan nama indext.html, lalu tuliskan scrip berikut.

Script diatas merupakan tampilan dari responsive Websitenya. Jangan lupa untuk mengaitkan dengan file CSS berikut .

script tersebut untuk memanggil file CSS nya, agar tampilan bisa lebih menarik dan responsive.

Baca Juga : Cara Membuat Form Login PHP Dengan Mysqli Koneksi Database

stylesheet.css

Berikut ini kita membuat untuk style website diatas dengan membuat file baru dengan judul stylesheet.css dan berikut ini contoh scriptnya kalian bisa tulis untuk scriptnya.

Langkah Mudah Membuat CSS Responsive
Penampilan layar dekstop
Langkah Mudah Membuat CSS Responsive
Tampilan layar handphone

Dari gambar diatas gambar masih belum responsive dan text pun belum resopnsive bagaimana aga semua itu menjadi responsive. Baiklah kita lanjut ke tahap terakhir.

Baca Juga : Cara Mudah Menampilkan Data dari Database dengan PHP

responsive.css

Langkah terakhir yang kita lakukan yaitu buatkan file baru dengan nama responsive.css untuk membuat tampilan layar kita menjadi lebih responsiv
kalian bisa tulis script dibawah ini.

Setelah kalian tambahkan script diatas maka tampilan webnya akan menjadi seperti berikut.

tampilan responsive
tampilan responsive

Bagaimana terlihatkan untuk perbedaan nya, kalian sudah mencobanya? dengan mengatur CSS kita sendiri kita jadi mengetahui dan lebih dapat mengerti untuk penggunaan CSS.

Semoga kalian dapat mengerti cara membuat CSS Responsive. Selamat mengoding dan membaca Langkah Mudah Membuat CSS Responsive.


0 Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *