Code Monkey home page Code Monkey logo

html-css-final's Introduction

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:

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 deploy-log

html-css-final's People

Contributors

firesnaker avatar imam avatar ditobprasetio avatar

Stargazers

Affan Maulana avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.