Intro
Requirement
❱
1. Hardware
2. Software
Fundamental
Pengantar Pengembangan Web
❱
1. Domain of Service
2. Session State Management
Source Code Management
❱
Environment Manager
❱
1. Virtual Environment
2. Nix
Package dan Project Manager
❱
1. Python Package/Project Manager
  ❱
2. 1. uv by astral
  2. uv structure
  3. uv inital project
  4. uv add dependency
  5. uv sync dependency
  6. uv run script
  7. uv build and distribute project
3. JavaScript Package/Project Manager
  ❱
4. 1. bun by oven
  2. bun structure
  3. bun initial project
  4. bun add dependency
  5. bun sync dependency
  6. bun run script
  7. bun build and distribute project
Fundamental Web Development
❱
1. Dasar HTML untuk Markup
2. Dasar CSS untuk Styling
  ❱
4. Dasar JS untuk interactivity
Pemrograman Python
❱
1. Variabel
2. Type Data
3. Operator
4. Conditional Statement
5. Loops
6. Function
7. Class
8. Reusable Code
Basis Data
❱
1. Struktur Query
  ❱
2. 1. NoSQL
  2. SQL
3. Lokasi Penyimpanan
  ❱
4. 1. RAM
  2. Storage
Dasar SQL
❱
1. CREATE Database dan Table
2. INSERT Record
3. SELECT Record
4. UPDATE Record
5. DELETE Record
6. JOIN Record
7. ALTER Table
Development dengan Framework
Pengenalan Django
❱
1. Membuat Projek
2. Membuat App
3. Mengamankan Parameter Environment
Rute dan Rendering
❱
1. Dasar dasar Rute
2. Dasar dasar Template Engine
Interactivity dengan HTMX
❱
1. HTMX Navigasi
2. Server Side Rendering
3. Doom Manipulation
4. Form Submission
Styling
❱
1. Aset Statis pada Django
2. Utility Class dengan TailwindCSS
3. Component Class dengan DaisyUI
Django dan SQL
❱
1. Migration - Management Skema Table
2. CRUD dengan RAW SQL
Testing
Unit Testing
❱
1. pytest
End to End (E2E) Testing
❱
1. robotframework
Deployment
Persiapan Deployment
❱
1. Django Mode Production
2. Server Runtime dengan Rust/Granian
3. Django Static Assets di CDN
Containerisasi dengan Podman
❱
1. Workflow
2. Dockerfile
3. Multi Stage Build
4. Registry
Infra as Code
❱
1. Docker Compose
2. Kubernetes
  ❱
3. 1. Microk8s
  2. Enable Essential Features
  3. Deployment
  4. Services
  5. Ingress
  6. Templates IaC dengan Helm Chart
Django di Server Produksi
❱
1. Environment
2. Proxy
3. Sync dan Async
4. Rust Server Runner
Lanjutan
Dasar Keamanan
❱
1. XSS
2. CSRF
3. SQL Injection
4. SSL
Load Testing
❱
1. Autocannon
2. Locust
3. Goose
Observability
CI/CD dengan GitHub Action
❱
1. Auto Run Build dan Test
2. Auto Push Build ke Registry
3. Auto Deploy Updated Image
Final Projects
Penutup
Daftar Pustaka

Pengantar Web Development: HTML, CSS, dan JavaScript

Dalam pengembangan web, terdapat tiga teknologi utama yang digunakan untuk membuat halaman web menjadi dinamis dan interaktif: HTML, CSS, dan JavaScript.

HTML (HyperText Markup Language)

HTML adalah fondasi dari setiap halaman web. Fungsinya adalah untuk menyusun struktur dan konten halaman, seperti:

Teks
Gambar
Tautan
Tabel
Berbagai elemen lainnya

Ibaratnya, HTML adalah kerangka atau tulang dari sebuah website yang membentuk pondasi dasar bagaimana konten ditampilkan.

CSS (Cascading Style Sheets)

CSS berfungsi untuk mengatur tampilan atau gaya visual dari halaman web yang sudah dibangun dengan HTML. Dengan CSS, kita bisa mengubah:

Warna elemen
Tata letak halaman
Ukuran dan font teks
Elemen visual lainnya

Jika HTML adalah kerangka, CSS adalah pakaian yang membuat tampilan website menjadi lebih menarik dan estetis.

JavaScript

JavaScript adalah bahasa pemrograman yang menambahkan interaktivitas pada halaman web. Dengan JavaScript, kita bisa:

Membuat tombol interaktif
Menambahkan animasi yang hidup
Melakukan validasi form
Mengambil dan menampilkan data secara dinamis tanpa perlu memuat ulang halaman

JavaScript memberi kehidupan pada website, memungkinkan pengguna untuk berinteraksi dengan elemen-elemen di dalamnya.

Analogi Web Development

Berikut adalah analogi sederhana untuk memahami hubungan antara HTML, CSS, dan JavaScript dalam pengembangan web:

analogi

Dalam analogi ini:

HTML digambarkan sebagai kerangka tulang.
CSS sebagai tampilan luar yang memperindah.
JavaScript sebagai otak dan saraf yang memberikan fungsionalitas.