Kelas Excellect - Coding
CATATAN PERJALANAN BELAJAR

Materi yang
Sudah Dipelajari.

Dari mencari informasi hingga menulis kode, semua konsep dasar teknologi dirangkum dalam satu tempat. Pelajari secara berurutan dan bangun pemahaman selangkah demi selangkah.

Jelajahi materi
✳ 6 topik dasar Untuk pemula
PETA BELAJAR

Mulai dari rasa ingin tahu.

01⌕Cari tahu
02◈Susun logika
03</>Bangun karya
MATERI PEMBELAJARAN

Enam langkah menuju
lebih paham.

Ikuti urutannya untuk memahami bagaimana informasi berubah menjadi solusi, lalu menjadi halaman web yang bisa digunakan.

01LANGKAH AWAL

Pencarian Informasi

Kemampuan menemukan, memilih, dan menggunakan informasi yang tepat untuk menjawab pertanyaan atau menyelesaikan masalah.

Mengapa penting?

Internet menyediakan banyak informasi, tetapi tidak semuanya akurat atau relevan. Pencarian yang terarah membantu kita belajar lebih efisien dan mengambil keputusan berdasarkan sumber yang dapat dipercaya.

Langkah pencarian yang baik

  1. Tentukan topik dan rumuskan pertanyaan.
  2. Pilih kata kunci spesifik, misalnya fungsi HTML semantic.
  3. Gunakan operator pencarian seperti tanda kutip untuk frasa persis atau site: untuk membatasi situs.
  4. Bandingkan beberapa sumber dan cek penulis, tanggal, bukti, serta tujuan penerbitan.
  5. Catat sumber dan rangkum dengan kata-kata sendiri.
CONTOH

Daripada mencari “komputer”, gunakan pertanyaan “Apa perbedaan perangkat keras dan perangkat lunak?” lalu cari di situs pendidikan atau dokumentasi tepercaya.

Coba pikirkan

Kamu menemukan dua artikel dengan jawaban berbeda. Informasi apa yang akan kamu periksa untuk menentukan sumber mana yang lebih dapat dipercaya?

02LOGIKA DASAR

Algoritma

Urutan instruksi yang logis, terstruktur, dan berhingga untuk menyelesaikan suatu masalah.

Ciri-ciri algoritma

Memiliki masukan (input), langkah yang jelas dan tidak ambigu, menghasilkan keluaran (output), serta berhenti setelah sejumlah langkah. Algoritma dapat ditulis dengan bahasa sehari-hari, pseudocode, atau diagram.

Struktur dasar

  • Sekuensial: instruksi dijalankan berurutan.
  • Percabangan: memilih langkah berdasarkan kondisi (jika/maka).
  • Perulangan: mengulangi langkah selama syarat tertentu terpenuhi.
CONTOH · MENGHITUNG LUAS PERSEGI PANJANG
1. Masukkan panjang (p) dan lebar (l)
2. Hitung luas = p × l
3. Tampilkan luas
Coba pikirkan

Buat langkah algoritma untuk menentukan apakah sebuah angka termasuk genap atau ganjil. Petunjuk: periksa sisa pembagian angka dengan 2.

03VISUALISASI LOGIKA

Flowchart (Diagram Alir)

Gambaran visual dari urutan langkah dan keputusan dalam algoritma. Flowchart membantu kita memahami alur sebelum program ditulis.

Mulai

Terminator
Awal atau akhir proses.

Proses

Proses
Perhitungan atau instruksi.

?

Keputusan
Percabangan Ya/Tidak.

Input

Input/Output
Data masuk atau hasil.

Aturan menggambar

Gunakan panah untuk menunjukkan arah alur, hubungkan simbol dengan jelas, tulis satu tindakan pada setiap proses, dan pastikan setiap cabang keputusan memiliki keluaran yang sesuai.

Alur mengecek angka genap

Mulai → masukkan angka → apakah angka mod 2 = 0? → Ya: tampilkan “Genap” / Tidak: tampilkan “Ganjil” → Selesai.

Coba pikirkan

Simbol apa yang tepat untuk menerima angka dari pengguna? Simbol apa yang digunakan untuk mengecek kondisi genap atau ganjil?

04STRUKTUR WEB

HTML

HyperText Markup Language adalah bahasa markup yang menyusun struktur dan makna konten halaman web. HTML bukan bahasa pemrograman.

Elemen dan tag

Elemen biasanya terdiri dari tag pembuka, isi, dan tag penutup. Atribut memberikan informasi tambahan, contohnya href pada tautan atau alt pada gambar.

Elemen yang sering digunakan

  • <h1>–<h6> untuk judul bertingkat, <p> untuk paragraf.
  • <a> untuk tautan, <img> untuk gambar.
  • <ul>/<ol> dan <li> untuk daftar.
  • <header>, <main>, <section>, dan <footer> untuk struktur semantik.
CONTOH STRUKTUR HTML
<main>
  <h1>Halo, dunia!</h1>
  <p>Ini halaman web pertamaku.</p>
  <a href="materi.html">Baca materi</a>
</main>
Coba pikirkan

Mengapa teks alternatif alt pada gambar bermanfaat bagi pengguna pembaca layar dan ketika gambar gagal dimuat?

05TAMPILAN WEB

CSS

Cascading Style Sheets mengatur tampilan halaman HTML, termasuk warna, tipografi, jarak, tata letak, dan responsivitas.

Cara kerja aturan CSS

Aturan CSS terdiri dari selector dan deklarasi. Selector memilih elemen, sedangkan deklarasi berisi pasangan properti dan nilai. Contoh: p { color: #333; } mengubah warna teks paragraf.

Konsep penting

  • Cascade: beberapa aturan dapat berlaku; prioritas, urutan, dan kekhususan menentukan hasilnya.
  • Box model: elemen tersusun dari content, padding, border, dan margin.
  • Layout: Flexbox untuk susunan satu dimensi, Grid untuk baris dan kolom.
  • Responsive: media query menyesuaikan tampilan dengan ukuran layar.
CONTOH
.kartu {
  background-color: #eaf7ec;
  padding: 1rem;
  border-radius: 12px;
}
Coba pikirkan

Bagaimana kamu membuat sebuah kartu tampil dalam satu kolom di ponsel dan tiga kolom di layar lebar? Cari tahu bagaimana CSS Grid dan media query membantu.

06INTERAKSI WEB

JavaScript

JavaScript adalah bahasa pemrograman yang menambahkan logika dan interaksi pada halaman web, seperti merespons klik, memeriksa formulir, dan memperbarui konten.

Konsep dasar

  • Variabel: menyimpan nilai dengan const atau let.
  • Tipe data: string, number, boolean, array, object, dan lainnya.
  • Kondisi: if/else memilih tindakan berdasarkan syarat.
  • Perulangan: for atau while menjalankan instruksi berulang.
  • Fungsi: blok kode yang dapat dipanggil untuk melakukan tugas tertentu.

Berinteraksi dengan halaman

JavaScript dapat memilih elemen HTML melalui DOM, lalu mengubah teks, atribut, atau tampilannya. Event listener menjalankan fungsi saat terjadi peristiwa seperti klik atau pengetikan.

CONTOH · MERESPONS KLIK
const tombol = document.querySelector("#tombol");
tombol.addEventListener("click", () => {
  alert("Semangat belajar coding!");
});
Coba pikirkan

Buat ide interaksi sederhana untuk halaman web, misalnya tombol yang mengubah teks. Elemen HTML apa yang dibutuhkan dan peristiwa apa yang akan didengarkan?

✿
Satu langkah lagi, satu hal baru yang kamu bisa.

Ulangi materi, coba contoh, lalu buat proyek kecilmu sendiri.

TENTANG KELAS INI

Belajar, mencoba,
lalu bertumbuh.

Kelas Excellent - Coding adalah catatan belajar untuk merangkum dasar-dasar teknologi dan pemrograman. Materi ini digunakan sebagai titik awal untuk terus bereksplorasi.

Kembali ke atas ↑