BE BASIC HTML CSS - Final Course Project

Objectives

• Bisa membuat styling halaman web dengan Tailwind CSS.
• Bisa membuat website responsive dengan Tailwind CSS.
• Bisa membuat layout Flexbox dengan Tailwind CSS.
• Bisa membuat styling form dengan Tailwind CSS.
• Bisa membuat styling HTML element dengan Tailwind CSS.

Restrictions

• Wajib menggunakan Tailwind CSS dengan Play CDN.

Acceptance criteria

• Menggunakan Tailwind CSS untuk section.
• Menggunakan Tailwind CSS untuk heading.
• Menggunakan Tailwind CSS untuk komponen yang menggunakan Flexbox.
• Menggunakan Tailwind CSS untuk tampilan layar yang responsive, minimal 2 tampilan layar (Laptop dan Telepon genggam).
• Menggunakan Tailwind CSS untuk form

Directions

Ubahlah styling halaman web yang sudah kalian kerjakan pada assignment sebelumnya dengan Tailwind CSS. Simpan styling CSS pada file yang terpisah dengan file HTML kalian. Tampilan halaman web dibebaskan, namun dalam proses pembuatannya kalian tetap diwajibkan menggunakan Flexbox system dalam penataan setiap elemennya (layouting) dan halaman web yang responsive. Dimana untuk responsive-nya kalian setidaknya wajib memiliki 2 tampilan layar, yaitu laptop dan telepon genggam (mobile phone). Berikut aturan Media Query yang disarankan:

• Telepon genggam: maximum device width 767px
• Laptop: minimum device width 768px

Clue: gunakan breakpoint md

Workspace

Pengerjaan dilakukain dengan struktur file sebagai berikut:

• src/index.html: file ini adalah HTML dari halaman website yang harus di buat
• src/*.css: file stylesheet external jika dibutuhkan

NOTE: src/*.css bermakna file dengan ekstensi .css tidak diatur penamaannya maupun penempatannya selama file tersebut berada di dalam directory src