https://stitch.withgoogle.com/projects/12104284991658533788?pli=1

AI Studio

https://github.com/fajarbaskoro/bajuanak

Vercel

https://bajuanak-rho.vercel.app/

https://www.youtube.com/watch?v=iSp6bWgDaRc

https://www.youtube.com/watch?v=YmsWbvKsi8c

Pedoman Pengembangan Website: 8-Step Web Development

Struktur tersebut sangat baik digunakan sebagai SOP pembelajaran Web Programming, karena mahasiswa tidak langsung "coding", tetapi mengikuti siklus:


IDE
 │
 ▼
1. PLANNING
 │
 ▼
2. DESIGN SYSTEM
 │
 ▼
3. BUILD STRUCTURE
 │
 ▼
4. BUILD PAGES
 │
 ▼
5. QA & TESTING
 │
 ▼
6. SEO & CONTENT
 │
 ▼
7. DEPLOYMENT
 │
 ▼
8. MAINTENANCE
 │
 └───────────────┐
                 │
                 ▼
          IMPROVEMENT / ITERATION

Secara konsep, ini sejalan dengan proses pengembangan perangkat lunak: requirements → planning → design → development → testing → deployment → monitoring/maintenance.

1. STEP-1 — PLANNING

Tujuan

Tahap pertama adalah menjawab:

Website apa yang akan dibuat, untuk siapa, dan masalah apa yang ingin diselesaikan?

Mahasiswa jangan langsung membuka VS Code dan menulis HTML.

Mereka harus menentukan:

tujuan website;
target pengguna;
kebutuhan pengguna;
fitur;
konten;
struktur halaman;
teknologi;
batasan proyek.

Contoh

Misalnya tugas:

Membuat website CV dan portofolio mahasiswa.

Planning:


PROJECT
│
├── Nama
│   Portfolio Mahasiswa
│
├── Target User
│   ├── Dosen
│   ├── Recruiter
│   └── Perusahaan
│
├── Tujuan
│   Menampilkan profil,
│   skill, project dan pengalaman
│
└── Fitur
    ├── Home
    ├── About
    ├── Skills
    ├── Portfolio
    ├── Experience
    └── Contact

Output mahasiswa

Idealnya mahasiswa menghasilkan:


01-project-plan.md
02-requirements.md
03-site-map.md
04-feature-list.md

Prinsip pengajaran:

Think before Code.

2. STEP-2 — DESIGN-SYSTEM

Setelah tahu apa yang akan dibuat, mahasiswa menentukan bagaimana website tersebut akan terlihat.

Design System bukan sekadar membuat website "bagus".

Ini adalah aturan visual yang digunakan secara konsisten.

Contohnya:


DESIGN SYSTEM
│
├── Color
│   ├── Primary
│   ├── Secondary
│   └── Background
│
├── Typography
│   ├── Heading
│   ├── Body
│   └── Caption
│
├── Spacing
│   ├── 4px
│   ├── 8px
│   ├── 16px
│   └── 32px
│
├── Button
│   ├── Primary
│   └── Secondary
│
├── Card
│
├── Navbar
│
└── Form

Misalnya:


:root {
    --primary: #2563eb;
    --secondary: #64748b;
    --background: #f8fafc;
    --text: #0f172a;

    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
}

Dengan demikian mahasiswa belajar bahwa:

Design → System → Component → Page

bukan setiap halaman didesain secara terpisah.

3. STEP-3 — BUILD-STRUCTURE

Tahap ini menerjemahkan hasil planning dan design menjadi struktur project.

Contoh:


portfolio/
│
├── index.html
├── about.html
├── portfolio.html
├── contact.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
├── images/
│   ├── profile.jpg
│   └── project-01.jpg
│
└── README.md

Untuk framework modern dapat berkembang menjadi:


portfolio/
│
├── src/
│   ├── components/
│   ├── pages/
│   ├── assets/
│   └── styles/
│
├── public/
├── package.json
└── README.md

Dokumen struktur project yang baik juga membantu mahasiswa memahami bahwa source code bukan sekadar kumpulan file, tetapi memiliki organisasi dan arsitektur. Contoh struktur pengembangan project yang terdokumentasi menggunakan components, pages, assets, dan styles juga terlihat pada materi terkait project development.

4. STEP-4 — BUILD-PAGES

Ini adalah tahap yang biasanya paling dikenal mahasiswa sebagai "coding website".

Tetapi dalam metode ini coding baru dilakukan setelah planning, design system, dan structure selesai.

Urutannya misalnya:


BUILD PAGES
│
├── 1. Navbar
│
├── 2. Hero
│
├── 3. About
│
├── 4. Skills
│
├── 5. Portfolio
│
├── 6. Experience
│
├── 7. Contact
│
└── 8. Footer

Untuk setiap page:


PAGE
 │
 ├── Structure
 │      HTML
 │
 ├── Style
 │      CSS
 │
 ├── Behavior
 │      JavaScript
 │
 └── Responsive
        Mobile
        Tablet
        Desktop

Prinsip penting untuk mahasiswa

Jangan:

"Buat semua halaman sekaligus."

Lebih baik:


Component
   ↓
Section
   ↓
Page
   ↓
Integration

Contohnya:


Button
 ↓
Card
 ↓
Portfolio Section
 ↓
Portfolio Page
 ↓
Complete Website

5. STEP-5 — QA-TESTING

Ini bagian yang sering dilupakan mahasiswa.

Website belum selesai ketika coding selesai.

Website selesai ketika sudah diperiksa dan divalidasi.

QA dapat dibagi menjadi:


QA & TESTING
│
├── Functional
│   └── Apakah fitur bekerja?
│
├── UI
│   └── Apakah tampilan sesuai desain?
│
├── Responsive
│   ├── Mobile
│   ├── Tablet
│   └── Desktop
│
├── Browser
│   ├── Chrome
│   ├── Edge
│   └── Firefox
│
├── Accessibility
│
├── Performance
│
└── Security

Contoh checklist:

Test	Status
Navbar bekerja	✓
Link bekerja	✓
Form bekerja	✓
Mobile responsive	✓
Tablet responsive	✓
Desktop responsive	✓
Image memiliki alt	✓
Tidak ada console error	✓
Tidak ada broken link	✓

Dalam proses software development, testing memang ditempatkan sebagai fase khusus untuk memastikan fungsi berjalan sesuai harapan dan menemukan defect sebelum deployment.

6. STEP-6 — SEO-CONTENT

Setelah website bekerja, tahap berikutnya adalah membuatnya dapat ditemukan dan dipahami oleh pengguna maupun search engine.

Mahasiswa belajar bahwa:

Website ≠ hanya HTML + CSS + JavaScript.

Website juga membutuhkan content strategy.

Materinya dapat meliputi:

On-page SEO


<title>Portfolio Fajar - Web Developer</title>

<meta
    name="description"
    content="Portfolio mahasiswa Web Programming"
/>

Semantic HTML


<header>
<nav>
<main>
<section>
<article>
<footer>

Content

Mahasiswa harus memahami:

siapa target pembaca;
apa keyword utama;
apa informasi utama;
bagaimana membuat heading;
bagaimana menulis copy;
bagaimana mengoptimalkan gambar.

Jadi:


TECHNICAL QUALITY
       +
CONTENT QUALITY
       ↓
DISCOVERABLE WEBSITE

7. STEP-7 — DEPLOYMENT

Website yang dibuat di komputer mahasiswa harus dipindahkan ke server/hosting agar dapat diakses melalui internet.

Konsep sederhananya:


LOCAL COMPUTER
     │
     │ git push / upload
     ▼
GITHUB / SERVER
     │
     ▼
HOSTING
     │
     ▼
INTERNET
     │
     ▼
USER

Contoh teknologi deployment:


GitHub Pages
Netlify
Vercel
Cloudflare Pages
Traditional Hosting
VPS

Untuk website statis, GitHub Pages merupakan salah satu pendekatan sederhana: repository publik → upload index.html → Settings → Pages → pilih branch → deploy. Materi yang tersimpan juga menunjukkan pola deployment website statis tersebut.

Target pembelajaran

Mahasiswa tidak hanya berkata:

"Website saya sudah selesai."

Tetapi:

"Website saya sudah online dan dapat diakses melalui URL."

8. STEP-8 — MAINTENANCE

Ini adalah tahap yang membuat model tersebut menjadi siklus pengembangan, bukan sekadar tugas membuat website.

Setelah website online:


DEPLOY
  ↓
USE
  ↓
MONITOR
  ↓
FIND PROBLEM
  ↓
FIX
  ↓
IMPROVE
  ↓
DEPLOY AGAIN

Maintenance dapat berupa:

memperbaiki bug;
memperbarui konten;
menambahkan fitur;
memperbaiki UX;
meningkatkan performance;
memperbarui dependency;
meningkatkan keamanan;
memperbarui SEO.

Dengan demikian mahasiswa memahami:

Website adalah produk yang hidup, bukan tugas yang selesai setelah index.html dibuat.

Hubungan 8 Dokumen

Saya menyarankan Anda menjadikan struktur tersebut sebagai Web Development Lifecycle dalam perkuliahan:


┌───────────────────────────────┐
│ 1. PLANNING                   │
│ What & Why?                   │
└───────────────┬───────────────┘
                ↓
┌───────────────────────────────┐
│ 2. DESIGN SYSTEM              │
│ How should it look?           │
└───────────────┬───────────────┘
                ↓
┌───────────────────────────────┐
│ 3. BUILD STRUCTURE            │
│ How is the project organized? │
└───────────────┬───────────────┘
                ↓
┌───────────────────────────────┐
│ 4. BUILD PAGES                │
│ How is it implemented?        │
└───────────────┬───────────────┘
                ↓
┌───────────────────────────────┐
│ 5. QA & TESTING               │
│ Does it work correctly?       │
└───────────────┬───────────────┘
                ↓
┌───────────────────────────────┐
│ 6. SEO & CONTENT              │
│ Can users find & understand?  │
└───────────────┬───────────────┘
                ↓
┌───────────────────────────────┐
│ 7. DEPLOYMENT                 │
│ Can users access it online?   │
└───────────────┬───────────────┘
                ↓
┌───────────────────────────────┐
│ 8. MAINTENANCE                │
│ How do we improve it?         │
└───────────────┬───────────────┘
                │
                └──────→ ITERATION

Yang menarik untuk pembelajaran Web Programming

Sebagai dosen, Anda dapat menjadikan setiap STEP sebagai deliverable mahasiswa:

Tahap	Deliverable mahasiswa
1. Planning	Project Plan + Requirement + Sitemap
2. Design System	Style Guide + Wireframe
3. Build Structure	Folder Structure + Architecture
4. Build Pages	Source Code
5. QA Testing	Test Case + Bug Report
6. SEO Content	SEO Checklist + Content
7. Deployment	URL Website
8. Maintenance	Changelog + Improvement Plan

Dengan model ini, penilaian kuliah juga menjadi lebih objektif. Misalnya:


PLANNING       10%
DESIGN         15%
STRUCTURE      10%
CODING         25%
TESTING        15%
SEO/CONTENT    10%
DEPLOYMENT      5%
MAINTENANCE    10%
               ────
               100%

Kesimpulan: struktur STEP-1 sampai STEP-8 sangat cocok dijadikan framework/SOP praktikum Web

Code Studio

Minggu, 13 September 2026

Website Planning - Stitch