Ada beberapa cara untuk membuat portfolio website yang menarik, tetapi disini kamu akan diberikan cara untuk membuat sebuah portfolio website dengan cara yang mudah dan simple.
Melalui bootstrapmade kamu bisa dengan mudah memilih bermacam – macam template portfolio yang menarik.
Kamu hanya butuh mendownload template tersebut dan di edit sesuai keinginanmu.
Baca Juga: Apa Itu Bootstrap?
1. Tools Yang Harus Kamu Persiapkan Sebelum Membuat Portfolio
- Web Server, disini ada beberapa tipe web server yang cocok digunakan di sistem operasi seperti Windows berarti kamu harus install XAMPP, Jika kamu menggunakan MacOS kamu bisa menggunakan MAMP dan untuk yang menggunakan Linux bisa menggunakan Tools LAMPP. Tools ini di gunakan untuk menghubungan web server yang kamu buat.
- Text Editor, disni saya sarankan untuk menggunakan SublimeText atau Visual Studio Code.
Untuk lebih detail tentang cara install XAMPP kamu bisa mengunjungi link dibawah ini..
2. Download Template
Kamu bisa mendownload template di bootstrapmade, Klik Disini!
Jika Sudah Di install jangan lupa masukan ke local disk C:/xampp/htdocs/contoh-portfolio
3. Pelajari HTML Dasar Dan CSS Dasar
Yang perlu diingat kamu juga harus memahami lebih dulu mengenai HTML Dasar dan CSS Dasar karena disini tugas kamu adalah mengubah bagian HTML dan CSS nya saja agar sesuai yang kamu inginkan.
Mari simak contoh sederhana dibawah ini :
Gambar di atas adalah source code template yang pernah saya download, di code tersebut dibagian Heading 1 atau H1 sudah saya ubah menjadi nama saya, untuk bagian Heading 2 atau Sub Heading saya cantumkan jurusan dan tempat saya kuliah.
Dibagian list atau <li> saya cantumkan Home, About, Resume, Project yang pernah saya buat, dan Contact dan di setiap link sudah ada class nav-link nya dan href nya juga harus sesuai jadi setiap kamu klik akan otomatis pindah ke setiap bagian yang kamu inginkan..
Kamu juga bisa menambahkan social links untuk menghubungkan link social media kamu, seperti berikut :
Menambah <a href> untuk memberikan alamat link social media kamu juga sangat penting agar pihak reqruitment bisa melihat akun social media kalian.
Jika kamu sudah memahami setidaknya dasar HTML dan CSS kamu pasti dengan mudah memahami cara memodifikasi template yang ada di bootstrapmade.
4. Mengubah Gambar Template
Kamu bisa mengubah image pada template yang tersedia jika sudah di download di bagian CSS nya di file style.css
Di file CSS dibagian body kamu ubah dibagian background: url, tapisebelum mengubah image kamu harus memasukkan gambar yang kamu inginkan di dalam Folder img.
Tetapi yang perlu di ingat setiap template memiliki folder yang berbeda – beda. jadi kamu harus teliti jika ingin memasukkan image agar image yang kamu ingin ubah berhasil.
Contoh hasil portfolio yang menarik :
Kesimpulan
Jika kamu ingin mencoba untuk memanfaatkan template dari bootstrapmade silahkan dicoba, tapi jangan lupa untuk memahami lebih dulu mengenai HTML dasar dan CSS dasar, karena setiap programming dasarnya dari HTML.
Thankyou and See you next time!
Baca Juga:
Leave a Reply