Jumat, 11 September 2026
Ide Website
| No | Jenis Halaman | Tujuan Utama | Contoh |
|---|---|---|---|
| 1 | Landing Page | Mendorong satu tindakan/konversi | Promosi produk, pendaftaran webinar |
| 2 | Homepage | Menjadi halaman utama sebuah website | Beranda perusahaan |
| 3 | About Page | Menjelaskan profil organisasi/brand | Tentang Kami |
| 4 | Product Page | Menjelaskan satu produk | Detail laptop |
| 5 | Service Page | Menjelaskan layanan | Jasa konsultasi |
| 6 | Portfolio Page | Menampilkan karya/proyek | Portfolio mahasiswa/desainer |
| 7 | Blog Page | Menampilkan artikel/informasi | Blog teknologi |
| 8 | Article Page | Menampilkan satu artikel secara lengkap | Artikel ilmiah/populer |
| 9 | Contact Page | Menyediakan informasi kontak | Formulir kontak |
| 10 | FAQ Page | Menjawab pertanyaan umum | FAQ produk |
| 11 | Pricing Page | Menampilkan paket dan harga | Paket SaaS |
| 12 | Login Page | Autentikasi pengguna | Login aplikasi |
| 13 | Register/Sign Up Page | Pendaftaran pengguna | Registrasi akun |
| 14 | Dashboard | Menampilkan data dan kontrol pengguna | Dashboard admin |
| 15 | Profile Page | Menampilkan profil pengguna | Profil mahasiswa |
| 16 | Search Results Page | Menampilkan hasil pencarian | Hasil pencarian produk |
| 17 | E-commerce Product Listing | Menampilkan kumpulan produk | Katalog toko online |
| 18 | Shopping Cart | Mengelola barang yang akan dibeli | Keranjang belanja |
| 19 | Checkout Page | Menyelesaikan transaksi | Pembayaran online |
| 20 | Booking Page | Melakukan pemesanan | Booking hotel |
| 21 | Event Page | Informasi sebuah acara | Seminar/workshop |
| 22 | News Page | Menampilkan berita | Portal berita |
| 23 | Documentation Page | Menjelaskan penggunaan sistem/API | Dokumentasi software |
| 24 | Tutorial Page | Memberikan panduan langkah demi langkah | Tutorial pemrograman |
| 25 | Pricing/Subscription Page | Mengarahkan pengguna memilih paket | Paket membership |
| 26 | 404 Error Page | Memberi informasi halaman tidak ditemukan | "Page Not Found" |
| 27 | Coming Soon Page | Memberi informasi sebelum website diluncurkan | Website dalam pembangunan |
| 28 | Thank You Page | Konfirmasi setelah aksi pengguna | Setelah submit formulir |
| 29 | Confirmation Page | Mengonfirmasi transaksi/pendaftaran | Pesanan berhasil |
| 30 | Web Application Page | Menjalankan fungsi aplikasi | Sistem akademik |
Jika dikelompokkan berdasarkan fungsi
Lebih mudah untuk mahasiswa jika jenis halaman web dikelompokkan menjadi 7 kategori besar:
1. Informational
- Homepage
- About
- Service
- FAQ
- Contact
2. Marketing
- Landing Page
- Product Page
- Pricing Page
- Campaign Page
3. Content
- Blog
- Article
- News
- Tutorial
- Documentation
4. E-Commerce
- Product Listing
- Product Detail
- Cart
- Checkout
- Order Confirmation
5. User & Authentication
- Login
- Register
- Profile
- Forgot Password
6. Application
- Dashboard
- Admin Panel
- Analytics
- Settings
- Management System
7. Utility/System
- Search Results
- 404
- Coming Soon
- Maintenance
- Thank You
| Slash command | Fungsi |
|---|---|
/web | Merancang konsep website |
/website | Membuat spesifikasi website lengkap |
/landing | Merancang landing page |
/homepage | Merancang homepage |
/ecommerce | Merancang website e-commerce |
/portfolio | Merancang website portfolio |
/dashboard | Merancang dashboard web |
/admin | Merancang admin panel |
/blog | Merancang website/blog |
/company | Merancang company profile |
/saas | Merancang website SaaS |
/catalog | Merancang katalog produk |
/wireframe | Membuat wireframe |
/uiux | Membuat rancangan UI/UX |
/designsystem | Membuat design system |
/responsive | Merancang versi desktop/tablet/mobile |
/prototype | Merancang alur prototype/interaksi |
/prd | Membuat Product Requirements Document |
/sitemap | Membuat struktur/sitemap website |
/userflow | Membuat user flow |
/component | Merancang komponen UI |
/html | Mengubah desain menjadi HTML/CSS |
/frontend | Membuat implementasi frontend |
/sites | Membuat website dengan AI website builder |
/brief
↓
/prd
↓
/sitemap
↓
/userflow
↓
/wireframe
↓
/uiux
↓
/designsystem
↓
/prototype
↓
/html
↓
/frontend
↓
/responsive
/landing Buat landing page untuk brand "Kopi Kelapa". Target: mahasiswa dan pekerja muda. Gaya tropical, modern, fresh, premium.
| Pertemuan | Fokus | Project |
|---|---|---|
| 1 | Web & UI/UX Fundamentals | Brief |
| 2 | HTML Semantic | Landing Page |
| 3 | CSS & Layout | Landing Page |
| 4 | Responsive Design | Homepage |
| 5 | UI Components | About + Product |
| 6 | CSS Grid | Portfolio |
| 7 | Content Design | Blog |
| 8 | Form & Validation | Contact |
| 9 | UTS | Website Statis |
| 10 | JavaScript | Interactive Website |
| 11 | Login/Register | Authentication |
| 12 | Dashboard | User Dashboard |
| 13 | Database & CRUD | Product Management |
| 14 | E-Commerce | Cart + Checkout |
| 15 | Web Application | Customer + Admin |
| 16 | UAS | Final Web Application |
STUDI KASUS UTAMA
Saya sarankan satu brand/proyek dikembangkan sepanjang semester, sehingga mahasiswa melihat evolusi website secara nyata.
Studi Kasus: Kopi Kelapa
Kopi Kelapa — Tropical Coffee for Modern Lifestyle
Target:
- Mahasiswa
- Pekerja muda
- Komunitas kreatif
- Konsumen urban
Karakter:
Tropical + Modern + Fresh + Premium + Local
LEVEL 1 — LANDING PAGE
Tujuan
Mahasiswa belajar membuat halaman promosi dengan fokus pada conversion.
Materi
- HTML semantic
- CSS
- Typography
- Color
- Hero section
- CTA
- Image
- Layout
- Flexbox
Studi kasus
KOPI KELAPA Kopi Kelapa Rasa Tropis untuk Hari yang Lebih Baik Perpaduan kopi berkualitas dan kelapa pilihan. [ BELI SEKARANG ] [ LIHAT PRODUK ]
Output
1-page promotional landing page
LEVEL 2 — HOMEPAGE
Landing page dikembangkan menjadi website.
Struktur
HEADER ↓ HERO ↓ FEATURED PRODUCT ↓ ABOUT ↓ BENEFITS ↓ TESTIMONIAL ↓ CTA ↓ FOOTER
Kompetensi
Mahasiswa memahami:
- Navigation
- Section
- Component
- Website architecture
- Responsive layout
LEVEL 3 — ABOUT
Studi kasus
"Cerita di Balik Kopi Kelapa"
Konten:
- Brand story
- Vision
- Mission
- Values
- Team
- Sustainability
Struktur
ABOUT KOPI KELAPA ↓ OUR STORY ↓ OUR VALUES ↓ OUR TEAM ↓ OUR MISSION
Kompetensi
Web content + visual storytelling
LEVEL 4 — PRODUCT / SERVICE
Website mulai menjadi product-oriented website.
Product
Kopi Kelapa Original Kopi Kelapa Latte Kopi Kelapa Chocolate Kopi Kelapa Matcha
Product card:
┌──────────────────┐ │ │ │ PRODUCT IMG │ │ │ ├──────────────────┤ │ Kopi Kelapa │ │ Original │ │ │ │ Rp18.000 │ │ │ │ [ ADD TO CART ] │ └──────────────────┘
Kompetensi
- Card design
- Product grid
- Detail page
- CTA
- UI component
LEVEL 5 — PORTFOLIO
Untuk memperkenalkan konsep gallery/grid system.
Studi kasus
Kopi Kelapa Brand Portfolio
Isi:
- Product photography
- Packaging
- Café design
- Social media campaign
- Event
- Branding
PORTFOLIO ┌────────┬────────┬────────┐ │ │ │ │ │ Project│ Project│ Project│ │ 01 │ 02 │ 03 │ │ │ │ │ ├────────┼────────┼────────┤ │ Project│ Project│ Project│ │ 04 │ 05 │ 06 │ └────────┴────────┴────────┘
Kompetensi
CSS Grid + responsive gallery
LEVEL 6 — BLOG
Website berkembang menjadi content platform.
Studi kasus
KOPI KELAPA JOURNAL ☕ Tips Kopi 🌴 Lifestyle 📚 Edukasi 🌱 Sustainability
Contoh artikel:
5 Alasan Kopi dan Kelapa Menjadi Kombinasi Unik
Mahasiswa belajar:
- Article
- Category
- Author
- Date
- Thumbnail
- Detail article
- Related article
LEVEL 7 — CONTACT
Mahasiswa mulai mengenal form interaction.
Form
CONTACT US Nama [________________] Email [________________] Subjek [________________] Pesan [________________] [ KIRIM PESAN ]
Materi:
- Form
- Input
- Validation
- Button
- UX feedback
LEVEL 8 — LOGIN / REGISTER
Website berubah dari informational website → user-based website.
Login
┌─────────────────────┐ │ KOPI KELAPA │ │ │ │ Email │ │ [_______________] │ │ │ │ Password │ │ [_______________] │ │ │ │ [ LOGIN ] │ │ │ │ Belum punya akun? │ │ Register │ └─────────────────────┘
Register
Nama Email Password Confirm Password [ CREATE ACCOUNT ]
Materi:
- Authentication concept
- Form validation
- Session
- User state
- Security awareness
LEVEL 9 — DASHBOARD
Setelah login, mahasiswa membuat personal/customer dashboard.
┌──────────────┬─────────────────────────────┐ │ DASHBOARD │ Welcome, Fajar │ │ │ │ │ Dashboard │ ┌──────┐ ┌──────┐ │ │ Orders │ │Orders│ │Points│ │ │ Wishlist │ │ 12 │ │ 850 │ │ │ Profile │ └──────┘ └──────┘ │ │ Settings │ │ │ Logout │ Recent Orders │ │ │ ┌─────────────────────────┐ │ │ │ │ #001 Kopi Original │ │ │ │ │ #002 Kopi Latte │ │ │ │ └─────────────────────────┘ │ └──────────────┴─────────────────────────────┘
Materi:
- Dashboard
- Sidebar
- Table
- Cards
- Data visualization
- User state
LEVEL 10 — E-COMMERCE
Semua komponen sebelumnya mulai digabung.
Customer Journey
HOME ↓ PRODUCT ↓ PRODUCT DETAIL ↓ ADD TO CART ↓ SHOPPING CART ↓ CHECKOUT ↓ PAYMENT ↓ ORDER ↓ ORDER CONFIRMATION
Fitur
- Product catalog
- Search
- Filter
- Product detail
- Cart
- Quantity
- Checkout
- Order
- Customer account
Pada tahap ini mahasiswa mulai memahami:
Website bukan lagi sekumpulan halaman, tetapi sebuah sistem.
LEVEL 11 — WEB APPLICATION
Tahap terakhir adalah mengubah website menjadi aplikasi web yang memiliki business logic.
Contohnya:
Customer
REGISTER ↓ LOGIN ↓ BROWSE PRODUCT ↓ ADD CART ↓ CHECKOUT ↓ ORDER ↓ TRACK ORDER
Admin
ADMIN LOGIN ↓ DASHBOARD ↓ PRODUCT MANAGEMENT ↓ ORDER MANAGEMENT ↓ CUSTOMER MANAGEMENT ↓ REPORT
Arsitektur Akhir
KOPI KELAPA │ ┌───────────┴───────────┐ │ │ CUSTOMER ADMIN │ │ Homepage Dashboard │ │ Products Products CRUD │ │ Cart Order CRUD │ │ Checkout Customer Data │ │ Order Reports │ My Account
Roadmap Kompetensi
Kurikulum ini juga dapat dipetakan menjadi perjalanan teknologi:
LEVEL 1 HTML + CSS │ ▼ LEVEL 2 HTML + CSS + RESPONSIVE │ ▼ LEVEL 3 HTML + CSS + JAVASCRIPT │ ▼ LEVEL 4 UI COMPONENT + STATE │ ▼ LEVEL 5 FORM + VALIDATION │ ▼ LEVEL 6 AUTHENTICATION │ ▼ LEVEL 7 DATABASE + CRUD │ ▼ LEVEL 8 BUSINESS LOGIC │ ▼ LEVEL 9 E-COMMERCE │ ▼ WEB APPLICATION
Kamis, 10 September 2026
Membuat Virtual Lab
@Sites Buat virtual lab titrasi asam-basa yang interaktif. Tampilkan meja laboratorium dengan buret, statif, erlenmeyer, larutan titran, indikator, dan gelas kimia. User dapat memilih jenis asam, jenis basa, konsentrasi awal, volume sampel, serta menambahkan titran sedikit demi sedikit melalui kontrol volume. Visualisasikan perubahan warna larutan secara bertahap sesuai kondisi titrasi, tampilkan nilai pH secara real-time, volume titran yang sudah ditambahkan, titik ekuivalen, serta grafik kurva titrasi pH terhadap volume titran. Tambahkan tombol Teskan, Tambah 1 mL, Auto Titrate, Pause, dan Reset. Setelah eksperimen selesai, tampilkan ringkasan hasil dan interpretasi singkat. Buat sites menjadi file html yang bisa saya download.
Langganan:
Postingan (Atom)
Latex dan Antigravity
https://www.youtube.com/watch?v=taoR74PkiFE&t=19s https://docs.google.com/document/d/1I3cJtbs6bIHTFj9u9QQmEygQq8m0IuSyF44AiDioKlY/edit...
-
https://www.youtube.com/watch?v=MDdT0WtRniE&list=PLjRBWix725xqEddhpGsg8_VmrIGoaFhs6 https://www.youtube.com/watch?v=FpwcfLHswUo&li...
-
https://chatgpt.com/c/6a977781-74a4-83ec-9398-d58d36d3d82a https://stratoflow.com/web-application-development/?utm_source=chatgpt.com -
https://www.geeksforgeeks.org/javascript/form-validation-using-javascript/ https://www.geeksforgeeks.org/html/javascript-application-for-e...
