Membuat Tabel Harga Produk dengan CSS

Assalamualaikum Wr. Wb.

Man-teman dimanapun berada, semoga selalu dalam keadaan sehat dan bahagia selalu ya, Amin.
Nah, pada kesempatan kali ini kita akan mempelajari tentang Membuat Tabel Harga Produk dengan menggunakan CSS.

Tentunya kita pernah melihat dalam sebuah website yang menyediakan produk maupun jasa. Biasanya disitu ada berbagai jenis paket beserta harga hingga keunggulan masing-masing paket.
Tampilannya berbentuk seperti tabel. Sebagai contoh ada beberapa website yang menyediakan produk hosting beserta domain.

Nah, sebagai bahan pelajaran kita kali ini. Kita akan menghayal seolah-olah kita membuat tampilan website untuk kebutuhan hosting dan domain tersebut.

Oke, kita langsung aja ya codingnya.

Continue reading

Membuat Thumbnail Post Sederhana Dengan HTML dan CSS

Membuat Thumbnail Post Sederhana dengan HTML dan CSS

Assalamualaikum Wr. Wb.

Teman-teman Webhozz dimanapun berada, gimana kabarnya nih???

Mudah-mudahan sehat dan bahagia selalu ya, amin…

Nah, pada kesempatan kali ini kita akan belajar membuat thumbnail post sederhana.

Sebelumnya, thumbnail post itu apa sih???

Oke, jadi teman-teman tentu aja pernah baca artikel di sebuah situs website.

Yang mana artikel itu biasanya berisi tentang tutorial maupun berita.

Continue reading

Membuat Efek Perubahan Warna Transisi Pada CSS

Assalamualaikum Wr. Wb.

Sahabat Webhozz dimanapun berada, gimana kabarnya nih???

Semoga sehat selalu dan bahagia ya, amin.

Nah, kali ini kita akan belajar mengenai Transisi pada CSS.

Transisi itu apa sih?

Transisi itu adalah perubahan objek. Misalkan saat kita arahkan mouse ke suatu elemen di web, maka akan ada perubahan warna. Bukan hanya warna aja, bahkan ada perubahan ukuran dari elemen itu juga.

Continue reading

Membuat Tabel Motif Zebra Dengan CSS

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.

Pada kesempatan kali ini kita akan belajar tentang table zebra. Kenapa disebut Zebra???

Hal ini dikarenakan warna backround tiap baris pada tabel memiliki corak warna selang seling. Maka dari itu disebut dengan Tabel Zebra.

Oke, langsung aja ya kita mulai. Continue reading

Membuat Full Page Background Website dengan HTML dan CSS

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin. To the point aja, ya…

Alhamdulillah kali ini kita akan belajar membuat background website full satu halaman. Jadi, di halaman website yang kita buat akan penuh dengan gambar di latar belakangnya.

Oke, langsung aja kita mulai ya…

1. Buat file HTML baru, dan siapkan satu buah gambar. Sangat disarankan gambarnya dengan format landscape. Karena mengikuti format web browsernya. Continue reading

Membuat Menu Navigasi Vertikal Sederhana

Assalamualaikum Wr. Wb.

Sahabat Webhozz dimanapun berada, kali ini kita akan bahas sedikit mengenai dasar dalam CSS. Disini kita akan membuat menu navigasi sederhana. Sebuah web tentunya pasti punya menu navigasi, yang memiliki kesan akan konten apa saja yang dimuat dalam sebuah web. Biasanya masing-masing konten tersebut bisa memberikan pesan informasi juga kepada pengunjung web, hingga mudah untuk dimengerti oleh pengunjung web.

Pada kesempatan kali ini, kita akan membuat menu navigasi vertikal. Yang mana navigasi ini berisi menu pilihan yang berada di samping dalam sebuah halaman website. Oke, langsung aja kita persiapan untuk memulai. Continue reading

Cara Menambahkan Font Ke CSS

Assalamualaikum Wr.Wb.

Sahabat Webhozz, gimana kabarnya nih??? Seperti biasa, semoga sehat selalu ya…Amin.

Oke, pada kesempatan kali ini. Kita akan belajar gimana caranya memasukkan font eksternal ke dalam file css.

Seperti biasanya kalo dalam dunia web design, kita memerlukan berbagai macam font untuk mendukung pesan dari tampilan sebuah website.
Dan masing-masing font juga memiliki kesan yang berbeda.

Dalam css ada perintah yang biasanya kita pake yaitu “font-family:nama_font;”.

Akan tetapi, secara default jumlah font yang ada dalam sistem komputernya kita sangatlah terbatas.

Kita perlu tambahan font lagi, supaya web yang kita menjadi lebih menarik dan unik. Bener kan???

Di internet, kita bisa dapatkan font tambahan tersebut dan tinggal download aja. Tinggal cara pasangnya aja. Continue reading