Belajar Membuat tampilan  Website Toko Online seperti website tokopedia dengan menggunakan framework bootstrap, Pada kesempatan ini kita  akan belajar membuat tampilan website toko online dengan mudah dan cepat.

Sebelum membuat website , berikut aplikasi dan tools  yang harus di persiapkan siapkan.

• Komputer/Laptop.
• Aplikasi Text Editor. anda bisa menggunakan notepad, visual studio code, sublime text
• Browser. untuk melihat tampilan yang kita buat.

 

Berikut langkah dalam proses pembuatan  toko online seperti tokopedia

 

1. Buat Folder dengan nama latihan1

langkah yang pertama, kita harus membuat folder didalam folder latihan1 dengan nama folder style dan folder images, untuk lebih jelasnya kita lihat gambar dibawah ini:

 

Baca Juga :

Kursus website 

Kursus Pemrograman

2. Untuk langkah yang kedua buak situs Bootstrap

silahkan buka situs boostrapnya, klik url ini https://getbootstrap.com/docs/5.0/getting-started/introduction/
kemudian copy script <doctype htmlnya>

 

3.  Buka kembali text editor dan paste scriptnya 

silahkan buka kembali text editornya dan kita buat file bernama index.html, tampilanya seperti gambar di bawah ini:

 

 

4. Setup Webfont with CDN untuk membuat icon

Untuk langkah selanjutnya silahkan buka website webfont fontawesome untuk membuat icon didalam website kita, seperti icon keranjang , icon notifikasi dan lain-lain.

silahkan kunjungi link berikut : https://fontawesome.com/v5.15/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont

 

silahkan copy link yang di blok sesuai gambar kemudian paste di file index.html

 

5. Untuk mempersingkat waktu silahkan download source code yang sudah kami buat di link di bawah ini

Download Source code website

Hasilnya akan tampil seperti di bawah ini: