Tools
Halo, selamat datang :)
Kenalin aku Dibantu, bot yang akan membantu kamu mengatasi permasalahan di modul ini.
Latihan: Styling untuk Halaman Profil
Kita sudah belajar tentang menulis aturan dan menghubungkan dokumen HTML dengan styling. Pada tahap awal, kita akan berlatih menerapkannya pada latihan ini. Let’s go!
Tujuan
Pada Halaman Profil sebelumnya, kita sudah selesai menstrukturkan ulang konten-konten Kota Bandung dengan elemen-elemen HTML yang sesuai. Kali ini, kita akan beralih ke komponen lain, yaitu styling (CSS).
Kita akan membuat berkas CSS untuk menyediakan styling. Berkas ini akan dikelompokkan dengan folder terpisah. Berikut adalah struktur proyek akhir dari latihan ini.
Alur Latihan
Berikut adalah alur latihan kali ini.
- Membuka hasil latihan terakhir dengan VS Code.
- Membuat folder bernama “styles” untuk menyimpan berkas styling.
- Membuat berkas CSS bernama style.css dalam folder “styles”.
Latihan Styling untuk Halaman Profil
Silakan ikuti dan simak beberapa langkah berikut untuk mengikuti latihan dengan baik.
- Silakan buka proyek Halaman Profil terakhir dengan VS Code. Jika belum memilikinya, silakan Anda unduh dan buka proyek tersebut pada GitHub repository ini.
- Untuk menerapkan styling, kita akan menerapkannya pada folder terpisah. Silakan buka folder assets.
- Jika Anda sudah mengikuti latihan menampilkan gambar pada HTML, Anda akan menemukan folder image dalam folder assets. Nah, kita tambahkan folder lain dalam folder assets, yaitu folder bernama “styles”.
Silakan buat folder tersebut.
- Folder baru ini akan kita gunakan untuk menyimpan berkas CSS. Silakan buka folder tersebut dan buat berkas baru dengan nama “style.css”. Untuk membuat berkas styling, tentu Anda perlu menggunakan format .css–dibaca: dot css.
- Sip! Folder styles dan berkas style.css sudah siap untuk dimanfaatkan. Kita akan menggunakan berkas ini untuk proses styling halaman ke depannya.
Ini barulah permulaan latihan dalam menerapkan styling untuk Halaman Profil. Jadi, mari kita lanjutkan latihannya!
Halo, selamat datang :)
Kenalin aku Dibantu, bot yang akan membantu kamu mengatasi permasalahan di modul ini.
Catatan Belajar
Pengaturan
Belajar programming dengan terstruktur.
Belajar programming dengan terstruktur.
Belajar programming dengan terstruktur.
Daftar Modul
84% Selesai
Latihan: Styling untuk Halaman Profil
