Cara Membuat Website Pertama dengan HTML dan CSS

Membuat website pertama adalah momen yang menggembirakan bagi setiap calon web developer. Dalam tutorial ini, kamu akan belajar membuat halaman website sederhana menggunakan HTML dan CSS. Tidak perlu pengalaman sebelumnya, cukup ikuti langkah-langkahnya satu per satu.

Persiapan

Sebelum memulai, kamu membutuhkan dua tools. Yang pertama adalah text editor untuk menulis kode. VS Code adalah pilihan terbaik karena gratis dan memiliki banyak fitur berguna. Yang kedua adalah browser untuk melihat hasilnya. Chrome atau Firefox sudah lebih dari cukup untuk kebutuhan ini.

Setelah menginstal VS Code, buat folder baru di komputer kamu dan beri nama website-pertama. Di dalam folder tersebut, buat file baru bernama index.html. Ini akan menjadi halaman utama website kamu yang pertama.

Struktur HTML Dasar

Buka file index.html di VS Code dan tulis kode HTML dasar. Mulailah dengan deklarasi DOCTYPE diikuti tag html sebagai elemen root. Di dalam tag html, buat bagian head yang berisi metadata seperti charset, viewport, dan judul halaman. Jangan lupa hubungkan file CSS eksternal menggunakan tag link.

Setelah bagian head, buat bagian body yang berisi konten utama. Gunakan elemen semantic HTML seperti header untuk bagian atas, nav untuk navigasi, main untuk konten utama, section untuk setiap bagian konten, dan footer untuk bagian bawah halaman.

Untuk kontennya, tambahkan heading utama dengan namamu, beberapa section seperti Tentang Saya yang berisi paragraf singkat tentang dirimu, Hobi yang berisi daftar menggunakan tag ul dan li, serta bagian Kontak yang berisi email dan link media sosial.

Menambahkan CSS

Sekarang buat file baru bernama style.css di folder yang sama. File ini akan berisi semua style untuk mempercantik tampilan website. Mulai dengan reset dasar untuk mengatur margin dan padding ke nol pada semua elemen menggunakan selector universal.

Atur font family default ke sans-serif agar teks terlihat bersih dan modern. Atur line-height ke 1.6 untuk keterbacaan yang baik. Buat container utama dengan max-width tertentu dan center menggunakan margin auto.

Untuk bagian header, atur text-align ke center dan tambahkan padding agar tidak terlalu rapat. Untuk navigasi, buat link dengan warna yang menarik dan efek hover yang halus. Untuk setiap section, tambahkan padding dan border-bottom sebagai pemisah antar bagian.

Melihat Hasilnya

Buka file index.html di browser dengan cara double-click file tersebut atau drag ke browser. Kamu akan melihat website sederhana dengan navigasi, bagian tentang, hobi, dan kontak. Cobalah berbagai perubahan di CSS dan refresh browser untuk melihat hasilnya.

Coba klik link navigasi di bagian atas. Kamu akan diarahkan ke bagian yang sesuai di halaman yang sama. Ini karena kita menggunakan anchor link dengan tanda pagar di depan nama id section yang dituju.

Mengembangkan Lebih Lanjut

Sekarang kamu sudah memiliki website pertama yang berfungsi. Kamu bisa mengembangkannya lebih lanjut dengan menambahkan foto profil menggunakan tag img, mengubah warna dan font di CSS, atau menambahkan halaman baru seperti blog atau portofolio.

Cobalah bereksperimen dengan berbagai property CSS. Ubah warna background, coba font yang berbeda, atau tambahkan border dan shadow pada elemen. Semakin banyak kamu bereksperimen, semakin cepat kamu menguasai CSS dan memahami cara kerja styling.

Setelah website ini selesai, cobalah challenge baru seperti membuat halaman product landing page, portfolio pribadi, atau blog sederhana. Setiap project baru akan mengajarkanmu sesuatu yang berbeda dan meningkatkan skill web development kamu secara bertahap. Website pertama ini adalah langkah awal yang penting dalam perjalananmu menjadi web developer.