12

</>

Git

⚡

▲

🌐

FRONT END MASTERCLASS · KELAS 10 · SEMESTER 1

Gabungkan semua skill-mu jadi 1 portfolio nyata yang LIVE di internet 🚀

Git & GitHub Deployment Portfolio Dokumentasi

Tekan → atau klik NEXT untuk mulai · F11 fullscreen

BAB 12Slide 02/23

Peta Perjalanan Bab Ini

Di bab final ini kamu akan menempuh 5 stasiun. Klik kartu untuk melompat ke materinya.

🗄️

1. Git Dasar

Repository, Commit, Push — mesin waktu untuk kode kamu.

🐙

2. GitHub

"Instagram"-nya para developer. Simpan & pamerkan project.

🚀

3. Deployment

GitHub Pages, Netlify, Vercel — buka lapak di internet.

💼

4. Portfolio

Home · About · Skills · Projects · Contact.

🎯

5. Latihan & Tugas

Praktik nyata + rubrik penilaian transparan.

BAB 12Slide 03/23

Recap: Perjalanan Semester 1

Kamu sudah melewati 11 bab. Semua skill itu akan bersatu di Bab 12 ini. 💪

1

Intro SE

2

Comp. Thinking

3

Dasar IT

4

HTML Lanjut

5

CSS Dasar

6

CSS Advanced

7

Bootstrap

8

Responsive

9

JS Dasar

10

JS Intermediate

11

DOM

12

Final Project

Analogi: 11 bab itu seperti mengumpulkan part-part robot. Bab 12 adalah saat kamu merakit & menyalakannya untuk pertama kali. ⚙️

BAB 12Slide 04/23

Git = Tombol "SAVE" di Game RPG

Analogi

Saat main game RPG, kamu menyentuh save point sebelum lawan bos. Kalau kalah, kamu balik ke checkpoint — bukan mulai dari nol.

Penjelasan

Git adalah mesin waktu untuk kode. Setiap kali kamu "save" (commit), Git menyimpan checkpoint yang bisa kamu kunjungi kapan saja. Salah edit? Tinggal balik ke versi sebelumnya.

Contoh Kode

# mulai melacak project (sekali saja)
git init

Output akan muncul di sini…

BAB 12Slide 05/23

Repository = Lemari Arsip Digital

Analogi

Bayangkan lemari arsip berlabel di kantor. Semua dokumen penting tersimpan rapi di satu tempat, gampang dicari, dan tercatat siapa menyimpan apa.

Penjelasan

Repository (repo) adalah "lemari" tempat seluruh file project + riwayat perubahannya disimpan. Folder tersembunyi .git adalah otak yang mencatat semuanya.

Contoh Kode

git init            # buat lemari arsip
ls -la .git         # intip isi otak Git

Output akan muncul di sini…

BAB 12Slide 06/23

Commit = Stempel "Resmi Tersimpan"

Analogi

Seperti stempel "LUNAS" yang dicap petugas pos. Begitu distempel, dokumen jadi resmi & punya tanggal. Commit = cap resmi untuk versi kode kamu.

Penjelasan

Sebelum commit, file masuk staging dulu (git add) — seperti menata barang di meja sebelum dimasukkan map. Lalu git commit memberi cap + pesan penjelasan.

Contoh Kode

git add .                          # tata semua file
git commit -m "first commit"   # cap resmi!

Output akan muncul di sini…

BAB 12Slide 07/23

Push = Upload Foto ke Instagram

Analogi

Foto di galeri HP cuma kamu yang lihat. Begitu kamu upload ke Instagram, semua orang bisa lihat. git push = upload kode dari laptop ke cloud GitHub.

Penjelasan

Commit hanya tersimpan di laptop kamu (lokal). Push mengirim semua commit itu ke server GitHub supaya aman & bisa diakses dari mana saja.

Contoh Kode

git push origin main # kirim ke cloud ☁️

Output akan muncul di sini…

BAB 12Slide 08/23

Alur Lengkap Git Workflow

Satu siklus penuh: dari file kamu edit → sampai online di GitHub. Perhatikan panah menggambar dirinya sendiri. ✍️

1 · git add — tata file 2 · git commit — cap versi 3 · git push — kirim ke cloud 4 · git pull — ambil update

BAB 12Slide 09/23

GitHub = Instagram-nya Developer

@andi/portfolio

⭐ 42 · HTML CSS JS

@sari/game-quiz

⭐ 88 · JavaScript

@budi/toko-online

⭐ 17 · React

@kamu/project-keren

⭐ ? · Coming soon

Analogi

Di Instagram kamu posting foto. Di GitHub kamu "posting" project kode. Orang bisa lihat, kasih bintang ⭐ (like), bahkan ikut bantu (follow/fork).

Penjelasan

GitHub adalah platform online untuk menyimpan repository di cloud, kolaborasi tim, dan memamerkan karya. Profil GitHub yang aktif = CV otomatis buat HRD IT.

Repository = Postingan Star ⭐ = Like Follow = Follow README = Caption

BAB 12Slide 10/23

Membuat Repository di GitHub

Langkah Bergambar

1. Login github.com → klik tombol + New
2. Isi Repository name (cth: portfolio)
3. Pilih Public agar bisa di-deploy gratis
4. Centang Add a README file
5. Klik Create repository ✔

Analogi

Seperti bikin akun toko baru di marketplace: kasih nama toko, pilih publik/privat, lalu toko siap diisi barang.

Tips

Nama repo sebaiknya huruf kecil dan pakai tanda hubung, contoh website-sekolah. Hindari spasi & huruf kapital agar URL rapi.

# URL repo kamu akan jadi:
github.com/username/portfolio

Highlight langkah di kiri berjalan otomatis saat slide aktif.

BAB 12Slide 11/23

Upload Project ke Repository

Uploading project…

0%

📦 ➜ ☁️

Cara Hubungkan Lokal ke GitHub

Setelah repo dibuat, sambungkan folder project kamu ke repo online, lalu push.

# sambungkan ke repo online
git remote add origin https://github.com/username/portfolio.git
# kirim pertama kali (-u set default)
git push -u origin main

Bar progress di kiri akan bergerak 0% → 100%.

BAB 12Slide 12/23

Deployment = Warung Lokal → Warung Online

Analogi

Punya warung di gang sempit = cuma tetangga yang tahu. Buka lapak online = seluruh dunia bisa mampir. Deploy mengubah project lokal jadi website yang punya alamat (URL) publik.

Penjelasan

Deployment adalah proses menaruh website kamu di server internet sehingga punya link yang bisa dibuka siapa saja, kapan saja, dari HP manapun.

Deployment Pipeline

BAB 12Slide 13/23

GitHub Pages = Lapak Gratis di Pasar Raksasa

🚀

username.github.io/portfolio

Analogi

GitHub kasih kamu lapak gratis di dalam pasar online raksasa miliknya. Tidak bayar hosting, langsung dapat alamat .github.io.

Langkah Deploy

Buka repo → tab Settings
Menu kiri → Pages
Source → Branch: main → /root
Klik Save → tunggu ±1 menit
Website LIVE di url .github.io 🎉

100% Gratis · Cocok untuk portfolio statis

BAB 12Slide 14/23

Netlify = Jasa Ekspedisi Drag & Drop

Analogi

Seperti jasa ekspedisi otomatis: kamu cukup taruh paket di loket (drag & drop folder), sisanya mereka urus sampai terkirim. Tidak perlu ribet.

2 Cara Deploy

Cara mudah: seret folder project ke netlify.com/drop → langsung live.
Cara pro: hubungkan repo GitHub → auto-deploy tiap push.

# cara CLI (opsional, untuk yang mau pro)
npm install -g netlify-cli
netlify deploy # ikuti instruksinya

Auto-deploy · Form handling · Gratis

BAB 12Slide 15/23

Vercel = Ojek Online Express Deploy

Analogi & Perbandingan

Vercel = ojol express: deploy super cepat, sekali import repo langsung jadi. Favorit untuk project modern (Next.js, React).

Platform	Kecepatan	Kemudahan	Cocok untuk
GitHub Pages	Sedang	★★★	HTML/CSS statis
Netlify	Cepat	★★★★	Statis + form
Vercel	Sangat cepat	★★★★★	React/Next.js

Speedometer di kiri bergerak 0 → MAX saat slide aktif.

BAB 12Slide 16/23

Portfolio = Kartu Nama Digital Interaktif

NAMA KAMU Frontend Developer 💼

Analogi

Kartu nama biasa cuma kertas. Portfolio website = kartu nama hidup: HRD klik link, langsung lihat skill, project, dan cara menghubungi kamu. Berputar 3D, interaktif, berkesan.

5 Bagian Wajib Portfolio

🏠 Home 👤 About ⚡ Skills 📂 Projects ✉️ Contact

Di 3 slide berikutnya kita bahas tiap bagian + template kodenya yang bisa langsung kamu pakai.

BAB 12Slide 17/23

Portfolio: Home & About

🏠 Home (Hero Section)

Kesan pertama. Nama besar, satu kalimat siapa kamu, tombol ajakan (Lihat Project / Hubungi).

<section id="home">
  <h1>Halo, saya Andi 👋</h1>
  <p>Frontend Developer Pemula</p>
  <a href="#projects">Lihat Karya</a>
</section>

👤 About (Tentang Saya)

Cerita singkat: siapa kamu, sedang belajar apa, dan tujuan kamu. 2–3 kalimat saja.

<section id="about">
  <h2>Tentang Saya</h2>
  <p>Siswa kelas 10 yang suka bikin
     website. Belajar HTML, CSS, JS.</p>
</section>

Tips: tulis About seperti memperkenalkan diri ke teman baru — santai tapi jelas.

BAB 12Slide 18/23

Portfolio: Skills & Projects

⚡ Skills

HTML90%

CSS80%

JavaScript70%

Git & GitHub65%

Bar mengisi otomatis saat slide aktif.

📂 Projects

Tampilkan 3–5 karya terbaik. Setiap project: gambar, judul, deskripsi 1 baris, dan link demo.

<div class="project-card">
  <img src="toko.png">
  <h3>Toko Online</h3>
  <a href="demo-link">Live Demo</a>
</div>

Ingat: kualitas > kuantitas. 3 project rapi lebih baik dari 10 setengah jadi.

BAB 12Slide 19/23

Portfolio: Contact & Dokumentasi (README)

✉️ Contact

Permudah orang menghubungi kamu: email, WhatsApp, LinkedIn, GitHub.

<section id="contact">
  <a href="mailto:kamu@mail.com">📧 Email</a>
  <a href="https://wa.me/62...">💬 WA</a>
</section>

📝 README.md (Dokumentasi)

README = "caption" repo kamu. Jelaskan project + sertakan screenshot.

# Portfolio Saya

Website portfolio pribadi 🌐

## Fitur
- Home, About, Skills, Projects, Contact

## Live Demo
https://username.github.io/portfolio

## Screenshot
![preview](screenshot.png)

BAB 12Slide 20/23

🏆 Pencapaian Kamu di Bab 12

Selamat! Kamu sekarang menguasai siklus penuh seorang developer: tulis kode → simpan → online → pamerkan.

🗄️

Git Master

init · add · commit · push · pull

🐙

GitHub User

Buat repo & upload project

🚀

Deployer

Pages · Netlify · Vercel

💼

Portfolio Builder

5 section website pribadi

📝

Documenter

README & screenshot rapi

🎓

Semester 1 Done

11 bab + final project

Skill ini nyata dipakai developer profesional setiap hari. Kamu sudah selangkah lebih dekat jadi Frontend Engineer! 🔥

BAB 12Slide 21/23

🎯 Latihan 1 — Git & GitHub

Buat repository pertamamu di GitHub dan push sebuah file index.html sederhana ke dalamnya. Centang tiap langkah yang sudah kamu selesaikan!

⏱️ Estimasi: 30 menit

✔Install Git & cek git --version
✔Buat folder project & jalankan git init
✔git add . lalu git commit -m "first"
✔Buat repo baru di GitHub (Public)
✔git remote add origin + git push
✔Cek file sudah muncul di GitHub

0/6 langkah selesai (0%)

📊 Rubrik Penilaian (100 poin)

Kriteria	Poin
Repository berhasil dibuat (Public)	25
Minimal 1 commit dengan pesan jelas	25
File ter-push & tampil di GitHub	30
Nama repo & struktur rapi	20

Catatan Guru

Pastikan siswa memahami beda commit (lokal) vs push (online). Cek pesan commit tidak kosong/asal. Bantu yang error autentikasi GitHub (gunakan Personal Access Token).

BAB 12Slide 22/23

🎯 Latihan 2 — Deploy ke Netlify

Ambil project dari Latihan 1, lalu deploy ke internet menggunakan Netlify sampai punya URL live yang bisa dibuka teman.

⏱️ Estimasi: 20 menit

✔Daftar / login di netlify.com (pakai GitHub)
✔Pilih "Add new site" → Import dari GitHub
✔Pilih repository project kamu
✔Klik Deploy & tunggu sampai selesai
✔Salin URL live & buka di HP
✔Bagikan URL ke teman untuk dicek

0/6 langkah selesai (0%)

📊 Rubrik Penilaian (100 poin)

Kriteria	Poin
Website berhasil deploy (status: Published)	40
URL live dapat dibuka dari perangkat lain	30
Tampilan tidak rusak / sesuai lokal	20
Mengirim link ke guru	10

Catatan Guru

Tekankan keunggulan auto-deploy: tiap git push, Netlify update otomatis. Minta siswa coba edit teks lalu push, lihat website berubah sendiri.

BAB 12Slide 23/23

🏁 Tugas Final — Portfolio Lengkap

Buat website portfolio pribadi berisi 5 section, push ke GitHub, deploy online, dan tulis README. Ini karya pamungkas Semester 1 kamu! 🌟

⏱️ Deadline: 7 hari 🎯 Bobot: 40% nilai bab

✔Section Home (hero + nama + tagline)
✔Section About (cerita singkat)
✔Section Skills (minimal 4 skill)
✔Section Projects (minimal 3 karya)
✔Section Contact (email + sosmed)
✔Push ke GitHub + deploy online
✔README.md + screenshot

0/7 langkah selesai (0%)

📊 Rubrik Penilaian (100 poin)

Kriteria	Poin
Kelengkapan 5 section	25
Tampilan rapi & responsive	20
Berhasil deploy (URL live)	25
Dokumentasi README + screenshot	15
Kreativitas & orisinalitas	15

Catatan Guru

Nilai proses, bukan cuma hasil. Hargai siswa yang berani eksperimen warna/layout. Minta presentasikan portfolio di depan kelas sebagai latihan public speaking.

🎉 Setelah ini: link portfolio bisa kamu taruh di bio Instagram, LinkedIn, atau CV. Ini aset nyata!