Postingan

MODUL BELAJAR HARI 17-18

-
  Hari 17-18: Manipulasi DOM (Dokumen Object Model) Hari ini kita akan belajar bagaimana JavaScript bisa mengubah elemen di halaman web secara dinamis! 1. Apa Itu DOM? DOM (Document Object Model) adalah struktur pohon dari elemen-elemen dalam halaman web. Dengan JavaScript, kita bisa: ✅ Mengubah teks dan gambar. ✅ Menambahkan atau menghapus elemen. ✅ Mengubah gaya (CSS) secara dinamis. 2. Mengubah Teks dengan JavaScript Buat file index.html dan tambahkan kode ini: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Manipulasi DOM</title> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { color: blue; } #text { font-size: 20px; color: green; } </style> </head> <body> <h1>Belajar Manipulasi DOM</h1> ...
Posting Komentar
Baca selengkapnya

MODUL BELAJAR HARI 15-16

-
  Week 3: Interaktif dengan JavaScript! 🚀 Sekarang kita masuk ke tahap membuat website lebih hidup dengan JavaScript! Hari 15-16: Dasar-dasar JavaScript Di sini kita akan belajar: ✅ Cara menulis JavaScript dasar. ✅ Menggunakan alert , console.log , dan variabel . ✅ Menjalankan JavaScript di dalam HTML. ✅ Mengenal operator & tipe data . 1. Menjalankan JavaScript di HTML Buat file index.html dan tambahkan script ini di dalamnya: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Belajar JavaScript</title> </head> <body> <h1>Belajar JavaScript Dasar</h1> <button onclick="sayHello()">Klik Aku!</button> <script> function sayHello() { alert("Halo! Selamat belajar JavaScript 🚀"); } ...
Posting Komentar
Baca selengkapnya

MODUL BELAJAR HARI 14

-
  Hari 14: Praktik Membuat Landing Page Produk! 🚀 Hari ini kita akan menggabungkan semua ilmu yang sudah dipelajari untuk membuat Landing Page Produk yang sederhana tapi elegan! 🎯 Tujuan Hari Ini: ✅ Membuat tampilan landing page yang menarik. ✅ Menggunakan Flexbox/Grid untuk tata letak. ✅ Menambahkan tombol CTA (Call to Action). ✅ Membuat tampilan responsif. 1. Struktur HTML Landing Page Buat file landing-page.html dan masukkan kode berikut: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Produk Cloudi</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav class="navbar"> <div class="logo">Cloudi Store</div> <ul class="nav-links"...
Posting Komentar
Baca selengkapnya

MODUL BELAJAR HARI 12-13

-
MODUL BELAJAR HARI 12-13 — Navigasi & Footer Responsif Materi Hari Ini: ✅ Membuat navigasi menu dengan HTML & CSS. ✅ Styling menu agar lebih menarik. ✅ Membuat footer yang responsif dan menarik. ✅ Praktik: Membuat navbar dengan efek hover & footer modern. 1. Membuat Navigasi Menu Buat file navigation.html dan tambahkan kode berikut: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Navbar & Footer</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar"> <div class="logo">Cloudi Web</div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">...
Posting Komentar
Baca selengkapnya

MODUL BELAJAR HARI 10-11

-
MODUL BELAJAR HARI 10-11 — Belajar Grid CSS untuk Layout Website Materi Hari Ini: ✅ Apa itu CSS Grid dan kapan menggunakannya? ✅ Struktur dasar Grid CSS. ✅ Membuat layout dengan beberapa kolom dan baris. ✅ Praktik: Membuat layout website sederhana dengan Grid. 1. Apa Itu CSS Grid? CSS Grid adalah sistem layout yang memungkinkan kita mengatur elemen dalam bentuk baris dan kolom dengan lebih mudah. Keunggulan Grid CSS dibanding Flexbox: ✔️ Bisa mengatur baris dan kolom sekaligus. ✔️ Cocok untuk desain halaman utama atau dashboard . ✔️ Fleksibel dalam mengatur ukuran elemen. 2. Struktur Dasar Grid CSS Buat file baru grid.html dan tambahkan kode ini: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Belajar Grid CSS</title> <link rel="stylesheet" href="style.css"...
Posting Komentar
Baca selengkapnya

MODUL BELAJAR HARI 8-9

-
  MODUL BELAJAR HARI 8-9 — Belajar Flexbox untuk Layout Responsif Materi Hari Ini: ✅ Apa itu Flexbox dan kenapa penting? ✅ Struktur dasar Flexbox. ✅ Menggunakan Flexbox untuk membuat layout yang rapi. ✅ Praktik: Membuat layout kartu profil responsif. 1. Apa Itu Flexbox? Flexbox (Flexible Box) adalah metode layout CSS yang mempermudah pengaturan elemen di dalam container. Dengan Flexbox, kamu bisa: ✔️ Mengatur elemen dalam satu baris atau kolom. ✔️ Membuat elemen rata tengah dengan mudah. ✔️ Membuat layout responsif tanpa ribet. 2. Struktur Dasar Flexbox Buat file flexbox.html lalu tambahkan kode ini: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Belajar Flexbox</title> <link rel="stylesheet" href="style.css"> </head> <body> <header...
Posting Komentar
Baca selengkapnya

MODUL BELAJAR HARI 7

-
  MODUL BELAJAR HARI 7 — Membuat Halaman Profil Sederhana Materi Hari Ini: ✅ Struktur dasar halaman profil. ✅ Menggunakan HTML & CSS untuk tampilan menarik. ✅ Menambahkan foto, biodata, dan gaya desain. ✅ Praktik langsung bikin halaman profil kamu sendiri! 1. Struktur Halaman Profil Buat file profil.html lalu salin kode berikut: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Profil Saya</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Halo, Saya [Nama Kamu]</h1> </header> <main> <section class="profil"> <img src="foto-profil.jpg" alt="Foto Profil"> <h2>Tentang Saya</h2> ...
Posting Komentar
Baca selengkapnya