Pada video ini kita akan mempraktekan seluruh ilmu yang telah kita pelajari pada playlist CSS ini, mulai dari CSS dasar, lanjutan hingga Layout, untuk membuat sebuah website portfolio sederhana.

Bisa dilihat di layar, ini adalah halaman portfolio yang hendak kita buat dalam video ini. Portfolio ini akan terdiri dari dua bagian, yaitu bagian header yang berada di atas dengan warna latar belakang hitam, dan bagian main yang berada dibawahnya dengan warna latar belakang putih. Kedua bagian memiliki sebuah sidebar yang terletak di bagian kiri. Dan berhubung kita menggunakan property float, maka kita bisa dengan mudah mengganti sidebar ke sebelah kanan. Cukup dengan cara mencari kelas .sidebar pada kode css dan mengganti nilainya menjadi right, dan sidebar pun akan berpindah ke sebelah kanan.

Kita akan memulai coding kita dari nol.

Oke, sebelum kita mulai coding, saya ingin menjelaskan terlebih dahulu bahwa rancangan halaman portfolio ini saya ambil dari situs FreePIK.Com. Jadi apabila teman-teman membutuhkan inspirasi, bagaimana sih rencangan halaman yang bisa kelihatan bagus dan profesional, bisa membuka browser dan memasukkan URL freepik.com. Sebagai contoh, saya memasukkan kata kunci portfolio design, dan freepik pun memperlihatkan banyak design yang bisa kita gunakan untuk halaman situs kita. Dalam contoh video ini, saya mengambil gambar yang ini.

Sebagai informasi tambahan, FreePik menyediakan dua jenis keanggotaan, yaitu gratis dan berbayar. Apabila kita ingin menggunakan yang gratis, maka kita akan dibatasi hanya boleh mengunduh beberapa gambar per hari. Selain itu, kita juga diminta untuk memberikan link balik ke freepik dari situs kita. Sedangkan kalau kita menggunakan keanggotaan berbayar, maka kita boleh bebas mengunduh berapapun banyaknya gambar yang kita butuhkan. Dan kita pun boleh mengakses gambar-gambar premium, yaitu yang memiliki logo mahkota. Biasanya yang mahkota ini kualitas gambarnya lebih bagus daripada yang gratis. Dengan keanggotaan berbayar, kita sudah tidak perlu memberikan link balik ke FreePik.

Untuk mengunduh gambar, kita tinggal klik saja ke gambar yang kita mau. Lalu kita bisa menekan tombol Download. Kita bisa langsung mengunduh tanpa perlu mendaftar. Namun kita akan mendapatkan jatah unduh yang lebih banyak, apabila mendaftar menjadi anggota.

Sekarang kita mulai coding. Saya sudah menyiapkan 2 buah file, yaitu portfolio.html dan portfolio.css. Keduanya masih kosong. Kita mulai coding dari HTML terlebih dahulu.

Pertama kita buat HTML Boilerplate terlebih dahulu. Kita isikan judulnya Portfolio. Lalu kita tambahkan link ke portfolio.css.

Lalu kita perhatikan lagi rancangan portfolio kita. Secara vertikal, portfolio ini kita bagi menjadi 2 bagian ya. Bagian atas dengan warna latar belakang hitam, kita sebut bagian Header. Sedangkan bagian bawah dengan warna latar belakang putih, kita sebut dengan nama Main. Jadi di dalam tag body, kita tambahkan tag Header dan tag Main.

Kemudian kita pindah ke kode CSS. Kita tambahkan selector header. Kita beri property background-color: black. Dan kita tambahkan padding dengan nilai 50px 0. Artinya pada bagian atas dan bawah tag akan ada padding sebesar 50 pixel. Sedangkan pada bagian sampingnya tidak ada padding. Lalu kita tambahkan selector main. Kita beri property background-color: white. Dan kita tambahkan padding juga 50px 0. Kita simpan dan refresh browser. Sekarang halaman portfolio kita sudah memiliki 2 bagian, yang atas adalah header dengan latar belakang hitam. Dan bagian bawah adalah main dengan latar belakang putih. Selanjutnya kita tambahkan dahulu isi dari bagian header.

Kita tambahkan div dengan class container. Dan di dalamnya kita tambahkan div dengan class sidebar. Di dalam sidebar kita tambahkan tag img dengan source profile.jpg dan kita isikan attribute alt dengan Profile Picture. Dalam contoh disini saya sudah menyiapkan gambar dengan nama file profile.jpg yang ditaruh di folder yang sama dengan source code portfolio.html.

Selanjutnya kita pindah ke kode CSS. Kita tambahkan selector kelas container. Kita berikan properti width dengan nilai 800px. Lalu kita tambahkan selector kelas sidebar dan kita berikan properti width dengan nilai 300px. Perhatikan lagi rancangan layar porfolio kita. Warna pada sidebar header sedikit berbeda dari warna background-nya ya. Jadi untuk sidebar, kita tambahkan lagi background-color dengan nilai gray. Setelah itu kita tambahkan selector .sidebar img untuk mengatur tag image di dalam sidebar. Kita tambahkan property width dengan nilai 100%.

Kita simpan dan refresh browser. Untuk bagian sidebar masih belum begitu kelihatan ya. Kita ambil kode padding dari selector header. Lalu kita pindahkan ke sidebar. Kita simpan dan refresh browser. Sekarang sudah kelihatan bagian sidebar kita dengan warna background grey. Namun posisinya masih rata kiri ya. Kita perlu memindahkan kelas container menjadi ke tengah layar. Untuk itu kita bisa menambahkan properti margin: 0 auto ke dalam selector kelas container.

Sekarang container sudah berpindah ke tengah layar. Sedangkan untuk warna sidebar yang gray itu sendiri masih belum sesuai dengan warna pada rancangan layar ya. Kita bisa menggunakan software seperti Adobe Photoshop untuk mengambil kode hexadesimal dari warna yang digunakan. Warna yang digunakan disini adalah #212530. Sedangkan kode hexadesimal dari warna black pada header, seharusnya adalah #171b26.

Selanjutnya kita masuk ke bagian kanan dari bagian header. Perhatikan disini bahwa kita akan menuliskan nama David Anderson yang dipisahkan menjadi 2 baris.

Pertama kita tambahkan dahulu div dengan kelas content. Di dalamnya kita tambahkan tag h1, dengan konten David lalu diikuti dengan tag BR untuk memisahkan barisnya dan Anderson. Kita simpan dan refresh browser.

Oke. Problem yang pertama adalah isi konten berada di bagian bawah sidebar ya. Padahal kita ingin agar isi konten berada di samping. Dan problem keduanya adalah kita tidak bisa membaca tulisan David Anderson karena menggunakan warna putih.

Kita perbaiki dahulu masalah warna tulisan. Perhatikan kembali rancangan layar, bahwa semua tulisan pada bagian header menggunakan warna putih. Jadi kita bisa menambahkan ke selector header, properti color dengan nilai white. Kita simpan dan refresh browser. Sekarang tulisan David Anderson bisa terbaca karena berwarna putih.

Selanjutnya kita akan memindahkan kelas content ke bagian kanan sidebar. Caranya adalah dengan menggunakan property float. Pertama kita ke selector class sidebar terlebih dahulu dan kita tambahkan property float dengan nilai left. Lalu kita buat selector class content. Dan kita tambahkan float dengan nilai left juga. Kita tambahkan lagi properti width dengan nilai 500px. Kita copy nilai property padding dari kelas sidebar agar content memiliki padding yang sama dengan sidebar.

Kita simpan dan refresh browser ya. Nah sekarang perhatikan bahwa warna latar belakang hitam dari bagian header menjadi hilang. Dan tulisan David Anderson kembali tidak bisa dibaca. Hal ini disebabkan karena kita menggunakan float untuk sidebar dan content. Jadinya browser akan menganggap bahwa bagian sidebar dan content ini dikeluarkan dari flow dokumen header, sehingga header menjadi tidak memiliki konten. Akibatnya warna latar belakang hitam dari tag header menjadi hilang dari tampilan browser.

Untuk memperbaiki ini, maka kita mesti melakukan clear pada bagian akhir dari float kita. Kita bisa menggunakan teknik clearfix yang kita pelajari dari video sebelumnya. Kita tambahkan kelas clearfix, dan kita isikan dengan nilai content: “”; clear: both; dan display: table. Kita buka kembali kode HTML, perhatikan bahwa parent dari kelas sidebar dan content ini adalah kelas container. Oleh karena itu kita tambahkan kelas clearfix setelah container. Kita simpan dan refresh browser. Sekarang bagian konten sudah pindah ke sebelah kanan sidebar dengan benar.

Sekarang perhatikan bahwa tulisan David Anderson terlalu menempel ke gambar pada sidebar ya. Seharusnya ada jarak. Untuk itu kita mesti menambahkan padding horizontal pada kelas content. Kita ubah nilai dari property padding-nya menjadi 50px 50px. Kita simpan dan refresh browser.

Sekarang kelas content kita malah turun ke bawah ya. Mengapa? Kalau kita inspect. Perhatikan bahwa ukuran container kita adalah 800 pixel. Seharusnya bisa pas karena sidebar berukuran 300 pixel dan content berukuran 500 pixel. Namun kalau kita lihat ke content, ternyata lebarnya menjadi 600 pixel ya. Karena pada bagian kiri dan kanannya bertambah padding sebesar 50 dan 50 pixel. Untuk memperbaiki hal ini, kita bisa mengubah width dari content menjadi 400 pixel, dan content akan kembali naik ke atas dan berada disamping sidebar.

Namun banyak juga programmer yang tidak suka cara seperti ini ya, karena kita sendiri yang harus menghitung ulang nilai width, dikurangi dengan paddingnya. Kita maunya nilai width 500 pixel, dan browser sendiri yang menghitung apabila butuh padding ya diambil dari 500 pixel tersebut. Jangan malah menambah lebar baru, sehingga perhitungan width kita menjadi meleset seperti contoh disini. Oleh karena itu kita bisa menambahkan properti box-sizing dengan nilai border-box. Jadi sekarang nilai padding sudah tidak menambah besar box content kita, sehingga posisinya akan pas berada di sebelah kanan sidebar.

Kita tambahkan lagi konten pada halaman HTML. Setelah tag h1, kita tambahkan tag h2 dengan konten UX Designer. Lalu kita tambahkan lagi konten dibawahnya dalam bentuk div.

Kita simpan dan refresh browser. Oke. Kita perhatikan pada rancangan, bahwa jarak antar baris teks-nya lebih besar ya. Sedangkan di kita, baris-nya saling mepet. Dan jarak ini berlaku untuk semua teks di dalam dokumen. Jadi kita bisa mengubahnya dari elemen body. Kita tambahkan selector body. Untuk menambahkan jarak antar baris, kita bisa menggunakan properti line-height. Kita beri nilai 1.5 agar jaraknya menjadi satu setengah baris. Sekalian kita hilangkan juga semua margin pada body ya, kita tambahkan property margin dengan nilai 0. Kita simpan dan refresh browser. Sekarang kita sudah memiliki jarak antar baris.

Kemudian kita perhatikan lagi antar gambar dengan tulisan David Anderson. Tulisan David agak turun ke bawah ya. Kita coba inspect. Dan ternyata pada tag h1 terdapat margin vertikal. Margin vertikal ini mesti kita hilangkan. Kita tambahkan selector h1. Dan kita beri property margin: 0. Kita simpan dan lihat hasilnya di browser.

Sekarang tulisan David Anderson sudah naik dan lebih sejajar dengan gambar. Terus perhatikan pada rancangan layar, bahwa tulisan UX Designer memiliki warna latar belakang seperti sidebar. Oleh karena itu kita tambahkan lagi selector h2. Lalu kita copy property background-color dari kelas sidebar. Dan hasilnya UX Designer sudah memiliki warna background, tapi full sampai ke ujung baris ya. Untuk mengubah warna background hanya di tulisannya saja, kita bisa menggunakan property display: inline-block.

Selanjutnya kita mesti mengatur agar Phone dan Address menjadi terpisah di 2 kolom ya. Untuk itu kita bisa menggunakan property float lagi. Kita tambahkan 2 buah div dengan nama kelas float-50. Kita pindahkan phone dan email ke dalam div pertama. Lalu kita pindahkan Address ke div kedua. Lalu kita buka kode CSS. Kita tambahkan selector kelas float-50. Kita beri properti float dengan nilai left. Dan properti width dengan nilai 50%.

Sekarang data phone dan address sudah terpisah menjadi 2 kolom. Namun tampilannya masih berantakan ya karena kita belum menggunakan clearfix. Kita tambahkan section dengan kelas clearfix. Lalu kita masukkan kedua div dengan kelas float ke dalamnya.

Kita simpan dan refresh browser. Sekarang data phone, email dan address sudah terpisah menjadi 2 kolom. Selanjutnya kita ingin menggeser email ke bawah, agar ada jarak 1 baris dari phone. Pada div nomor telepon, kita tambahkan class mb-1. Kita tambahkan selector kelas mb-1 dan kita isikan dengan nilai margin-bottom: 1.5rem. Nilai 1.5 ini disebabkan karena sekarang nilai line-height kita adalah 1.5.

Sedangkan bagian Address, mesti kita turunkan sebanyak 2 baris. Jadi pada div Address, kita tambahkan kelas mt-2. Lalu kita tambahkan selector kelas mt-2 dan kita beri properti margin-top sebesar 3 rem. Satu baris nilainya adalah 1.5, jadi kalau dua baris nilainya adalah 3.

Selanjutnya kita mesti menurunkan semua data phone, email dan address ini sebanyak 2 baris. Maka pada div yang mengandung semua data ini, yaitu div dengan kelas clearfix, kita tambahkan lagi kelas mt-2.

Nah, sekarang bagian header website portfolio kita sudah jadi.

Selanjutnya kita akan masuk ke bagian main. Dan sama seperti header, main juga terdiri dari container, sidebar dan content. Jadi kita bisa copy dua tingkat div dari bagian header, dan kita paste ke dalam tag main.

Kita lihat hasilnya di browser. Pertama kita ubah dahulu ya, warna sidebar menjadi lebih terang. Kita bisa memilih sidebar yang berada di main dengan menggunakan selector main spasi .sidebar. Lalu kita ganti background-color misalnya menjadi lightgray.

Kita simpan dan refresh browser. Sekarang sidebar bawah warnanya sudah berbeda dari sidebar atas ya. Namun di bagian main masih terdapat padding. Kita hapus property padding dari selector main. Dan sekarang kita isi konten dari sidebar. Kita memiliki h1 dengan konten Education. Lalu konten datanya dalam tag div. Dan kemudian kita memiliki h1 dengan konten Hobbies, dengan data yang berada di dalam tag li.

Kita lihat hasilnya pada browser. Pertama kita berikan padding dahulu, agar bagian tepi huruf tidak menempel ke tepi background sidebar. Kita ke selector main .sidebar. Kita tambahkan property padding dengan nilai 50px 50px. Dan berhubung ukuran sidebarnya menjadi semakin besar, maka kita mesti tambahkan lagi property box-sizing dengan nilai border-box.

Lalu kita tambahkan class mb-1 untuk memberikan jarak antar konten dari Education.

Selanjutnya kita akan mengatur konten dari Hobbies. Kita tambahkan selector ul. Kita ubah hurufnya menjadi tebal dengan menggunakan property font-weight dengan nilai bold. Ukuran font sedikit lebih besar menggunakan property font-size: 1.1 rem. Dan kita tambahkan jarak antar baris menjadi 2 baris, dengan menggunakan property line-height: 2. Dan yang terakhir bullet-nya kita geser lebih ke kiri, kita coba padding-left dengan nilai 0. Hasilnya terlalu kiri ya. Kita coba nilai 20 px. Oke, sudah pas. Bagian main sidebar sudah selesai.

Selanjutnya kita tambahkan konten untuk bagian main content.

Saya sudah menambahkan konten dengan judul Experience, dengan datanya yang berada di dalam tag div. Lalu dibawahnya ada konten dengan judul Skills, dan datanya juga menggunakan tag div. Begini adalah tampilannya di browser. Kita akan menambahkan kode CSS untuk mengatur tampilan main content.

Pertama kita tambahkan dahulu jarak sebanyak satu baris dibawah setiap judul. Kita bisa menambahkan class=”mb-1” di kedua tag h1.

Lalu kita akan mengubah data Experience menjadi dua baris, sesuai dengan contoh design kita. Kita tambahkan div dengan kelas float-50. Kita pindahkan 2 data pertama ke dalam div. Kemudian kita tambahkan lagi div dengan kelas float-50, dan kita pindahkan data berikutnya ke dalam div.

Kita simpan dan refresh browser. Hasilnya sudah menjadi 2 kolom seperti rancangan layar. Tapi kalau kita perhatikan pada rancangan, ukuran kolom kiri lebih kecil daripada kolom kanan. Kita akan melakukan perubahan seperti rancangan.

Kita ganti kelas float -50 pada kolom kiri menjadi float-40 dan kita ganti kelas float-50 pada kolom kanan menjadi float-60. Kita buka kode css. Kita copy selector kelas .float-50. Dan kita paste sebanyak 2 kali. Kita ganti yang pertama menjadi selector .float-40 dan kita ganti width menjadi 40%. Dan kemudian kita ganti selector kedua menjadi .float-60 dan width menjadi 60%. Kita simpan dan refresh browser.

Sekarang kedua kolomnya sudah sesuai dengan rancangan. Jadi kita tinggal meneruskan untuk mengubah dua data exprience berikutnya agar menjadi 2 kolom juga. Dan kemudian kita tambahkan jarak satu baris di masing-masing data, dengan cara menambahkan kelas mb-1 di setiap bagian float. Dan kita tambahkan kelas clearfix pada section.

Bagian terakhir adalah Skills, dan datanya dalam bentuk 2 kolom. Cara pengerjaannya sama seperti sebelumnya ya. Hanya saja disini kita menggunakan dua buah kelas float-50. Karena kolom kiri sama besar dengan kolom kanan.

Untuk bagian skills ini, kita tidak bisa menggunakan class clearfix ya. Karena kalau menggunakan class clearfix, kolom kita jadinya hanya menggunakan separuh dari lebar konten. Apabila class clearfix kita hapus, maka data skills bisa terbagi menjadi 2 kolom. Jadi pada bagian skills kita melakukan clear melalui cara manual. Pada bagian akhir float, kita tambahkan div dengan kelas clear. Lalu kita tambahkan kode CSS selector kelas clear, dan kita beri property clear: both.

Pada section Skills kita tambahkan kelas Skills. Lalu kita tambahkan selector kelas skills pada kode CSS. Kita ubah ukuran font menjadi lebih besar dengan menggunakan properti font-size: 1.2rem. Kita simpan dan refresh browser.

Oke, sekarang website portfolio kita sudah selesai ya. Kalau dilihat dari rancangan layar, pada bagian skills memang ada bagian untuk memberikan level pada skill kita. Namun hal ini sangat tidak disarankan untuk situs portfolio ya. Mengapa? Karena kita tidak memiliki standart untuk menentukan apakah skill kita itu di tingkat pemula atau tingkat mahir. Bisa saja menurut kita skill kita sudah di tingkat mahir, namun setelah dites oleh perusahaan rupanya menurut mereka masih di tingkat pemula. Dan begitu juga sebaliknya. Jadi lebih baik kita tidak menentukan sendiri tingkatan dari skill kita.

Nantinya teman-teman masih bisa memperbagus lagi situs portfolio ini, misalkan dengan mengganti kata-katanya dengan data diri sendiri, mengubah font-nya menjadi lebih bagus. Ataupun menggeser posisi elemen-elemen dalam portfolio agar menjadi lebih rapi.

Perlu diingat disini bahwa website portfolio yang kita buat disini masih belum responsive. Kita masih menggunakan lebar layar fix di ukuran 800 pixel. Akibatnya apabila pengunjung kita menggunakan browser yang lebarnya lebih kecil dari 800 pixel, maka akan muncul scrollbar di bagian bawah layar. Pengunjung lebih susah untuk membaca website kita, dan tampilan layar pun tidak berfungsi secara sempurna. Kedepannya kita akan mempelajari mengenai CSS yang berhubungan dengan responsive, seperti flexbox, media query, ataupun framework responsive yang popular seperti Bootstrap.

Responsive disini artinya website kita akan tetap terlihat bagus walaupun dilihat dari desktop, tablet, maupun smartphone. Sebagai contoh, kita buka website skysensolution.com yang dibuat menggunakan bootstrap. Disini kita bisa melihat ada konten yang apabila dibuka pada dekstop disusun menjadi 4 kolum. Dan apabila browser kita kecilkan, maka pada ukuran tablet kontennya berubah menjadi 2 kolum. Dan setelah lebih kecil lagi, pada ukuran smartphone konten akan berubah menjadi menggunakan seluruh lebar layar. Jadi konten akan tetap nyaman untuk dibaca, baik dari dekstop, tablet, maupun smartphone.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.