Pengantar

  • 5 menit

Sungguh mengesankan dengan apa yang dapat Anda lakukan di web hari ini. Anda dapat membangun pengalaman web yang berjalan di semua perangkat, menyertakan semua jenis konten media, dan melakukan komputasi yang rumit. Anda bahkan dapat membuat aplikasi yang terlihat dan terasa seperti aplikasi asli.

Jika Anda tertarik untuk memulai pengembangan web hari ini, Anda mungkin dihadapkan dengan array opsi yang memburuk. Dalam modul ini, Anda akan mempelajari komponen dasar situs web serta beberapa alat yang dapat digunakan untuk memulai pengembangan web. Anda akan menggunakan HTML, CSS, dan JavaScript bersama-sama untuk membangun situs web lalu menggunakan alat pengembang di browser untuk memahami apa yang terjadi.

Dengan pengetahuan mendasar ini di tempat, Anda akan memiliki konteks yang lebih baik untuk membuat keputusan di masa depan saat membangun situs web; misalnya, apakah Anda harus memilih kerangka kerja JavaScript atau membuat fungsi JavaScript Anda sendiri untuk membangun situs web Anda.

Mari kita mulai dengan melihat ke mana kita ingin pergi.

Skenario

Bayangkan Anda adalah pengembang web, dan Anda telah diminta untuk membuat situs web perusahaan Anda menarik bagi berbagai pelanggan yang lebih luas. Untuk memungkinkan pelanggan Anda menyesuaikan pengalaman mereka di situs web, Anda memutuskan untuk menambahkan dukungan tema terang dan gelap. Anda membuat situs web bukti konsep sederhana untuk menunjukkan dukungan tema menggunakan CSS, dan Anda menuliskan fungsi JavaScript untuk beralih di antara tema ini.

Setelah selesai, situs web Anda terlihat seperti contoh ini ketika tema gelap dipilih:

Cuplikan layar yang memperlihatkan situs web yang telah selesai dengan tema gelapnya diaktifkan.

Apa yang ada di halaman web?

Konten, gaya, dan logika interaktif masing-masing dipisahkan menjadi file HTML, CSS, dan JavaScript. Prinsip desain dalam pemrograman modern adalah pemisahan kekhawatiran. Di antara sejumlah alasan untuk memisahkan kekhawatiran, dua di antaranya adalah kesederhanaan dan penggunaan kembali. Misalnya, dengan menata elemen HTML menggunakan CSS, Anda dapat menyederhanakan kode HTML Anda. Alih-alih mengodekan tampilan dalam setiap elemen, Anda menerapkan gaya CSS ke semua elemen di halaman, terlepas kompleksitas halamannya. Selain itu, Anda dapat menautkan beberapa halaman HTML ke satu file CSS, yang dapat membantu menyederhanakan tampilan dan nuansa yang konsisten di seluruh situs web Anda.