d80baff1e1
- Update index.html launcher: tambah Group 06-10 (ACAAB, LimaEm, RODA, Tapops, ApeNameTeamE) - Semua 10 halaman grup kini pakai navbar & footer identik dengan prod (Tailwind, mega menu, mobile menu) - Tambah assets/global/output.css dan localization.js untuk dukungan Tailwind dan toggle ID/EN - Buat folder dan index.html untuk Group 06-10 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1001 lines
49 KiB
HTML
1001 lines
49 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Panduan Tugas — Web Statis Kelompok</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap');
|
||
|
||
:root {
|
||
--navy-dark: #0a1628;
|
||
--navy-primary: #1a365d;
|
||
--navy-light: #2d4a6f;
|
||
--gold-primary: #d4a847;
|
||
--gold-light: #e8c56d;
|
||
--gold-dark: #b8922e;
|
||
--white: #ffffff;
|
||
--gray-light: #e8ecf1;
|
||
--gray-text: #a0aec0;
|
||
--accent-blue: #4299e1;
|
||
--accent-green: #48bb78;
|
||
--accent-red: #fc8181;
|
||
--accent-purple: #9f7aea;
|
||
--accent-orange: #ed8936;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Montserrat', sans-serif;
|
||
background: var(--navy-dark);
|
||
color: var(--white);
|
||
}
|
||
|
||
/* ─── SLIDE BASE ─── */
|
||
.slide {
|
||
width: 1280px;
|
||
height: 720px;
|
||
margin: 20px auto;
|
||
background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
page-break-after: always;
|
||
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
|
||
}
|
||
.slide::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -100px; right: -100px;
|
||
width: 400px; height: 400px;
|
||
background: radial-gradient(circle, rgba(212,168,71,0.1) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
}
|
||
.corner-accent {
|
||
position: absolute;
|
||
width: 150px; height: 150px;
|
||
border: 3px solid var(--gold-primary);
|
||
opacity: 0.3;
|
||
}
|
||
.corner-accent.top-left { top:20px; left:20px; border-right:none; border-bottom:none; }
|
||
.corner-accent.bottom-right { bottom:20px; right:20px; border-left:none; border-top:none; }
|
||
.slide-number {
|
||
position: absolute;
|
||
bottom: 30px; right: 40px;
|
||
font-size: 14px; color: var(--gold-primary); font-weight: 600;
|
||
}
|
||
.progress-bar {
|
||
position: absolute;
|
||
bottom: 0; left: 0; height: 4px;
|
||
background: linear-gradient(90deg, var(--gold-primary), var(--gold-light));
|
||
}
|
||
|
||
/* ─── TITLE SLIDE ─── */
|
||
.title-slide {
|
||
display: flex; flex-direction: column;
|
||
justify-content: center; align-items: center;
|
||
text-align: center; padding: 60px;
|
||
}
|
||
.title-slide .meeting-badge {
|
||
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
||
color: var(--navy-dark);
|
||
padding: 12px 40px; border-radius: 50px;
|
||
font-size: 16px; font-weight: 700;
|
||
margin-bottom: 36px;
|
||
text-transform: uppercase; letter-spacing: 3px;
|
||
}
|
||
.title-slide h1 {
|
||
font-size: 50px; font-weight: 800; margin-bottom: 16px;
|
||
background: linear-gradient(135deg, var(--white), var(--gray-light));
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
background-clip: text; line-height: 1.2;
|
||
}
|
||
.title-slide .subtitle { font-size: 22px; color: var(--gold-light); font-weight: 500; margin-bottom: 50px; }
|
||
.title-slide .lecturer-name { font-size: 20px; font-weight: 600; }
|
||
.title-slide .lecturer-title { font-size: 14px; color: var(--gray-text); margin-top: 6px; }
|
||
.title-slide .semester {
|
||
margin-top: 18px; padding: 10px 30px;
|
||
border: 2px solid var(--gold-primary); border-radius: 30px;
|
||
font-size: 13px; color: var(--gold-primary);
|
||
}
|
||
|
||
/* ─── CONTENT SLIDE ─── */
|
||
.content-slide { padding: 50px 60px; }
|
||
.content-slide .slide-header {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
margin-bottom: 32px; padding-bottom: 16px;
|
||
border-bottom: 2px solid rgba(212,168,71,0.3);
|
||
}
|
||
.content-slide h2 { font-size: 34px; font-weight: 700; }
|
||
.content-slide h2 span { color: var(--gold-primary); }
|
||
.topic-badge {
|
||
background: rgba(212,168,71,0.2); color: var(--gold-light);
|
||
padding: 8px 20px; border-radius: 20px;
|
||
font-size: 12px; font-weight: 600;
|
||
text-transform: uppercase; letter-spacing: 1px;
|
||
}
|
||
|
||
/* ─── CARD GRID ─── */
|
||
.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 24px; }
|
||
.card-grid.two-col { grid-template-columns: repeat(2,1fr); }
|
||
.card-grid.four-col { grid-template-columns: repeat(4,1fr); }
|
||
.card {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
|
||
border-radius: 16px; padding: 28px; text-align: center;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.card-icon { font-size: 44px; margin-bottom: 16px; }
|
||
.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--gold-light); }
|
||
.card p { font-size: 12px; color: var(--gray-text); line-height: 1.55; }
|
||
|
||
/* ─── DEFINITION BOX ─── */
|
||
.definition-box {
|
||
background: linear-gradient(135deg, rgba(212,168,71,0.15), rgba(212,168,71,0.05));
|
||
border: 2px solid rgba(212,168,71,0.3); border-radius: 20px;
|
||
padding: 28px 34px; margin: 20px 0;
|
||
}
|
||
.definition-box .label {
|
||
color: var(--gold-primary); font-size: 11px; font-weight: 700;
|
||
text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;
|
||
}
|
||
.definition-box p { font-size: 18px; line-height: 1.65; }
|
||
|
||
/* ─── AGENDA ─── */
|
||
.agenda-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 22px; }
|
||
.agenda-item {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
|
||
border-radius: 16px; padding: 20px 24px;
|
||
display: flex; align-items: center; gap: 16px;
|
||
border-left: 4px solid var(--gold-primary);
|
||
}
|
||
.agenda-number {
|
||
width: 44px; height: 44px; flex-shrink: 0;
|
||
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
||
border-radius: 12px; display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px; font-weight: 800; color: var(--navy-dark);
|
||
}
|
||
.agenda-text h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
|
||
.agenda-text p { font-size: 12px; color: var(--gray-text); }
|
||
|
||
/* ─── CODE BLOCK ─── */
|
||
.code-block {
|
||
background: #0d1117; border-radius: 12px;
|
||
padding: 20px 24px; margin: 14px 0;
|
||
font-family: 'Source Code Pro', monospace;
|
||
font-size: 13px; line-height: 1.7;
|
||
border: 1px solid #30363d;
|
||
}
|
||
.code-block .comment { color: #8b949e; }
|
||
.code-block .tag { color: #7ee787; }
|
||
.code-block .attr { color: #79c0ff; }
|
||
.code-block .val { color: #a5d6ff; }
|
||
.code-block .text { color: #e6edf3; }
|
||
.code-block .cmd { color: #ffa657; }
|
||
.code-block .ok { color: #56d364; }
|
||
|
||
/* ─── TWO-COLUMN ─── */
|
||
.two-col-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 22px; }
|
||
.col-section h3 {
|
||
font-size: 14px; font-weight: 700; color: var(--gold-primary);
|
||
margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px;
|
||
}
|
||
|
||
/* ─── STEPS ─── */
|
||
.steps { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
|
||
.step {
|
||
display: flex; align-items: flex-start; gap: 16px;
|
||
background: rgba(255,255,255,0.05); border-radius: 12px; padding: 16px 20px;
|
||
}
|
||
.step-num {
|
||
width: 32px; height: 32px; flex-shrink: 0;
|
||
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
||
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px; font-weight: 800; color: var(--navy-dark);
|
||
}
|
||
.step-body h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--gold-light); }
|
||
.step-body p { font-size: 12px; color: var(--gray-text); line-height: 1.5; }
|
||
|
||
/* ─── CALLOUT ─── */
|
||
.callout {
|
||
display: flex; align-items: flex-start; gap: 14px;
|
||
border-radius: 14px; padding: 18px 22px; margin: 14px 0;
|
||
}
|
||
.callout.info { background: rgba(66,153,225,0.1); border-left: 4px solid var(--accent-blue); }
|
||
.callout.warn { background: rgba(237,137,54,0.1); border-left: 4px solid var(--accent-orange); }
|
||
.callout.success { background: rgba(72,187,120,0.1); border-left: 4px solid var(--accent-green); }
|
||
.callout.danger { background: rgba(252,129,129,0.1); border-left: 4px solid var(--accent-red); }
|
||
.callout-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
|
||
.callout-body h4 { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
|
||
.callout-body p { font-size: 12px; color: var(--gray-text); line-height: 1.5; }
|
||
|
||
/* ─── BULLET LIST ─── */
|
||
.bullet-list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
|
||
.bullet-list li {
|
||
display: flex; align-items: flex-start; gap: 12px;
|
||
font-size: 14px; color: var(--gray-light); line-height: 1.5;
|
||
}
|
||
.bullet-list li::before { content: '▸'; color: var(--gold-primary); font-size: 12px; flex-shrink: 0; margin-top: 3px; }
|
||
|
||
/* ─── TAG ROW ─── */
|
||
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
|
||
.tag {
|
||
background: rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 25px;
|
||
font-size: 12px; font-weight: 500; border: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
.tag.gold { background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark)); color: var(--navy-dark); border: none; font-weight: 700; }
|
||
.tag.green { background: rgba(72,187,120,0.2); color: var(--accent-green); border-color: rgba(72,187,120,0.3); }
|
||
.tag.blue { background: rgba(66,153,225,0.2); color: var(--accent-blue); border-color: rgba(66,153,225,0.3); }
|
||
.tag.red { background: rgba(252,129,129,0.2); color: var(--accent-red); border-color: rgba(252,129,129,0.3); }
|
||
|
||
/* ─── VISUAL MOCK / BROWSER FRAME ─── */
|
||
.browser-frame {
|
||
background: #1e2a3a; border-radius: 12px; overflow: hidden;
|
||
border: 1px solid #30363d;
|
||
}
|
||
.browser-bar {
|
||
background: #2d3748; padding: 10px 16px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.browser-dot { width: 12px; height: 12px; border-radius: 50%; }
|
||
.browser-dot.red { background: #fc8181; }
|
||
.browser-dot.yellow { background: #f6e05e; }
|
||
.browser-dot.green { background: #68d391; }
|
||
.browser-url {
|
||
flex: 1; background: #1a202c; border-radius: 6px;
|
||
padding: 5px 12px; font-size: 12px; color: var(--gray-text);
|
||
font-family: 'Source Code Pro', monospace; margin-left: 10px;
|
||
}
|
||
.browser-content { padding: 0; }
|
||
|
||
/* ─── PAGE PREVIEW MOCK ─── */
|
||
.page-mock {
|
||
background: #f8fafc; padding: 16px 20px; font-family: Arial, sans-serif;
|
||
}
|
||
.page-mock .mock-nav {
|
||
background: #003150; color: #fff; padding: 8px 14px;
|
||
font-size: 11px; font-weight: 700; margin: -16px -20px 12px;
|
||
}
|
||
.page-mock .mock-hero {
|
||
background: linear-gradient(135deg, #003150, #1a365d);
|
||
color: #fff; padding: 14px; margin-bottom: 12px; border-radius: 4px;
|
||
}
|
||
.page-mock .mock-hero .mock-title { font-size: 13px; font-weight: 700; }
|
||
.page-mock .mock-body-area {
|
||
background: #fff; border: 2px dashed #d4a847; border-radius: 6px;
|
||
padding: 12px; font-size: 11px; color: #475569;
|
||
}
|
||
.page-mock .mock-body-area .area-label {
|
||
color: #d4a847; font-size: 10px; font-weight: 700;
|
||
text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
|
||
}
|
||
|
||
/* ─── COMPARISON TABLE ─── */
|
||
.comparison-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
|
||
.comparison-table th {
|
||
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
||
color: var(--navy-dark); padding: 14px 16px;
|
||
text-align: left; font-size: 13px; font-weight: 700;
|
||
}
|
||
.comparison-table th:first-child { border-radius: 12px 0 0 0; }
|
||
.comparison-table th:last-child { border-radius: 0 12px 0 0; }
|
||
.comparison-table td {
|
||
padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
font-size: 13px; color: var(--gray-light);
|
||
}
|
||
.comparison-table tr:nth-child(even) { background: rgba(255,255,255,0.03); }
|
||
|
||
@media print {
|
||
body { background: white; }
|
||
.slide { margin: 0; box-shadow: none; page-break-after: always; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 1 — COVER
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide title-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
<div class="corner-accent bottom-right"></div>
|
||
|
||
<div class="meeting-badge">Tugas Kelompok</div>
|
||
<h1>Panduan Pengerjaan<br>Halaman Web Statis</h1>
|
||
<div class="subtitle">Starter Kit · HTML/CSS · Submission via Git</div>
|
||
|
||
<div>
|
||
<div class="lecturer-name">Program Studi Informatika — UNTAN</div>
|
||
<div class="lecturer-title">Mata Kuliah Pemrograman Web</div>
|
||
<div class="semester">Semester Genap 2025/2026</div>
|
||
</div>
|
||
|
||
<div class="progress-bar" style="width:6%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 2 — OVERVIEW TUGAS
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Apa <span>Tugas Ini?</span></h2>
|
||
<span class="topic-badge">Overview</span>
|
||
</div>
|
||
|
||
<div class="definition-box">
|
||
<div class="label">Deskripsi Tugas</div>
|
||
<p>Setiap kelompok membuat <strong style="color:var(--gold-light)">satu halaman web statis</strong> bertema bebas menggunakan HTML & CSS. Halaman dikerjakan di dalam starter kit yang disediakan dosen, lalu dikumpulkan melalui <strong style="color:var(--gold-light)">Pull Request di GitHub</strong>.</p>
|
||
</div>
|
||
|
||
<div class="card-grid" style="margin-top:20px">
|
||
<div class="card">
|
||
<div class="card-icon">📁</div>
|
||
<h3>Starter Kit</h3>
|
||
<p>Template siap pakai dengan layout, navigasi, dan footer sudah dibuat. Kelompok hanya mengisi konten.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">✏️</div>
|
||
<h3>Area Edit</h3>
|
||
<p>Satu area terbatas di dalam HTML yang boleh diubah: <code style="background:#1a2332;padding:2px 6px;border-radius:4px">#assignment-body</code></p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🔀</div>
|
||
<h3>Submit via Git</h3>
|
||
<p>Push ke branch kelompok, buat Pull Request, dosen review & merge. Tidak ada upload file manual.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">02 / 12</div>
|
||
<div class="progress-bar" style="width:15%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 3 — STRUKTUR STARTER KIT
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Struktur <span>Starter Kit</span></h2>
|
||
<span class="topic-badge">File Tree</span>
|
||
</div>
|
||
|
||
<div class="two-col-layout">
|
||
<div>
|
||
<div class="code-block">
|
||
<span class="ok">web-tugas-kelompok/</span>
|
||
<span class="attr">│</span>
|
||
<span class="attr">├── assets/</span>
|
||
<span class="attr">│ └── global/</span>
|
||
<span class="val">│ ├── hero.webp </span><span class="comment">← gambar hero</span>
|
||
<span class="val">│ ├── logo.png </span><span class="comment">← logo UNTAN</span>
|
||
<span class="val">│ └── footer.png </span><span class="comment">← ornamen footer</span>
|
||
<span class="attr">│</span>
|
||
<span class="attr">├── groups/</span>
|
||
<span class="attr">│ ├── group-01/</span>
|
||
<span class="ok">│ │ ├── index.html</span> <span class="comment">← EDIT DI SINI</span>
|
||
<span class="ok">│ │ └── style.css</span> <span class="comment">← styling tambahan</span>
|
||
<span class="attr">│ ├── group-02/ ...</span>
|
||
<span class="attr">│ └── group-05/ ...</span>
|
||
<span class="attr">│</span>
|
||
<span class="attr">├── package.json</span>
|
||
<span class="attr">├── .gitignore</span>
|
||
<span class="attr">└── README.md</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Aturan Folder</h3>
|
||
<ul class="bullet-list">
|
||
<li>Setiap kelompok <strong style="color:var(--gold-light)">hanya boleh</strong> menyentuh folder <code style="background:#1a2332;padding:1px 6px;border-radius:3px">groups/group-XX/</code> miliknya</li>
|
||
<li>Folder <code style="background:#1a2332;padding:1px 6px;border-radius:3px">assets/global/</code> adalah milik bersama — <strong style="color:var(--accent-red)">jangan diubah</strong></li>
|
||
<li>File di luar <code style="background:#1a2332;padding:1px 6px;border-radius:3px">groups/</code> (package.json, README) — <strong style="color:var(--accent-red)">jangan diubah</strong></li>
|
||
<li>Boleh menambah gambar sendiri di dalam folder kelompok</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="callout warn" style="margin-top:20px">
|
||
<div class="callout-icon">⚠️</div>
|
||
<div class="callout-body">
|
||
<h4>Mengapa dibatasi?</h4>
|
||
<p>5 kelompok bekerja di repo yang sama. Jika semua mengedit file yang sama, akan terjadi konflik yang sulit diselesaikan.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">03 / 12</div>
|
||
<div class="progress-bar" style="width:24%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 4 — TAMPILAN HALAMAN & AREA EDIT
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Tampilan <span>Halaman & Area Edit</span></h2>
|
||
<span class="topic-badge">Visual Guide</span>
|
||
</div>
|
||
|
||
<div class="two-col-layout">
|
||
<div>
|
||
<div class="browser-frame">
|
||
<div class="browser-bar">
|
||
<div class="browser-dot red"></div>
|
||
<div class="browser-dot yellow"></div>
|
||
<div class="browser-dot green"></div>
|
||
<div class="browser-url">groups/group-02/index.html</div>
|
||
</div>
|
||
<div class="browser-content">
|
||
<div class="page-mock">
|
||
<div class="mock-nav">Informatika UNTAN — Static Assignment</div>
|
||
<div class="mock-hero">
|
||
<div style="font-size:9px;color:rgba(255,255,255,0.6);margin-bottom:4px">▶ HALAMAN STATIS</div>
|
||
<div class="mock-title">Judul Halaman Group 02</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 200px;gap:10px">
|
||
<div>
|
||
<div style="font-size:9px;color:#94a3b8;margin-bottom:8px">Kelompok 02 · 2026</div>
|
||
<div style="background:#e2e8f0;height:60px;border-radius:4px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#94a3b8">Header Image</div>
|
||
<div class="mock-body-area">
|
||
<div class="area-label">✏️ #assignment-body — Area Edit Kelompok</div>
|
||
<div style="height:50px;background:rgba(212,168,71,0.05);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#d4a847">Tulis konten di sini ↓</div>
|
||
</div>
|
||
</div>
|
||
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;padding:8px;font-size:9px;color:#94a3b8">
|
||
<strong style="display:block;margin-bottom:4px;color:#475569">CATATAN TUGAS</strong>
|
||
Ubah hanya area #assignment-body
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Yang Sudah Tersedia (Jangan Diubah)</h3>
|
||
<ul class="bullet-list" style="gap:8px">
|
||
<li>Navigasi bar atas dengan nama mata kuliah</li>
|
||
<li>Section hero dengan gambar latar</li>
|
||
<li>Header halaman dengan badge & judul</li>
|
||
<li>Meta info (kelompok, tahun)</li>
|
||
<li>Placeholder cover image</li>
|
||
<li>Sidebar "Catatan Tugas"</li>
|
||
<li>Footer dengan logo & ornamen</li>
|
||
</ul>
|
||
</div>
|
||
<div class="callout success" style="margin-top:16px">
|
||
<div class="callout-icon">✅</div>
|
||
<div class="callout-body">
|
||
<h4>Yang Kelompok Kerjakan</h4>
|
||
<p>Hanya isi div <code style="background:#1a2332;padding:1px 6px;border-radius:3px"><div id="assignment-body"></code> dengan konten HTML bertema pilihan kelompok.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">04 / 12</div>
|
||
<div class="progress-bar" style="width:32%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 5 — STRUKTUR HTML YANG BOLEH DIPAKAI
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Elemen HTML <span>yang Bisa Dipakai</span></h2>
|
||
<span class="topic-badge">HTML Reference</span>
|
||
</div>
|
||
|
||
<div class="two-col-layout">
|
||
<div>
|
||
<div class="code-block">
|
||
<span class="comment"><!-- Judul dan teks --></span>
|
||
<span class="tag"><h2></span><span class="text">Judul Utama</span><span class="tag"></h2></span>
|
||
<span class="tag"><h3></span><span class="text">Sub-judul</span><span class="tag"></h3></span>
|
||
<span class="tag"><p></span><span class="text">Paragraf konten...</span><span class="tag"></p></span>
|
||
|
||
<span class="comment"><!-- List --></span>
|
||
<span class="tag"><ul></span>
|
||
<span class="tag"><li></span><span class="text">Item satu</span><span class="tag"></li></span>
|
||
<span class="tag"><li></span><span class="text">Item dua</span><span class="tag"></li></span>
|
||
<span class="tag"></ul></span>
|
||
|
||
<span class="comment"><!-- Gambar --></span>
|
||
<span class="tag"><img</span> <span class="attr">src=</span><span class="val">"./foto.jpg"</span> <span class="attr">alt=</span><span class="val">"Keterangan"</span><span class="tag">></span>
|
||
|
||
<span class="comment"><!-- Kutipan --></span>
|
||
<span class="tag"><blockquote></span><span class="text">Kutipan penting</span><span class="tag"></blockquote></span>
|
||
|
||
<span class="comment"><!-- Tabel --></span>
|
||
<span class="tag"><table></span>
|
||
<span class="tag"><tr><th></span><span class="text">Kolom 1</span><span class="tag"></th><th></span><span class="text">Kolom 2</span><span class="tag"></th></tr></span>
|
||
<span class="tag"><tr><td></span><span class="text">Data</span><span class="tag"></td><td></span><span class="text">Data</span><span class="tag"></td></tr></span>
|
||
<span class="tag"></table></span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Semua sudah punya styling CSS</h3>
|
||
<p style="font-size:13px;color:var(--gray-text);margin-bottom:16px">Class <code style="background:#1a2332;padding:2px 6px;border-radius:3px">.article-body</code> di style.css sudah menyediakan tampilan untuk elemen-elemen ini. Tidak perlu menulis CSS dari nol.</p>
|
||
|
||
<div class="tag-row">
|
||
<span class="tag green">h2, h3, h4</span>
|
||
<span class="tag green">p</span>
|
||
<span class="tag green">ul / ol / li</span>
|
||
<span class="tag green">img</span>
|
||
<span class="tag green">blockquote</span>
|
||
<span class="tag green">table</span>
|
||
<span class="tag green">code</span>
|
||
<span class="tag green">a (link)</span>
|
||
<span class="tag green">strong / em</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout info" style="margin-top:18px">
|
||
<div class="callout-icon">🎨</div>
|
||
<div class="callout-body">
|
||
<h4>CSS Tambahan</h4>
|
||
<p>Ingin tampilan yang lebih custom? Tambahkan di <code style="background:#1a2332;padding:1px 6px;border-radius:3px">groups/group-XX/style.css</code>. Jangan mengubah CSS milik kelompok lain.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">05 / 12</div>
|
||
<div class="progress-bar" style="width:41%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 6 — CONTOH KONTEN LENGKAP
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Contoh <span>Konten Lengkap</span></h2>
|
||
<span class="topic-badge">Contoh Pengerjaan</span>
|
||
</div>
|
||
|
||
<div class="two-col-layout">
|
||
<div>
|
||
<div class="code-block" style="font-size:12px">
|
||
<span class="comment"><!-- START: BAGIAN YANG DIEDIT KELOMPOK --></span>
|
||
|
||
<span class="tag"><h2></span><span class="text">Kecerdasan Buatan di Era Modern</span><span class="tag"></h2></span>
|
||
<span class="tag"><p></span><span class="text">Kecerdasan buatan (AI) telah mengubah cara
|
||
kita bekerja dalam dekade terakhir...</span><span class="tag"></p></span>
|
||
|
||
<span class="tag"><h3></span><span class="text">Aplikasi AI di Kehidupan Sehari-hari</span><span class="tag"></h3></span>
|
||
<span class="tag"><ul></span>
|
||
<span class="tag"><li></span><span class="text">Asisten virtual (Siri, Google Assistant)</span><span class="tag"></li></span>
|
||
<span class="tag"><li></span><span class="text">Rekomendasi konten di media sosial</span><span class="tag"></li></span>
|
||
<span class="tag"><li></span><span class="text">Deteksi wajah di kamera smartphone</span><span class="tag"></li></span>
|
||
<span class="tag"></ul></span>
|
||
|
||
<span class="tag"><blockquote></span>
|
||
<span class="text">"AI is the new electricity." — Andrew Ng</span>
|
||
<span class="tag"></blockquote></span>
|
||
|
||
<span class="tag"><img</span> <span class="attr">src=</span><span class="val">"./gambar-ai.jpg"</span> <span class="attr">alt=</span><span class="val">"Ilustrasi AI"</span><span class="tag">></span>
|
||
|
||
<span class="comment"><!-- END: BAGIAN YANG DIEDIT KELOMPOK --></span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Ide Tema Halaman</h3>
|
||
<div class="card-grid" style="grid-template-columns:repeat(2,1fr);gap:12px;margin-top:0">
|
||
<div class="card" style="padding:18px">
|
||
<div class="card-icon" style="font-size:32px">💻</div>
|
||
<h3 style="font-size:14px">Teknologi & Inovasi</h3>
|
||
</div>
|
||
<div class="card" style="padding:18px">
|
||
<div class="card-icon" style="font-size:32px">🌏</div>
|
||
<h3 style="font-size:14px">Budaya & Pariwisata</h3>
|
||
</div>
|
||
<div class="card" style="padding:18px">
|
||
<div class="card-icon" style="font-size:32px">📚</div>
|
||
<h3 style="font-size:14px">Pendidikan</h3>
|
||
</div>
|
||
<div class="card" style="padding:18px">
|
||
<div class="card-icon" style="font-size:32px">🌿</div>
|
||
<h3 style="font-size:14px">Lingkungan Hidup</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout warn" style="margin-top:14px">
|
||
<div class="callout-icon">⚠️</div>
|
||
<div class="callout-body">
|
||
<h4>Jangan gunakan JavaScript</h4>
|
||
<p>Tugas ini fokus pada HTML & CSS murni. Script tag tidak akan dinilai dan tidak diperlukan.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">06 / 12</div>
|
||
<div class="progress-bar" style="width:50%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 7 — MENJALANKAN LOKAL
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Menjalankan <span>di Komputer Lokal</span></h2>
|
||
<span class="topic-badge">Dev Server</span>
|
||
</div>
|
||
|
||
<div class="two-col-layout">
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Cara 1 — Buka Langsung (Paling Mudah)</h3>
|
||
<div class="steps" style="gap:10px">
|
||
<div class="step" style="padding:14px 18px">
|
||
<div class="step-num">1</div>
|
||
<div class="step-body">
|
||
<h4>Buka File Explorer</h4>
|
||
<p>Masuk ke folder <code style="background:#1a2332;padding:1px 6px;border-radius:3px">groups/group-XX/</code></p>
|
||
</div>
|
||
</div>
|
||
<div class="step" style="padding:14px 18px">
|
||
<div class="step-num">2</div>
|
||
<div class="step-body">
|
||
<h4>Double-click index.html</h4>
|
||
<p>Browser akan membuka halaman. Refresh setiap kali ada perubahan.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout info" style="margin-top:16px">
|
||
<div class="callout-icon">⚡</div>
|
||
<div class="callout-body">
|
||
<h4>Cara 2 — Live Server (Lebih Nyaman)</h4>
|
||
<p>Install ekstensi <strong>Live Server</strong> di VS Code → klik kanan <code style="background:#1a2332;padding:1px 6px;border-radius:3px">index.html</code> → "Open with Live Server". Halaman auto-refresh saat file disimpan.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Cara 3 — Vite Dev Server (Opsional)</h3>
|
||
<p style="font-size:13px;color:var(--gray-text);margin-bottom:12px">Jika Node.js sudah terinstall, bisa pakai dev server yang lebih canggih:</p>
|
||
<div class="code-block" style="margin:0">
|
||
<span class="comment"># Install dependensi (sekali saja)</span>
|
||
<span class="cmd">npm install</span>
|
||
|
||
<span class="comment"># Jalankan dev server</span>
|
||
<span class="cmd">npm run dev</span>
|
||
|
||
<span class="comment"># Browser buka otomatis di</span>
|
||
<span class="ok">http://localhost:5173</span>
|
||
|
||
<span class="comment"># Build untuk deploy</span>
|
||
<span class="cmd">npm run build</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">07 / 12</div>
|
||
<div class="progress-bar" style="width:58%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 8 — WORKFLOW PENGERJAAN
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Workflow <span>Pengerjaan Tugas</span></h2>
|
||
<span class="topic-badge">Step by Step</span>
|
||
</div>
|
||
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<div class="step-body">
|
||
<h4>Clone Starter Kit</h4>
|
||
<p><code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git clone <URL-repo-dari-dosen></code> — unduh ke komputer masing-masing</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-body">
|
||
<h4>Buat Branch Kelompok</h4>
|
||
<p><code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git checkout -b group-02</code> — satu branch per kelompok, jangan berbagi branch</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<div class="step-body">
|
||
<h4>Edit & Commit Berkala</h4>
|
||
<p>Edit <code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#a5d6ff">groups/group-02/index.html</code> → <code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git add .</code> → <code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git commit -m "feat(group-02): …"</code> — lakukan minimal 3 kali commit</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<div class="step-body">
|
||
<h4>Push ke GitHub</h4>
|
||
<p><code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git push origin group-02</code> — kirim branch ke remote repository</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">5</div>
|
||
<div class="step-body">
|
||
<h4>Buat Pull Request di GitHub</h4>
|
||
<p>Buka GitHub → pilih branch → klik <strong style="color:var(--gold-light)">"Compare & pull request"</strong> → isi nama kelompok, anggota, deskripsi konten → submit</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">08 / 12</div>
|
||
<div class="progress-bar" style="width:66%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 9 — ATURAN & LARANGAN
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Aturan <span>& Larangan</span></h2>
|
||
<span class="topic-badge">Penting!</span>
|
||
</div>
|
||
|
||
<div class="two-col-layout">
|
||
<div>
|
||
<div class="col-section">
|
||
<h3 style="color:var(--accent-green)">✅ Yang BOLEH Dilakukan</h3>
|
||
</div>
|
||
<ul class="bullet-list">
|
||
<li>Edit konten di dalam <code style="background:#1a2332;padding:1px 6px;border-radius:3px">#assignment-body</code></li>
|
||
<li>Menambah class CSS baru di <code style="background:#1a2332;padding:1px 6px;border-radius:3px">style.css</code> kelompok sendiri</li>
|
||
<li>Menambah gambar di folder <code style="background:#1a2332;padding:1px 6px;border-radius:3px">groups/group-XX/</code></li>
|
||
<li>Mengubah judul di tag <code style="background:#1a2332;padding:1px 6px;border-radius:3px"><title></code> dan <code style="background:#1a2332;padding:1px 6px;border-radius:3px"><h1></code> hero</li>
|
||
<li>Mengubah teks meta (nama kelompok, tahun)</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<div class="col-section">
|
||
<h3 style="color:var(--accent-red)">❌ Yang TIDAK BOLEH Dilakukan</h3>
|
||
</div>
|
||
<ul class="bullet-list">
|
||
<li>Mengubah path asset global (<code style="background:#1a2332;padding:1px 6px;border-radius:3px">../../assets/global/…</code>)</li>
|
||
<li>Menyentuh file kelompok lain</li>
|
||
<li>Mengubah layout HTML di luar <code style="background:#1a2332;padding:1px 6px;border-radius:3px">#assignment-body</code></li>
|
||
<li>Push langsung ke branch <code style="background:#1a2332;padding:1px 6px;border-radius:3px">main</code></li>
|
||
<li>Mengubah <code style="background:#1a2332;padding:1px 6px;border-radius:3px">package.json</code>, <code style="background:#1a2332;padding:1px 6px;border-radius:3px">.gitignore</code>, <code style="background:#1a2332;padding:1px 6px;border-radius:3px">README.md</code></li>
|
||
<li>Menambahkan tag <code style="background:#1a2332;padding:1px 6px;border-radius:3px"><script></code></li>
|
||
</ul>
|
||
|
||
<div class="callout danger" style="margin-top:14px">
|
||
<div class="callout-icon">🚫</div>
|
||
<div class="callout-body">
|
||
<h4>Konsekuensi Pelanggaran</h4>
|
||
<p>PR yang mengubah file di luar scope kelompok akan <strong>ditolak</strong> dan diminta diperbaiki sebelum dinilai.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">09 / 12</div>
|
||
<div class="progress-bar" style="width:75%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 10 — TIPS KOLABORASI DALAM KELOMPOK
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Tips <span>Kolaborasi Kelompok</span></h2>
|
||
<span class="topic-badge">Teamwork</span>
|
||
</div>
|
||
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<div class="card-icon">🗂️</div>
|
||
<h3>Bagi Bagian Konten</h3>
|
||
<p>Bagi halaman menjadi beberapa seksi. Setiap anggota mengerjakan seksi yang berbeda agar tidak saling tindih.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">💬</div>
|
||
<h3>Komunikasi Aktif</h3>
|
||
<p>Beritahu tim sebelum push. Kalau ada yang sedang edit, tunggu sampai selesai dan di-commit dulu.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">📝</div>
|
||
<h3>Commit Sering</h3>
|
||
<p>Lebih baik commit kecil-kecil daripada satu commit besar di akhir. Lebih mudah di-review dan di-rollback.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🔄</div>
|
||
<h3>Pull Sebelum Push</h3>
|
||
<p>Selalu <code style="background:#1a2332;padding:2px 6px;border-radius:4px">git pull</code> sebelum mulai kerja agar versi lokal kamu selalu up-to-date.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">👁️</div>
|
||
<h3>Review Sesama</h3>
|
||
<p>Sebelum submit PR, minta satu anggota lain untuk membaca ulang HTML yang dibuat. Empat mata lebih baik dari dua.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">📋</div>
|
||
<h3>Gunakan Issue</h3>
|
||
<p>Catat tugas yang masih belum selesai sebagai GitHub Issue. Assign ke anggota yang bertanggung jawab.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">10 / 12</div>
|
||
<div class="progress-bar" style="width:83%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 11 — KRITERIA PENILAIAN
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Kriteria <span>Penilaian</span></h2>
|
||
<span class="topic-badge">Assessment Rubric</span>
|
||
</div>
|
||
|
||
<div class="two-col-layout">
|
||
<div>
|
||
<table class="comparison-table" style="margin-top:0">
|
||
<thead>
|
||
<tr><th>Kriteria</th><th>Bobot</th><th>Indikator</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Kualitas Konten</td>
|
||
<td><strong style="color:var(--gold-light)">35%</strong></td>
|
||
<td>Informatif, terstruktur, relevan dengan tema</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Penggunaan HTML</td>
|
||
<td><strong style="color:var(--gold-light)">25%</strong></td>
|
||
<td>Variatif (heading, list, tabel, gambar, quote)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Commit & Pesan</td>
|
||
<td><strong style="color:var(--gold-light)">20%</strong></td>
|
||
<td>Min. 3 commit, pesan bermakna & konvensional</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Pull Request</td>
|
||
<td><strong style="color:var(--gold-light)">20%</strong></td>
|
||
<td>Deskripsi lengkap: nama anggota, ringkasan, link preview</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Skala Penilaian</h3>
|
||
</div>
|
||
<table class="comparison-table" style="margin-top:0">
|
||
<thead>
|
||
<tr><th>Nilai</th><th>Kriteria</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong style="color:var(--accent-green)">A (85–100)</strong></td>
|
||
<td>Konten lengkap, HTML bervariasi, commit > 5, PR rapi</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong style="color:var(--accent-blue)">B (70–84)</strong></td>
|
||
<td>Konten cukup, HTML memadai, commit ≥ 3</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong style="color:var(--accent-orange)">C (55–69)</strong></td>
|
||
<td>Konten minim, commit < 3, PR kurang lengkap</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong style="color:var(--accent-red)">D (<55)</strong></td>
|
||
<td>Tidak mengikuti aturan scope / tidak submit PR</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="callout warn" style="margin-top:14px">
|
||
<div class="callout-icon">📅</div>
|
||
<div class="callout-body">
|
||
<h4>Deadline</h4>
|
||
<p>PR harus disubmit sebelum pertemuan berikutnya. Keterlambatan mengurangi nilai.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">11 / 12</div>
|
||
<div class="progress-bar" style="width:91%"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════════
|
||
SLIDE 12 — PENUTUP & CHECKLIST
|
||
════════════════════════════════════════════════ -->
|
||
<div class="slide content-slide">
|
||
<div class="corner-accent top-left"></div>
|
||
<div class="corner-accent bottom-right"></div>
|
||
|
||
<div class="slide-header">
|
||
<h2>Checklist <span>Sebelum Submit</span></h2>
|
||
<span class="topic-badge">Final Check</span>
|
||
</div>
|
||
|
||
<div class="two-col-layout">
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Cek Konten</h3>
|
||
</div>
|
||
<ul class="bullet-list">
|
||
<li>Semua edit ada di dalam <code style="background:#1a2332;padding:1px 6px;border-radius:3px">#assignment-body</code></li>
|
||
<li>Minimal gunakan: h2/h3, p, dan satu elemen list atau tabel</li>
|
||
<li>Gambar menggunakan path relatif (bukan URL eksternal asing)</li>
|
||
<li>Tidak ada tag <code style="background:#1a2332;padding:1px 6px;border-radius:3px"><script></code></li>
|
||
<li>Halaman tampil normal saat dibuka di browser</li>
|
||
</ul>
|
||
|
||
<div class="col-section" style="margin-top:20px">
|
||
<h3>Cek Git</h3>
|
||
</div>
|
||
<ul class="bullet-list">
|
||
<li>Minimal 3 commit dengan pesan yang berbeda dan bermakna</li>
|
||
<li>Bekerja di branch <code style="background:#1a2332;padding:1px 6px;border-radius:3px">group-XX</code>, bukan <code style="background:#1a2332;padding:1px 6px;border-radius:3px">main</code></li>
|
||
<li><code style="background:#1a2332;padding:1px 6px;border-radius:3px">git status</code> menunjukkan "nothing to commit" sebelum push</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<div class="col-section">
|
||
<h3>Cek Pull Request</h3>
|
||
</div>
|
||
<ul class="bullet-list">
|
||
<li>PR dari branch <code style="background:#1a2332;padding:1px 6px;border-radius:3px">group-XX</code> ke <code style="background:#1a2332;padding:1px 6px;border-radius:3px">main</code></li>
|
||
<li>Judul PR: <em>"[Kelompok 02] Tugas Halaman Statis"</em></li>
|
||
<li>Deskripsi memuat nama semua anggota</li>
|
||
<li>Deskripsi memuat ringkasan tema konten</li>
|
||
<li>PR hanya mengubah file di <code style="background:#1a2332;padding:1px 6px;border-radius:3px">groups/group-XX/</code></li>
|
||
</ul>
|
||
|
||
<div class="callout success" style="margin-top:20px">
|
||
<div class="callout-icon">🎉</div>
|
||
<div class="callout-body">
|
||
<h4>Selamat Mengerjakan!</h4>
|
||
<p>Gunakan materi <strong>materi-git.html</strong> sebagai referensi perintah Git. Tanya dosen jika ada kendala teknis.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">12 / 12</div>
|
||
<div class="progress-bar" style="width:100%"></div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|