BE BASIC HTML CSS - Assignment 1

Objectives

Dapat menggunakan Tag HTML sederhana untuk membuat website.
Dapat membuat form untuk mengirim data.
Dapat menggunakan semantic HTML
Memiliki kemampuan dalam mendesign halaman web menggunakan CSS.
Mampu menggunakan Grid.
Mampu menggunakan Flexbox.
Mampu membuat halaman web menjadi responsive menggunakan Media Query.

Restrictions

Wajib mengerjakan Styling CSS pada file terpisah dengan file HTML.
Tidak boleh menggunakan CSS Framework apapun (Tailwind, Bootstrap dll).

Acceptance criteria

HTML

Minimal terdapat 3 section.
Minimal memiliki 1 tag image / img.
Minimal memiliki 3 tag Heading.
Minimal memiliki 1 tag link / a.
Minimal menggunakan tag Paragraph.
Menggunakan tag untuk membuat form.
Minimal menggunakan 3 semantic HTML.

CSS

Menggunakan CSS dalam proses styling dokumen HTML.
Minimal memiliki 1 (satu) komponen yang menggunakan Grid.
Memiliki grid template columns dan/atau grid template rows untuk pengaturan jumlah template grid.
Memiliki gap untuk pengaturan jarak antar grid.
Minimal memiliki 1 (satu) komponen yang menggunakan Flexbox.
Memiliki pengaturan untuk distribution of space dalam flex container baik secara horizontal maupun vertical.
Minimal memiliki 2 tampilan layar (Laptop dan Telepon genggam).

Directions

Buatlah sebuah halaman website yang digunakan untuk portofolio kalian atau CV.

Di web tersebut kalian wajib memperkenalkan nama lengkap kalian dan deskripsi diri kalian. Jangan lupa untuk menambah foto profesional kalian di website ini.

Kalian bisa menambahkan apapun yang kalian inginkan, seperti skill yang kalian miliki, riwayat sekolah, pengalaman organisasi, portfolio kalian, dll.

Di bagian paling bawah, silakan buatlah sebuah form yang digunakan untuk menghubungi kalian. Form tersebut dapat diisi oleh orang lain dengan mengisi nama, email dan pesan.

Jangan lupa untuk menyertakan link ke sosial media yang kalian ingin tunjukkan, seperti linkedin, github, dll. Jadi ketika orang lain ingin melihat sosial media kalian, mereka bisa mengaksesnya.

Usahakan membuat website yang menarik, agar nantinya website ini dapat kalian jadikan portofolio juga.

Untuk styling, buatlah CSS pada file yang terpisah dengan file HTML kalian. Tampilan halaman web dibebaskan, namun dalam proses pembuatannya kalian diwajibkan menggunakan Grid dan Flexbox system dalam penataan setiap elemennya (layouting) dan Media Query untuk pembuatan halaman web yang responsive. Di mana untuk responsivenya kalian setidaknya wajib memiliki 2 tampilan layar, yaitu laptop dan telepon genggam (mobile phone). Berikut aturan Media Query yang wajib kalian penuhi:

Telepon genggam: min. device width 320px
Laptop: min. device width 1080px

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 selama file tersebut berada di dalam directory src

Berikut contoh halaman web responsive yang perlu kalian buat:

edsamodra / portfolio