Kali ini kita masih melanjutkan pengembangan situs portfolio kita, dan secara khusus kita akan membahas mengenai cara membuat konten bagian education, yang berbentuk card atau kartu seperti yang bisa dilihat di layar. Pada saat browser berukuran besar, konten edukasi ditampilkan dalam 2 kartu yang bersebelahan. Pada setiap kartu, bagian paling atasnya berupa gambar logo universitas, diikuti dengan horizontal rule, dan kemudian nama universitas, gelar dan tahun kuliahnya. Pada saat browser diperkecil, maka jarak antar kedua kartu secara otomatis menyesuaikan dengan ukuran browser. Dan pada saat ukuran browser terlalu kecil, maka kedua kartu disusun secara vertikal.

Sebelum kita melanjutkan coding, pertama saya ingin menginformasikan terlebih dahulu bahwa gambar logo universitas pada video ini diambil dari freepik.com. Jadi apabila teman-teman sedang membutuhkan gambar yang bagus untuk kita taruh pada situs maupun social media kita, maka kita bisa mencari di freepik.com. Sebagai contoh, kita coba melakukan pencarian dengan kata kunci University Logo. Dan disini kita bisa menemukan logo yang akan kita gunakan pada video ini.

Sekarang kita buka kembali coding situs portfolio kita dari video sebelumnya. Bagi teman-teman yang ingin memiliki file source code ini bisa melihat deskripsi pada video. Kita mulai dari bagian HTML terlebih dahulu ya.

Pertama kita buat dahulu tag section dengan class container dan id education. Lalu di dalamnya kita tambahkan tag h1 dengan konten Education. Setelah itu kita buat lagi div dengan kelas flex-container3.

Di dalam flex-container3 ini kita akan membuat konten edukasi dalam bentuk card atau kartu. Pertama kita tambahkan dahulu div dengan kelas card. Setelah itu kita isi kontennya. Pertama tambahkan dahulu tag image dengan source university1.jpg. Lalu kita tambahkan tag horizontal rule. Kita tambahkan tag h3 yang isinya nama universitas, misalnya ABC University. Kita tambahkan lagi tag h4 yang isinya nama jurusan, misalnya Bacheclor of Computer Science. Dan yang terakhir kita tambahkan div dengan isi tahun 2000-2004.

Div dengan kelas card ini bisa kita copy dan kita paste di bawahnya, sehingga kita memiliki 2 kartu. Kita tinggal ganti isinya ya. Image source menjadi university2.jpg. Lalu misalkan nama universitas menjadi University of Lorem Ipsum. Nama jurusan Master of Data Science dan tahunnya 2005-2006.

Nah, bagian HTML kita sudah jadi. Dan ini adalah hasil tampilannya sebelum kita mengatur kode CSS-nya. Bagi teman-teman yang ingin mengerjakan tugas ini sebagai latihan, bisa pause terlebih dahulu video ini dan mencoba di komputer masing-masing. Setelah ini kita akan kembali membahas mengenai cara menambahkan kode CSS-nya.

Sekarang kita lanjutkan untuk mengatur CSS dari konten edukasi kita. Pertama kita geser dahulu kode CSS kita hingga di sebelum @media. Jadi kita akan mengerjakan CSS untuk browser berukuran besar terlebih dahulu.

Pertama perhatikan bahwa pada bagian judul Education dengan konten sebelumnya masih ada jarak. Hal ini terjadi karena tag H1 memiliki margin baik dibagian atas maupun bawahnya. Jadi kita perlu menghilangkan margin tersebut. Kita tambahkan selector #education h1. Lalu kita tambahkan properti margin dengan nilai 0. Nilai 0 tidak memerlukan satuan ya.

Setelah itu kita bisa mengubah posisi teks menjadi di tengah layar, dengan cara menambahkan properti text-align dengan nilai center. Kemudian kita ingin menambahkan jarak pada bagian atas dan bawah judul, namun jarak ini harus memiliki warna latar belakang putih ya. Jadi disini kita menggunakan properti padding. Kita bisa nilai 20px 0.

Selanjutnya kita atur bagian card kita. Pertama tambahkan dahulu selector kelas flex-container3 dan diisikan dengan properti display: flex untuk mengubah bagian ini menjadi flexbox.

Kedua card sudah bersusun ke samping ya. Namun tampilannya masih kurang menarik. Pertama kita tambahkan dahulu selector kelas card. Kita beri border dengan nilai 2px solid grey. Kita ubah bagian sudut kotak menjadi sedikit membulat dengan cara menambahkan properti border-radius dengan nilai 20px. Namun bagian tepi border masih bertabrakan dengan konten ya. Jadi kita perlu menambahkan jarak antar border dengan konten. Kita tambahkan properti padding dengan nilai 20px. Dan kita ubah posisi teks menjadi di tengah dengan cara menambahkan properti text-align dengan nilai center.

Ukuran card masih terlalu besar ya. Untuk mengatur ukuran card ini, kita bisa menambahkan properti flex-basis dengan nilai 220px. Jadi ukuran lebar dari card ini adalah 220 pixel. Namun hasilnya masih belum ada perubahan ya, karena ukuran gambarnya masih tetap besar. Kita tambahkan lagi selector .card img dan kita beri properti width: 100%. Nah, sekarang barulah kartu berukuran seperti yang kita mau.

Pada saat ini kedua kartu masih berdempetan di kiri ya. Kita bisa ubah cara pengaturan jarak kartu dengan menambahkan properti justify-content pada kelas flex-container3. Kita beri nilai space-evenly.

Kemudian kita ingin menambahkan jarak pada bagian bawah kartu. Jadi kita bisa ke selector kelas card. Kita tambahkan margin-bottom dengan nilai 40px.

Sekarang perhatikan diantara konten Jurusan dan Tahun, terdapat jarak 1 baris. Hal ini disebabkan karena tag h4 memiliki margin ya. Kita ingin hilangkan margin bagian bawahnya. Jadi kita tambahkan selector .card h4. Kita beri properti margin-bottom dengan nilai 0. Mungkin terlalu dempet ya. Kita tambahkan sedikit nilainya menjadi 5px.

Dan bagian terakhir yang perlu kita tambahkan adalah di dalam media. Kita bisa menambahkan selector flex-container3 dan memberikan properti flex-direction: column. Agar pada saat browser berukuran kecil, maka kartu akan berubah dari tadinya bersusun ke samping menjadi bersusun ke bawah.

Kita lihat hasilnya pada browser. Sekarang konten education kita sudah bagus untuk browser berukuran besar. Dan pada saat browser berukuran kecil, maka konten akan bersusun ke bawah. Namun untuk konten pada saat browser berukuran kecil ini masih ada kekurangan sedikit ya. Yaitu garis bordernya terlalu dengan dengan tepi kontainer.

Jadi di dalam @media ini kita bisa tambahkan lagi kelas card. Kita tambahkan properti margin dengan nilai 30px 50px. Dan sekarang koten kita pun kelihatan bagus, baik pada saat browser berukuran besar maupun berukuran kecil.

Nantinya teman-teman bisa mengembangkan lebih lanjut lagi ya situs portfolio ini untuk menambahkan bagian-bagian lain seperti experience dan skill.

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.