Di postingan ini, saya akan menjelaskan proses pembuatan website katalog yang saya kerjakan. Langkah-langkah yang saya lakukan adalah:
1. Membuat file html
Hal pertama yang saya lakukan adalah membuat file dengan nama index.html. Kemudian dengan memanfaatkan emmet di vscode, saya cukup mengetikkan html:5 untuk menggenerate boilerplate kode html 5. Kemudian saya tinggal menyesuaikan title dan lang.
2. Membuat kerangka website
Kemudian di dalam tag body, saya membuat kerangka websitenya. Pertama saya membuat header, tiga section yang masing-masing akan berisikan daftar produk, tentang, dan kontak, dan terakhir footer. Di dalam header saya menambahkan title, subtitle, dan juga nav. Di dalam nav sendiri saya menambahkan link ke section-section tadi. Dan terakhir, di dalam section produk saya menambahkan article untuk tiap baju.
3. Mengisi konten website
Langkah selanjutnya, saya menambahkan konten dari websitenya. Saya mencari gambar baju dari Google Image, kemudian diletakkan di folder img dan ditambahkan ke website. Saya juga memberikan deskripsi, harga, dan tombol beli di tiap baju. Tidak lupa juga saya menambahkan konten untuk section tentang dan kontak.
4. Menambahkan styling ke website
Kemudian setelah konten dirasa cukup, saya kemudian menambahkan styling. Untuk website ini saya menggunakan external css. Saya membuat file style.css di folder styles lalu mereference file itu di index.html. Di dalam file tersebut, saya memberikan styling ke class-class yang telah saya buat sebelumnya.
5. Men-deploy website
Setelah website dirasa cukup bagus, selanjutnya adalah men-deploy website tersebut. Masih sama seperti tugas sebelumnya, saya menggunakan github pages karena website ini masih statis. Saya membuat sebuah repo baru di Github dan meng-push kodenya ke repo tersebut. Lalu saya tinggal mengaktifkan github pages di setting repo tersebut dan website pun sudah bisa diakses.
Tidak ada komentar:
Posting Komentar