Panduan Ukuran Layar Perangkat

Pada panduan membuat menu navbar responsive ini kita menggunakan pengaturan ukuran max-width: 768px. yakni ukuran untuk layar dari tablet sampai smartphone.

Berikut informasi tambahan tentang ukuran responsive perangkat menggunakan media query untuk berbagai ukuran lainnya.

Cara Membuat Website dengan HTML dan CSS

Sebelum kita membahas teknikal cara membuat website dengan html dan css, ada beberapa tools yang perlu Anda persiapkan terlebih dahulu seperti web browser dan text editor. Dalam tutorial ini kami menggunakan text editor notepad++ dan web browser chrome.

Anda bisa menggunakan tools apapun selain notepad++ dan chrome, dalam tutorial kali ini kami hanya akan membuat website html dan css yang sederhana saja. Kurang lebih tampilan websitenya jika sudah jadi adalah sebagai berikut:Dalam proses pembuatan website dengan html dan css, kami akan menggunakan Bootstrap. Bootstrap adalah perangkat sumber terbuka berupa struktur dasar dokumen html dan css. Dengan Bootstrap Anda akan dengan mudah membuat struktur website yang siap untuk dioptimalkan lebih lanjut.

Intinya dengan bantuan Bootstrap, Anda tidak perlu menerapkan cara membuat website dengan html dari awal. Menarik bukan dan menghemat waktu? Yuk kita langsung mulai membuat website sederhana dengan html dan css.

Membuat Navbar Responsive dengan HTML dan CSS

Untuk mengikuti panduan cara membuat navbar responsive dengan HTML dan CSS ini, silahkan teman-teman sediakan sebuah file HTML dan file CSS.

Siapkan file HTML tempat kita akan membuat navbar responsive.

Di sini saya menyiapkan 2 buah file, yaitu :

Mempersiapkan Lingkungan Kerja

Langkah pertama adalah mempersiapkan lingkungan kerja Anda. Anda membutuhkan teks editor yang memungkinkan Anda menulis dan mengedit kode HTML, CSS, dan JavaScript. Beberapa pilihan teks editor populer termasuk Visual Studio Code, Sublime Text, dan Atom. Pilihlah yang paling sesuai dengan preferensi Anda.

Membuat Event Click Pada Menu Navigasi

Langkah selanjutnya, kita akan menampilkan menu saat tombol navigasi diklik.

Agar tombol navigasi bisa menampilkan menu saat di klik, kita harus membuat event dengan javascript.

Kita akan membuat event click() pada tombol menu, script nya bisa kita tulis pada file index.html di atas tag .

Selamat Datang di Website Saya!

Ini adalah contoh halaman web.

Dalam contoh di atas, kita memiliki tag sebagai elemen utama. Di dalamnya, terdapat tag yang berisi informasi tentang halaman web, seperti judul halaman, file CSS eksternal, dan file JavaScript eksternal. Bagian utama dari halaman web ditempatkan di dalam tag .

Membuat Kerangka Navbar Dengan HTML

Yuk mari kita buat struktur kerangka HTML dan struktur menu navigasi atau navbar nya.