Skip to content

Collaborative project template berupa skeleton front-end techstack html + css + js. Digunakan untuk starter project praktek kolaborasi git. Dapat dikerjakan sampai dengan 6 orang

Notifications You must be signed in to change notification settings

bellshade/squad-html-css-kedaikopi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bellshade Squad (HTML+CSS)

"Hey Squad!!.. Waktunya untuk bergerak bersama mengerjakan sebuah project yang luar biasa" ✨.

Bellshade Squad adalah sebuah template repository yang dapat kamu gunakan untuk belajar kolaborasi bersama teman satu tim menggunakan Git dan GitHub. Squad repository ini berisi skeleton atau rangka dari sebuah project kecil yang dapat dikerjakan bersama-sama secara paralel. Bellshade squad memberikan beberapa task yang dapat ditugaskan ke anggota tim untuk membentuk satu project jadi hasil kerja sama tim. Jadi kamu bebas untuk berkolaborasi dengan cara apapun yang kalian suka ✨.


Tentang template ini / About this template

Template kali ini berisi project kolaborasi tentang HTML+CSS+JS. Agar lebih mudah kami bakal menggunakan project Kedai Kopi WPU dari tutorial yang sudah dibuat Padhika sebagai project yang akan kalian kerjakan pada collaborative squad kali ini bersama teman kalian sebagai satu tim yang solid.

Link tutorial kedai kopi HTML+CSS+JS
👉 Membuat WEBSITE Kedai Kopi RESPONSIVE dengan HTML & CSS dari 0

Goals

Di project ini kalian harus menyelesaikan project web yang sama dengan padhika buat pada tutorial diatas. Semua anggota tim yang kalian pilih harus berkolaborasi setidaknya pada satu task.

Kami bagi menjadi 6 task untuk menyelesaikan project ini, kamu dan anggota timmu dapat membagi tugas-tugas ini.

Lihat task
  1. Navbar (issue)

Navbar disini meliputi:

  • navbar brand (logo)
  • navbar link
  • navbar icon (termasuk toggler)
  • mobile responsive navbar

jangan lupa tentang responsitivity, di layar mobile harus tampak seperti berikut

  1. Jumbotron (issue)

Jumbotron adalah bagian banner besar yang menjadi titik fokus utama pengguna saat sekilas memandang halaman web. Section hero jumbotron meliputi:

  • Background image besar menggunakan ./img/header-bg.jpg
  • Sejumlah title text, dan
  • CTA (click to action)
  • polesan sedikit gradient black to transparent keatas di daerah paling bawah jumbotron untuk menunjukkan kesan dark moody coffee

  1. About Section (issue)

Task ini berisi section tentang apapun berkaitan dengan about us. kurang lebih seperti ini. Jangan lupakan untuk menerapkan responsive mobile.

  1. Menu Section (issue)

Menu section berisi daftar menu minuman kopi yang tersedia, digambarkan dalam card yang berjajar berisi gambar, nama minuman dan harganya. Jangan lupakan untuk menerapkan responsive mobile juga!.

  1. Kontak Kami (issue) Contact section adalah bagian yang menggambarkan kontak dari yang menyediakan kopi ini. Contact terdiri atas:
  • Maps
  • Static Form (nama, email dan no. hp)

  1. Footer (issue) Footer berisi
  • link scrollspy seperti navbar
  • social link
  • credits


Peraturan dan saran

Ada beberapa peraturan yang bisa kalian terapkan untuk integritas pengerjaan project yang lebih baik:

  1. Setiap anggota tim wajib mengerjakan setidaknya satu task
  2. Setiap task yang dikerjakan, harus dikerjakan di branch tersendiri.
    Submit PR saat sudah selesai mengerjakan untuk mendapatkan persetujuan dari anggota lain.
  3. Ketika ada pengajuan PR, tim lain berhak untuk mengkoreksi dengan mereview kode dan mengajukan perubahan (request changes). Si pembuat PR wajib merespon koreksi dari tim lain itu.

Dan berikut saran yang bisa kami berikan:

  1. Tunjuk satu dari anggota untuk menjadi team leader yang bertugas untuk menjaga keberlangsungan kerja tim.
  2. Gunakan project management software seperti trello, jira, clickup atau bahkan di github juga ada yang namanya Github Project.
  3. Terapkan metode manajemen disiplin yang populer seperti Agile Scrum, waterfall dll. (lihat bagian Insight tentang manajemen project) dibawah.

kalian berkesempatan untuk belajar metodologi pengembangan perangkat lunak dengan mini project tim ini. Manfaatkan dengan baik!.


Getting Started

Untuk memulai project kamu perlu repo sebagai codebase satu tim. Kamu dapat gunakan skeleton template yang ada di repository ini dengan cara berikut:

  1. Klik use this template di repo ini.

  1. Beri nama pada repo yang akan kamu buat.

  1. Repo kamu sedang dibuat, tunggu sebentar.

  1. Sudah, repo kamu sudah dibuat.

  1. Ajakin temen kamu untuk selesaikan project ini bareng-bareng. ✨

Insight tentang manajemen project

Ada banyak cara untuk berkolaborasi project namun kami sarankan untuk menggunakan cara yang paling popouler dan banyak digunakan di industri. yaitu "Agile Methodology". Kami sudah buatkan daftar task yang bisa dikerjakan, tinggal bagaimana cara memanajemen task itu agar dapat dikerjakan selaras dengan kebutuhan project dan sesuai dengan sumber daya tim.

Agile Methodology mengedepankan transparansi antar anggota tim. Setiap tim harus dapat memahami apa yang dikerjakan oleh yang lain dan apa gunanya mereka mengerjakan itu sehingga mengerti seperti apa gambarannya saat sudah selesai nanti.

Pada Agile scrum biasanya ada istilah "Sprint" yang artinya masa waktu pengerjaan. Sprint biasanya memiliki durasi 2 minggu tapi tergantung juga apa yang dikerjakan. Satu sprint mempunyai goals yang harapannya di akhir sprint dapat tercapai. Oleh karena itu satu project bisa saja punya banyak sprint. Ada beberapa istilah lain seperti Sprint Planning, Grooming, Daily Standup/Update, Sprint Review, Retrospection. Hal-hal ini biasanya di manajemen oleh scrum master yg biasanya seorang team leader atau PM menggunakan software manajemen project seperti jira atau github projects.
kalian dapat pelajari ini di internet.

"Saya mau coba agile methodologi pakai project squad ini
Terus saya harus mulai dari mana dulu bang?"

Setelah repository kamu dibuat, gunakan software manajemen project. Kami sarankan untuk gunakan saja bawaan github yaitu "Github Projects".

Pertama kita tentukan dulu "SOP" / prosedur kolebnya seperti apa. ketika satu orang mengerjakan satu task, task ini melewati beberapa fase yaitu:

  • Backlog/ToDo : task belum dikerjakan
  • In Progress : task sedang dikerjakan
  • Dev Review : task yang sudah dikerjakan sedang dikoreksi oleh anggota tim lain
  • Reopen : task yang sudah dikerjakan diminta untuk diperbaiki oleh anggota tim lain
  • Done : task sudah selesai

dengan seperti ini kita bisa buat 5 kolom kanban di github projects, jika ada task yang berubah status kita bisa geser saja task itu kanban yg lain. Kemudian buat issue di setiap tasknya lalu tambahkan pada kanban backlog.

Kotak kotak task ini biasa dinamakan tiket, issue atau card (bebas sebutannya seperti apa). Di setiap tiket kamu dapat memberikan detail lagi seperti siapa yang mengerjakan, labels, milestone, atau komentar.

Bantuan

apabila kalian membutuhkan bantuan kalian dapat mengunjungi komunitas WPU Discord di https://discord.gg/wpu. Kunjungi channel #bellshade-discussion kami sebagai maintainer akan berada disana berdiskusi dengan kalian :')

About

Collaborative project template berupa skeleton front-end techstack html + css + js. Digunakan untuk starter project praktek kolaborasi git. Dapat dikerjakan sampai dengan 6 orang

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published