HTML & CSS - Final Project

Objectives

• Membuat portofolio dalam bentuk HTML dan CSS
• Mampu membuat website statis dengan HTML dan CSS
• Mampu menggunakan Tailwind CSS sebagai alat bantu desain
• Mampu melakukan deployment ke PaaS seperti Netlify

Restrictions

• Tidak boleh mengerjakan pada repositori ini.

Acceptance criteria

• Wajib menggunakan Git sebagai repositori kerja
• Wajib menggunakan Tailwind CSS
• Wajib melakukan deployment ke Netlify
• Wajib memiliki 3 section
  • Section personal info, berisi nama dan deskripsi singkat.
  • Section pendidikan, berisi latar belakang pendidikan, minimal 2 latar pendidikan.
  • Section portofolio, berisi gambar, judul dan deskripsi portofolio.
• Responsive, ketika layar dikecilkan atau dibesarkan, layout akan mengikuti dan tidak berantakan, seperti contoh gambar di akhir README, ketika layar dikecilkan dari 3 kolom berubah menjadi 1 kolom.

Prerequisite

Buatlah sebuah private repository baru untuk menyimpan file pengerjaannya dengan format penamaan student_name-final_project (contoh: dito_bagus-final_project).

Directions:

Buatlah sebuah private repository di Github dan gunakan sebagai repositori kerja. Bagilah proyek menjadi beberapa task dan commit secara berkala sesuai dengan task-nya dan berikan commit message yang sesuai.

Buatlah sebuah website yang memiliki konten mirip dengan CV yang terdiri dari 3 bagian:

• Nama, dan deskripsi singkat. Jadikan nama sebagai h1 dan deskripsi sebagai p
• Latar belakang pendidikan (minimal 2 latar belakang pendidikan, maksimal 4 latar belakang pendidikan), disertai dengan tahun mulai dan tahun selesai (atau tulis "Sekarang" jika pendidikannya masih berjalan). Tambahkan teks Latar Belakang Pendidikan sebagai h1 , dan jadikan masing-masing latar belakang pendidikan sebagai h2 , dengan tahun dari masing-masing latar belakang pendidikan sebagai p .
• 12 portofolio dummy, beserta gambar dummy untuk masing-masing portofolio. Tambahkan teks Portofolio sebagai h1 , judul dari masing-masing judul portofolio sebagai h2 , dan deskripsi dari portofolionya sebagai p .

Tambahkan styling agar website lebih menarik dengan menggunakan CSS:

• Flex bisa digunakan untuk
  • Membagi latar belakang edukasi ke beberapa kolom, mirip dengan yang umum kita jumpai di surat kabar.
  • Membagi portofolio menjadi beberapa kolom agar terlihat rapih. Terapkan konsep responsive
  • Untuk layar kecil (small dan medium), sebaiknya "latar belakang edukasi" berada di satu kolom saja
  • Demikian juga seluruh portofolio sebaiknya menggunakan satu kolom saja, khusus layar kecil
• Tambahkan konsep design website untuk membuat halamannya lebih menarik:
  • Contoh bisa menggunakan shadow, background color, bahkan background-color ber-gradient ( contoh: https://uigradients.com/#SublimeLight)

Gunakan Tailwind CSS untuk mempercantik website:

• Ubahlah font dari heading agar lebih cantik. Gunakan font untuk heading lebih besar dari font teks normal, dan besarnya disesuaikan dengan level dari heading-nya (h2 lebih kecil dari h1, tapi lebih besar dari normal teks)
• Seluruh heading wajib memiliki ketebalan minimal bold

Deploy/hosting website ke Netlify:

• Peserta wajib menggunakan Git untuk deployment ke Netlify

Referensi website:

Tips

• Gunakan background-image untuk membuat gambar dengan bentuk yang lebih fleksibel: Buat container-nya terlebih dahulu sesuai dengan keperluan (berikan rounded, shadow, dan lain sebagainya), baru berikan background-image

Output:

• Sebuah website statis dalam bentuk HTML dan CSS
• Website statis yang dibuat bisa dilihat dengan menggunakan hosting/deployment di Netlify

Output yang harus disubmit ke LMS:

• Link URL deployment Netlify
• Link Repository private
• Hasil screenshoot Deploy log