Lembar bantu 📌

<h1>My website</h1>

Judul paling besar. Cuma sekali per halaman — seperti judul buku.

<h2>Chapter</h2>

Judul yang lebih kecil. Ada sampai <h6> (paling kecil).

<p>Hi, this is text.</p>

Paragraf teks biasa.

<strong>important</strong>

Membuat teks tebal.

<em>interesting</em>

Teks miring (condong).

<a href="https://example.com">Click</a>

Tautan. href berisi alamat tujuan.

<img src="dog.jpg" alt="My dog">

Gambar. src = file gambar, alt = deskripsi kalau gambar nggak muncul.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

Daftar dengan bullet. Setiap item adalah <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

Daftar bernomor — browser yang menambah nomornya.

<div class="card">...</div>

Kotak untuk mengelompokkan hal-hal yang saling terkait. Nama class kamu buat sendiri.

<!-- note to myself -->

Komentar. Browser mengabaikannya — cuma buat kamu.

h1 {
  color: red;
}

Semua judul <h1> jadi merah.

.card {
  background: yellow;
}

Semua yang punya class="card" dapat latar kuning. Titik artinya "cari class ini".

p {
  font-size: 20px;
}

Ukuran font paragraf. Angka lebih besar = teks lebih besar.

body {
  font-family: Arial;
}

Font untuk seluruh halaman.

.card {
  padding: 16px;
}

Jarak dalam — ruang antara isi dan tepi kotak.

.card {
  margin: 16px;
}

Jarak luar — jarak dari benda di sekitarnya.

.card {
  border: 2px solid black;
}

Bingkai: ketebalan, gaya garis, dan warna.

.card {
  border-radius: 12px;
}

Sudut membulat. Angka lebih besar = lebih bulat.

.menu {
  display: flex;
  gap: 10px;
}

Isi di dalamnya berjajar horizontal dengan jarak 10px. Trik ajaib untuk menu!

img {
  width: 200px;
}

Lebar gambar. Tingginya menyesuaikan otomatis supaya nggak gepeng.

const name = 'Kate';

Variabel — kotak berlabel tempat kamu menyimpan sesuatu.

let points = 0;
points = points + 1;

let adalah kotak yang bisa diubah. Di sini kita menambah satu poin.

alert('Hi!');

Muncul kotak pesan. Bagus untuk percobaan pertamamu.

console.log('it works');

Mencetak pesan ke konsol (F12) — jendela rahasia untuk programmer.

document.querySelector('h1')

Mencari <h1> pertama di halaman supaya kamu bisa mengoperasinya.

element.textContent = 'New text';

Mengganti teks di dalam elemen yang kamu temukan.

element.addEventListener('click', () => {
  alert('Clicked!');
});

Kalau seseorang mengklik elemen, kode di dalamnya jalan.

if (points > 10) {
  alert('You won!');
}

Kondisi: kode di dalam cuma jalan kalau yang di dalam kurung benar.

element.classList.toggle("dark");

Menambah class kalau belum ada — dan menghapus kalau sudah ada. Persis begitu dark mode bekerja.

const r = await fetch(address);

Kirim permintaan ke API dan tunggu (await) jawabannya.

const data = await r.json();

Ubah respons jadi objek yang bisa kamu pakai.

data.current_weather.temperature

Ambil nilai dari objek dengan titik — seperti objek biasa.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = kirim data KE server. body berisi objek yang diubah jadi teks.

{ "city": "Prague", "temperature": 21 }

JSON — bahasa bersama API. Teks pakai tanda kutip, angka tanpa.

JSON.stringify(obj)

Ubah objek jadi teks JSON (sebelum dikirim).

JSON.parse(text)

Ubah teks JSON kembali jadi objek (setelah diterima).

process.env.AI_KEY

Di server: baca kunci rahasia dari file .env. Kunci nggak boleh ada di browser!

cd my-website

Masuk ke folder my-website (cd = change directory).

ls

Tampilkan isi folder saat ini (di Windows: dir).

node server.js

Jalankan file server.js pakai Node.js.

npm install

Unduh semua paket yang dibutuhkan proyek.

git status

Tampilkan apa yang berubah sejak penyimpanan terakhir.

git add .

Siapkan semua perubahan untuk disimpan (titik artinya "semuanya").

git commit -m "Added a menu"

Simpan perubahan ke riwayat dengan catatan apa yang kamu lakukan.

git push

Kirim perubahan yang disimpan ke GitHub.