Sebelum kita melanjutkan coding, pertama saya ingin menginformasikan terlebih dahulu bahwa design dari situs portfolio pada video ini diambil dari freepik.com. Jadi teman-teman yang membutuhkan gambar, atau butuh inspirasi kira-kira design website seperti apa yang bagus untuk kita buat, bisa melakukan pencarian pada situs ini. Sebagai contoh, kita coba melakukan pencarian dengan kata kunci Portfolio Design. Dan disini kita bisa menemukan design yang akan kita gunakan pada video ini.

Sekarang kita masuk ke coding. Saya sudah menyediakan 2 buah file yaitu portfolio.html dan portfolio.css. Keduanya ini adalah lanjutan dari video sebelumnya. Saya hanya mengganti sedikit kata-kata pada navigasi, berhubung konten kita kali ini adalah bahasa inggris, maka navigasinya juga saya terjemahkan ke bahasa inggris. Bagi teman-teman yang ingin mendapatkan source code ini bisa melihat deskripsi pada video.

Pada browser Chrome, kita bisa melihat hasil yang hendak kita dapatkan pada video ini. Bagian yang hendak kita kerjakan adalah bagian dibawah navigasi, yang bentuknya seperti blog dengan 1 sidebar. Kalau kita lihat pada source code HTML, bagian yang akan kita atur berada di dalam tag section dengan ID #name.

Tag Section memiliki 2 buah konten, yaitu tag sidebar dan tag main. Tag sidebar isinya sederhana, hanya ada satu buah image saja. Sedangkan tag main isinya adalah header1 nama, header2 pekerjaan, dan kemudian dibawahnya ada phone, email dan address yang terpisah menjadi 2 kolom. Pada video sebelumnya kita sudah pernah mengerjakan konten ini dengan menggunakan float, namun pada video ini kita akan menggunakan Flexbox. Jadi disini kita bisa melihat ada kelas flex-container2 yang akan mengatur phone, email dan address sebagai flexbox. Perhatikan lagi pada saat ukuran browser kecil, maka seluruh konten akan berubah menjadi per baris, sedangkan gambar sidebarnya berada di bagian paling bawah.

Berhubung semua yang akan kita kerjakan pada video ini sudah pernah dibahas pada video-video sebelumnya, maka saya harapkan coding kali ini menjadi latihan untuk teman-teman. Ini adalah hasil dari source code saat ini, dan tugas kita adalah menambahkan kode CSS agar bisa menghasilkan tampilan seperti yang saya jelaskan tadi. Pause terlebih dahulu video ini dan coba kerjakan dahulu pada komputer masing-masing. Nantinya setelah selesai, teman-teman dapat melanjutkan video ini dan kita akan membahas bagaimana cara mengerjakannya.

Oke, sekarang kita masuk ke coding. Kita lihat kembali ke kode HTML kita ya. Pertama kita atur terlebih dahulu section #name. Disini kita bisa lihat ada kelas yang namanya flex-container1. Isi dari tag section ada 2 buah tag, yaitu tag sidebar dan tag main.

Kita menuju ke kode CSS. Kita geser kebawah sebelum @media. Jadi kita mengatur style pada saat browser berukuran besar terlebih dahulu. Kita tambahkan selector kelas .flex-container1. Kita tambahkan properti display dengan nilai flex.

Kita mesti mengatur lagi sidebar dan main. Pertama kita tambahkan dahulu selector .flex-container1 sidebar. Kita tambahkan properti flex dengan nilai 200px 0 0. Artinya lebar sidebar adalah 200 pixel, dan tidak membesar maupun mengecil pada saat ukuran browser berubah. Kemudian kita berikan background-color dengan nilai #212530. Nilai hexadesimal disini bisa kita dapatkan apabila kita menggunakan program color picker dan mengambil sample warna dari gambar design yang kita gunakan.

Nah, pada browser juga masih belum ada perubahan ya. Karena gambar di dalam sidebar ukurannya terlalu besar. Jadi kita tambahkan lagi selector .flex-container1 sidebar img, kita tambahkan properti width dengan nilai 100%. Nah, sekarang ukuran gambar sudah sesuai dan masuk ke dalam sidebar. Namun masih terlalu mepet ke atas. Kita tambahkan jarak dengan menggunakan properti padding 50px 0. Jadi ada jarak di bagian atas dan bawah gambar.

Selanjutnya kita atur bagian tag main. Kita tambahkan selector .flex-container1 main. Lalu kita tambahkan flex dengan nilai 1 1. Artinya ukuran main akan menyesuaikan dengan ukuran browser pada saat diperbesar maupun diperkecil. Lalu kita tambahkan background color dengan nilai #171b26. Berhubung warna latar belakangnya hitam, maka tulisan menjadi susah untuk dibaca. Kita ubah warna tulisan menjadi putih dengan menambahkan properti color: white. Kita tambahkan jarak pada horizontalnya, dengan cara menambahkan padding dengan nilai 0 50px.

Lalu kita akan mengubah warna latar belakang dari header dua menjadi sama dengan sidebar. Kita tambahkan selector .flex-container1 h2. Kita tambahkan background-color dengan nilai silver. Sekarang perhatikan bahwa warna background berada di satu baris full, sedangkan kita hanya ingin warna background hanya berada di belakang tulisan saja. Oleh karena itu kita bisa mengganti properti display menjadi inline-block. Setelah pengaturannya sudah benar, kita ubah lagi warna silver menjadi #212530.

Sekarang kita mengatur bagian phone, email dan address agar menjadi 2 kolom. Perhatikan di kode HTML. Kita menggunakan kelas flex-container2. Artinya disini kita menggunakan flex di dalam flex. Kita tambahkan dahulu selector flex-container2, kita beri properti display dengan nilai flex.

Lalu kita lihat lagi ke kode HTML. Kita hendak mengambil div yang berada langsung di bawah container. Artinya dua div yang saya tunjuk ini saja ya. Kita tambahkan selector flex-container2 > div. Lalu kita berikan properti flex dengan nilai 1. Artinya kedua kolom berukuran sama besar. Kita lihat hasilnya, sudah berhasil menjadi 2 kolom ya.

Kita tinggal menambahkan kelas utility saja. Kalau kita lihat kembali ke kode HTML. Ada 2 kelas utility yang digunakan ya. Yaitu mt-2 dan mb-1. Mt-2 berfungsi untuk memberikan margin pada bagian atas. Sedangkan mb-1 berfungsi untuk memberikan margin pada bagian bawah. Kita tambahkan selector .mt-2 dan kita beri properti margin-top dengan nilai 3 rem. Lalu kita tambahkan selector .mb-1 dan kita beri properti margin-bottom dengan nilai 1.5rem.

Sekarang perhatikan pada bagian konten dengan navigasi masih ada sedikit jarak. Kita perlu menaikkan konten agar bisa dempet dengan navigasinya. Kita menuju ke kelas .flex-container1. Agar konten bisa naik, maka kita tambahkan properti margin-top dengan nilai -20px.

Nah, sekarang konten kita sudah jadi untuk browser berukuran besar. Namun apabila ukuran browser kita kecilkan, maka konten menjadi berantakan ya. Kita perlu mengubah konten agar menjadi per baris pada saat ukuran browser kecil. Untuk itu kita perlu menambahkan kode css di dalam @media.

Pertama kita tambahkan dahulu kelas flex-container1 dan kita tambahkan properti flex-direction dengan nilai column. Nah sekarang pada saat ukuran browser kecil, maka sidebar dan main akan bersusun secara vertikal. Perhatikan phone dan address masih terbagi menjadi 2 kolom. Untuk mengubahnya kita tambahkan lagi selector kelas flex-container2 dan kita tambahkan juga flex-direction: column.

Nah, untuk mengubah sidebar menjadi dibawah main, maka kita bisa menambahkan selector .flex-container1 sidebar dan menambahkan properti order dengan nilai 1. Dan berhubung ukuran gambarnya terlalu besar, maka kita perlu mengubah ukurannya menjadi lebih kecil. Kita tambahkan selector .flex-container1 sidebar img dan kita tambahkan width: 75%. Dan untuk mengubah agar gambar berada di tengah layar, kita bisa tambahkan properti text-align:center pada selector .flex-container1 sidebar.

Latihan pada video ini sudah kelar. Sekarang situs portfolio kita sudah tersusun rapi, baik pada saat ukuran browser kecil, maupun ukuran browser besar.

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.