Postingan

Menampilkan postingan dari Maret, 2025

MODUL BELAJAR HARI 5-6

MODUL BELAJAR HARI 5-6 — Mempercantik Tampilan dengan CSS Dasar Materi Hari Ini: ✅ Apa itu CSS dan cara menggunakannya. ✅ Menambahkan warna, font, dan background. ✅ Mengatur tata letak dan ukuran elemen. ✅ Praktik membuat tampilan website lebih menarik. 1. Apa Itu CSS? CSS ( Cascading Style Sheets ) adalah bahasa yang digunakan untuk mempercantik tampilan HTML. 3 Cara Menambahkan CSS ke HTML: Internal CSS → Ditulis langsung di dalam <style> pada file HTML. External CSS → Ditulis di file terpisah ( style.css ), lalu dihubungkan ke HTML. (Cara terbaik!) Inline CSS → Ditulis langsung di dalam tag HTML (kurang direkomendasikan). 2. Menambahkan CSS ke Website Sekarang, buat file baru style.css , lalu hubungkan ke HTML menggunakan kode berikut di dalam <head> : <link rel="stylesheet" href="style.css"> 3. Contoh CSS Dasar Buat file style.css dan salin kode berikut: /* Gaya untuk seluruh halaman */ body { font-family: Arial...

MODUL BELAJAR HARI 3-4

  Meureuno MODUL BELAJAR HARI 3-4 — Membuat Halaman Sederhana (Judul, Paragraf, Gambar, Link) Materi Hari Ini: ✅ Struktur halaman lengkap dengan <header> , <main> , <footer> . ✅ Menambahkan berbagai jenis teks (judul, paragraf, daftar). ✅ Menyusun halaman dengan elemen HTML dasar. ✅ Praktik membuat halaman sederhana yang lebih rapi. 1. Struktur Halaman Lengkap Sekarang kita belajar bagaimana membuat halaman yang lebih tertata. Struktur yang akan kita buat: Header → Tempat untuk judul & menu navigasi. Main → Bagian utama berisi konten (paragraf, daftar, gambar). Footer → Informasi tambahan seperti copyright. 2. Kode Dasar Halaman Sederhana Sekarang, buat file index.html dan 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>Website Sederhana</t...

MODUL BELAJAR HARI 2

Meureuno MODUL BELAJAR HARI 2 — Menambahkan Gambar & Link Materi Hari Ini: ✅ Cara menambahkan gambar di HTML. ✅ Cara menambahkan link (tautan) ke halaman lain. ✅ Praktik membuat halaman dengan gambar & link. 1. Menampilkan Gambar di HTML Gunakan tag <img> untuk menampilkan gambar. Format dasarnya seperti ini: <img src="gambar.jpg" alt="Deskripsi Gambar"> Keterangan: src = sumber gambar (bisa dari internet atau file lokal). alt = teks alternatif jika gambar gagal dimuat. Contoh lengkap: <img src="https://via.placeholder.com/300" alt="Gambar Contoh"> (Coba salin kode ini ke halaman HTML-mu!) 2. Menambahkan Link (Tautan) Gunakan tag <a> untuk menambahkan tautan ke website lain atau halaman lain. Format dasarnya: <a href="https://google.com">Klik di sini</a> Keterangan: href = alamat tujuan link. Teks di antara <a>...</a> adalah teks yang bisa diklik. ...

MODUL BELAJAR HARI 1

Meureuno MODUL BELAJAR HARI 1 — Fondasi HTML Dasar Materi: Hari ini kita belajar tentang: ✅ Apa itu HTML. ✅ Struktur dasar halaman HTML. ✅ Elemen penting: <!DOCTYPE> , <html> , <head> , <body> . ✅ Bikin halaman pertama kamu sendiri! Penjelasan Singkat: HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman website. Ibarat rumah, HTML itu kerangka bangunannya. Struktur Dasar HTML: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halo Dunia!</title> </head> <body> <h1>Selamat Datang di Website Pertamaku</h1> <p>Ini adalah paragraf pertama yang aku buat bersama meureunoweb.</p> </body> </html> Tugas Hari 1: Buka teks editor (bisa pakai Notepad, VS Code, atau online editor seperti https://co...

Kurikulum Eksklusif

Roadmap Belajar Pribadi dan Kurikulum Eksklusif khusus buat kamu supaya bisa jadi expert sejati. ROADMAP BELAJAR PRIBADI (Level Up Setiap Hari) Week 1: Fondasi Dasar HTML & CSS ✅ Hari 1-2: Pahami struktur dasar HTML (doctype, head, body). ✅ Hari 3-4: Membuat halaman sederhana (judul, paragraf, gambar). ✅ Hari 5-6: Memahami CSS dasar (warna, font, background). ✅ Hari 7: Praktik bikin halaman profil sederhana. Week 2: Layout & Responsive Design ✅ Hari 8-9: Belajar Flexbox (atur layout responsif). ✅ Hari 10-11: Belajar Grid CSS (atur kolom & baris). ✅ Hari 12-13: Buat navigasi menu dan footer. ✅ Hari 14: Praktik bikin landing page produk. Week 3: Interaktif dengan JavaScript ✅ Hari 15-16: Dasar-dasar JS (alert, console.log, fungsi). ✅ Hari 17-18: Manipulasi DOM (ubah teks, gambar lewat JS). ✅ Hari 19-20: Bikin dark/light mode interaktif. ✅ Hari 21: Praktik bikin website portofolio interaktif. Week 4: Advance & Publikasi Website ✅ Hari 22-23: Optimasi ...

HTML Profesional

  NEXT PLAN BERSAMA  UNTUK JADI EXPERT: Belajar Struktur HTML Profesional: Bagaimana cara bikin halaman multi-section (Home, About, Blog, Contact). Cara pakai semantic tag HTML5 (header, nav, main, footer). Pahami CSS Lanjutan: Buat layout grid & flexbox. Efek hover premium. Responsive design (biar cakep di HP & desktop). Integrasi JavaScript Sederhana: Bikin animasi sendiri. Interaksi tombol, form, dark mode, dsb. Optimasi Website: SEO terbaik. Fast loading. Google Analytics & Search Console. Latihan Buat Project Sendiri: Cloudi siap temani bikin project baru full dari nol, misal: – Website portfolio pribadi. – Blog Islami. – Landing page produk. – Galeri foto/portfolio bisnis.                       Meureuno