Postingan ini akan menjelaskan proses pembuatan profil diri sederhana saya. Langkah-langkah yang saya lakukan adalah:
1. Membuat dokumen HTML baru
Dengan bantuan Emmet di VS Code, saya bisa dengan mudah menggenerate dokumen html. Kemudian saya hanya perlu menyesuaikan beberapa hal seperti title, lang, dsb.
Hal yang selanjutnya saya lakukan adalah membuat div dengan class container dan membuat beberapa section didalamnya. Alasan saya membuat div dan section seperti ini, adalah supaya lebih mudah melakukan styling nantinya.
Di tiap section inilah saya akan mengisi profil diri saya. Di section biodata, riwayat pendidikan, dan kontak, saya memilih menggunakan table. Sedangkan di section pengalaman dan prestasi saya memilih menggunakan definition list (dl). Selain itu saya juga menambah title utama di div dan subtitle di setiap section. Tidak lupa juga saya menambahkan foto di section biodata. Saya juga menambahkan class pada bagian yang saya rasa perlu di-styling nantinya.
Disini saya menggunakan internal style dengan menggunakan tag style di head karena halamannya masih sederhana sehingga masih mudah di-maintain meskipun tidak membuat file baru. Dengan memanfaatkan class yang telah saya tambahkan di langkah sebelumnya, saya bisa memilih suatu bagian dan mengubah stylenya.
4. Men-deploy profil
Langkah terakhir yang perlu dilakukan adalah men-deploy. Sama seperti tugas sebelumnya, saya memilih menggunakan github pages karena halamannya masih statis. Saya membuat repo baru di github kemudian mem-push profil yang sudah saya buat kesana.
Kemudian saya membuka halaman setting repo saya di github, dan membuka pilihan Pages. Di situ saya memilih branch master sebagai source, memilih directory root, dan meng-klik tombol save. Setelah beberapa saat, halaman profil diri saya sudah berhasil dipublish
Profil diri saya bisa diakses melalui link https://raassh-23.github.io/tugas-2-pweb-profil-diri/, sedangkan kodenya bisa dilihat di repo https://github.com/raassh-23/tugas-2-pweb-profil-diri.
Tidak ada komentar:
Posting Komentar