Belajar Web Design

Bagi kamu yang sedang mendalami Web Design, atau baru memulai belajar Web Design, berikut ini adalah referensi artikel untuk menambah wawasan dan latihan seputar HTML, CSS, jQuery dan Boostrap

1 Belajar HTML : Dasar HTML, Heading, Paragraf, Gambar, Link, List

Pada tutorial ini kalian akan mempelajari mengenai dasar-dasar dari HTML seperti bagaimana cara membuat heading, membuat paragraf, memasukkan gambar, menyematkan link, membuat List. Lanjut baca…

2. Belajar HTML : Membuat Table

Dalam dunia informasi, tentunya tabel sangat dibutuhkan untuk sajian dari kumpulan data-data. Jadi, pada sebuah website tabel juga sudah menjadi sebuah kebutuhan, mari kita pelajari bagaimana cara membuat tabel. Lanjut baca…

3. Belajar HTML : Membuat Form

Elemen HTML mendefinisikan formulir yang digunakan untuk mengumpulkan input data pengguna. Form HTML berisi beberapa elemen formulir seperti elemen input, bidang teks (field text), kotak centang, tombol radio, tombol kirim, dan banyak lagi. Lanjut baca…

4. Belajar HTML : Membuat Layout

Dalam situs, web sering menampilkan konten dalam banyak kolom (seperti majalah atau koran). Tiap kolomnya biasanya berisi informasi yang berbeda-beda. Kita juga dapat membuat layout dengan menggunakan CSS, lanjut baca…

5. Belajar HTML : Responsive Component

Web Responsive adalah desain tampilan web yang secara otomatis bisa berubah ukuran, menyembunyikan, mengecilkan, atau memperbesar, situs web, agar terlihat bagus di semua perangkat (desktop, tablet, dan smartphone). Disini kita akan mempelajari mengenai cara menambahkan elemen META, menambahkan properti width, menambahkan max properti, lanjut baca…

6. Belajar CSS : Color, Background dan Border

Pada umumnya CSS digunakan untuk memformat tampilan halaman web yang dibuat, biasanya dipakai untuk mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. Lanjut baca…

7. Belajar CSS : Margin dan Padding

Margin dan Padding adalah properti dari CSS yang digunakan untuk mengatur sisi tiap elemen pada HTML. Biasanya, kedua properti ini juga paling banyak digunakan dalam sebuah proyek website. Margin, berfungsi untuk mengatur jarak elemen HTML dari luar. Padding, berfungsi untuk mengatur jarak elemen HTML dari dalam. Lanjut baca…

8. Belajar CSS : Mengatur Style Text, Font dan Link

Pada tutorial ini kita akan mempelajari tentang beberapa perintah dari properti CSS, yaitu Text, Font dan Link. Ketiga properti ini adalah jenis properti dari CSS yang digunakan untuk mengatur tampilan-tampilan teks pada halaman website. Lanjut baca…

9. Belajar CSS : Membuat Navigation Bar

Dalam sebuah website, biasanya ada menu navigasi yang letaknya di atas bentuknya yang horizontal, dan ada yang di samping bentuknya vertikal. Pada tutorial kali ini, kita akan membuat Navigation Bar menggunakan HTML dan CSS. Lanjut baca…

10. Belajar CSS : Membuat Layout Website

Pada tutorial kali ini, kita akan membuat layout pada sebuah halaman website. Kita akan menggunakan CSS Eksternal. Karena selama ini kita menulis script kode css pada tag lebih tepatnya pada tag <style>. Dengan CSS eksternal, kita pisahkan script kode cssnya menjadi sebuah file tersendiri. Lanjut baca…

11. Belajar jQuery : Pengenalan jQuery dan Syntax Dasar

Jquery adalah library dari JavaScript yang cepat, kecil, dan kaya serta bisa disisipkan pada script kode HTML. JavaScript adalah bahasa pemograman dalam sebuah website yang digunakan agar website jadi lebih interaktif dan dinamis. Lanjut baca…

12. Belajar jQuery : Efek Hide dan Show

Pada tutorial kali ini kita akan mempelajari bagaimana cara membuat efek hide dan show dimana efek tersebut berfungsi untuk menghilangkan ataupun menampilkan bisa berupa sebuah text ataupun lain-lainnya saat kita mengklik tombol perintahnya. Lanjut baca…

13. Belajar jQuery : Efek Fade dan Slide

Efek Fade ini hampir sama dengan efek show dan hide pada tutorial sebelumnya yang pernah dibahas disini. Hanya saja tampilan efek fade ini lebih pelan daripada Hide dan Show. Efek slide adalah efek yang digunakan untuk memunculkan elemen HTML atau menghilangkan elemen HTML. Kemunculan serta kehilangan yang ditampilkan pada efek ini adalah bergerak dari atas ke bawah. Lanjut baca…

14. Belajar jQuery : Efek Animate

Pada seri tutorial JQuery kali ini, kita akan mempelajari efek animate. Apa itu efek animate??? Efek animate adalah salah satu efek dari JQuery yang memungkinkan suatu elemen HTML bergerak. Lanjut baca…

15. Belajar jQuery : Membuat Slideshow Banner dengan Plugin

Tentunya kita pernah melihat dalam sebuah website ada banner yang bisa bergerak ke kiri dan ke kanan atau sebaliknya. Dilengkapi dengan navigasi di kiri dan kanan sebagai penanda ke slide yang sebelumnya atau yang selanjutnya. Jadi itulah slider, maka dari itu pada tutorial ini kita akan membuat slider. Lanjut baca…

16. Pengenalan dan Instalasi Bootstrap

Bootstrap adalah sebuah framework yang dibuat untuk mempermudah dalam membuat tampilan sebuah website. Bootstrap ini bisa dibilang seperti template yang sudah jadi dan siap pakai hingga customnya. Jadi, dengan bantuan dari Bootstrap bisa menjadikan pembuatan website lebih efektif dan efisien. Bootstrap juga sangat responsive, jadi tampilan websitenya bisa berubah menyesuaikan ukuran perangkat apapun yaitu laptop, tablet, maupun smartphone. Lanjut baca…

17. Belajar Membuat Website Boostrap : Membuat Navbar 

Navbar merupakan kepanjangan dari Navigation Bar, artinya bar Navigasi dimana biasanya digunakan untuk menu navigasi utama dalam sebuah halaman website. Letaknya kebanyakan selalu paling atas, isinya menu yang memberikan informasi tertentu kepada pengunjung website. Mari kita pelajari bagaimana cara membuat navbar, pertama kita bisa buatkan file HTML, lalu kita masukkan script pendukung Bootstrap pada file HTML tersebut. Lanjut baca…

18. Belajar Membuat Website Boostrap : Membuat Slideshow dan Section 

Sahabat Webhozz dimanapun berada, pada kesempatan kali ini kita akan belajar langsung untuk membuat sebuah halaman website. Tentunya kita juga menggunakan Bootstrap. Seperti pada postingan sebelumnya, kita membutuhkan instalasi Bootstrapnya terlebih dahulu. Instalasi tersebut, bisa dikunjungi pada link berikut (https://www.webhozz.com/blog/belajar-web-design-mengenal-bootstrap/). Kita juga akan menambahkan menu navbar, seperti postingan sebelumnya (https://www.webhozz.com/blog/membuat-navbar-bootstrap/). Lanjut baca…

19. Membuat Contact Form Menggunakan Bootstrap

Pada kesempatan kali ini, kita akan membuat sebuah contact form menggunakan Bootstrap. Tentunya kita pasti pernah mengunjungi sebuah halaman Website, ada halaman khusus. Yang mana halaman tersebut menyediakan form untuk diisi. Biasanya form tersebut berisi info tentang nama, email, bahkan pesan maupun kritik dan saran. Maka dari itu kita membutuhkan beberapa komponen pendukung dari Bootstrap. Lanjut Baca…

20. Belajar Web Design : Membuat List Produk menggunakan Bootstrap

Pada kesempatan kali ini, kita akan membuat list produk menggunakan produk menggunakan Bootstrap. Tentunya kita pernah mengunjungi toko-toko online, kita selalu melihat daftar dari produk-produk yang dijual di toko online tersebut. Disitu biasanya terdapat informasi tentang nama produknya, foto produknya, sampai harga dan lain sebagainya. Tujuannya, supaya kita dapat mengetahui informasi tentang produk yang kita cari lalu selanjutnya apakah produk tersebut meiliki spesifikasi yang sesuai kebutuhan kita atau tidak. Nah, jika sesuai kita beli jika tidak berarti kita akan mencari produk lainnya. Pada postingan artikel ini, kita akan membuat daftar produk tersebut. Lanjut Baca…