RAZPiblog Soft RAZPiblog Soft

Membuat Web Commerce Dengan HTML CSS Dan Javascript

 


Pengenalan

Halo semuanya! Pada artikel ini, Anda akan mempelajari cara membuat Situs Web Commerce Responsif Lengkap Menggunakan HTML, CSS, dan Javascript, menu navigasi responsif, tombol gulir back-to-top, dan mengungkapkan elemen situs web pada gulir hanya menggunakan Javascript . Mari kita lihat bagaimana merancang website commerce ini.

Pertama, buat file index.html, file style.css, dan file script.js. 

Setelah Anda membuat file-file tersebut Dalam file index.html tambahkan tag meta responsif, tautkan perpustakaan font yang mengagumkan dan file style.css di antaranya ke tag <head></head>. 

Kemudian mulai bagian HTML dan bagian CSS dari bagian beranda (utama) dari situs web portofolio. Kemudian bagian HTML, CSS, dan javascript dari bagian header berpengaruh pada scroll. kemudian lengkapi bagian HTML dan CSS dari bagian about, bagian skill, bagian services, bagian work, bagian contact, dan footer. Setelah menyelesaikan semua bagian tersebut, mulailah kueri media responsif dari situs web. Ikuti video yang Anda inginkan sehingga Anda akan memahami cara mengubah gaya menggunakan kueri media untuk responsivitas situs web (untuk tajuk dan menu navigasi samping dan semua bagian). Setelah menyelesaikan kueri media responsif maka Anda perlu membuat tombol back-to-top untuk situs web. Kode pertama bagian HTML dari tombol back-to-top di file index.html kemudian beri gaya pada file style.css. Setelah bagian HTML dan CSS selesai maka mulailah bagian javascript dari event scroll dan event klik tombol back-to-top di file script.js. Setelah menyelesaikannya, fitur situs web berikutnya dan terakhir adalah mengungkapkan elemen situs web pada gulir. Untuk menyelesaikannya, buat fungsi pengungkapan di file script.js. kemudian tulis gaya untuk pemilih kelas pengungkapan dan untuk pengungkapan aktif. Terakhir, tambahkan kelas pengungkapan ke elemen pada file index.html yang perlu Anda tampilkan pada gulir. Semoga video ini bermanfaat untuk mendesain situs web portofolio yang keren.

Info Untuk Kamu

Semua source code dan source file tersedia untuk diunduh dari sini. Gunakan tombol unduh atau salin dan tempel kode dari editor teks. Pendapat saya pertama coba lakukan dengan mengikuti baris demi baris. Ini akan membantu Anda untuk memahami semua itu. Setelah itu, jika kode Anda salah atau tidak berfungsi, gunakan kode sumber yang diberikan untuk membandingkan dengan kode Anda. Ini akan membantu Anda untuk memahami semua kesalahan Anda.

Index.html

Style.css

Lalu kita buat login page untuk website ini. Masukkan kode dibawah lalu copy saja ke file login.html, Sebelum itu buat file login .html terlebih dahulu.

Login.html

Selanjutnya kita membuat halaman signup atau halaman registrasi, jangan lupa membuat folder baru dengan nama signup.html lalu copy atau salin kode dibawah ini ke dalam file signup.html.

Signup.html

Beginilah cara membuat website untuk commerce hotel atau penginapan dari saya. Kamu bisa mendesain ulang sesuai keinginanmu karena kode ini bersifat open source jadi kamu bisa bebas melakukan perubahan erhadap kodenya. Terimaksih

Raz.my.id
See Also :