#2 Membuat Web Portfolio Dengan HTML CSS JAVASCRIPT
Pengenalan
Halo semuanya! Pada artikel ini, Anda akan mempelajari cara membuat Situs Web Portofolio Pribadi Responsif Lengkap Menggunakan HTML, CSS, dan Javascript Vanilla dengan sticky navigasi, menu navigasi responsif, tombol gulir back-to-top, dan mengungkapkan elemen situs web pada gulir hanya menggunakan Javascript Vanilla. Mari kita lihat bagaimana merancang website portofolio 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 video 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
Script.js
OKe Sekian pembuatan web portfolio part 2 nya Source By Raz.my.id
1 komentar
image quote pre code