belajar web development (html css dan js)

ca

HTML (HyperText Markup Language) adalah kerangka dasar dari halaman web. Ia digunakan untuk menyusun struktur dan isi halaman.

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan gaya dari elemen HTML: warna, ukuran, posisi, animasi, dll.

JavaScript (JS) JavaScript memberikan interaksi dan logika dinamis pada website — seperti tombol yang bisa diklik, animasi, validasi form, dll. 


Day 1 - HTML

Day 1 (HTML): Belajar struktur halaman web (tag <html>, <body>, <div>, <a>, <img>, dll).

ini kerangka dasar html


  • <html>: Elemen utama halaman
  • <head>: Bagian informasi (judul tab, link CSS)
  • <body>: Semua isi yang tampil di layar

 📚 DASAR HTML

Topik Penjelasan Contoh
HTML Introduction   Apa itu HTML, sejarah, fungsi    <html>
HTML Editors Text editor untuk ngoding VS Code, Notepad++
HTML Elements Elemen dasar HTML <h1>Hello</h1>
HTML Attributes Properti dalam elemen <img src="gambar.jpg" alt="deskripsi">
HTML Headings Judul-judul konten <h1>Judul Besar</h1>
HTML Paragraphs Paragraf teks <p>Ini paragraf.</p>
HTML Comments Komentar dalam kode <!-- Ini komentar -->

🎨 STYLE DAN TAMPILAN
Topik Penjelasan Contoh
HTML Styles CSS langsung di HTML <p style="color:red;">Merah</p>
HTML Formatting   Format teks <b>Bold</b>, <i>Italic</i>
HTML Colors Warna teks & background style="background-color: yellow;"
HTML CSS Menghubungkan HTML & CSS    <link rel="stylesheet" href="style.css">

🔗 LINK, GAMBAR, MEDIA
Topik Penjelasan Contoh
HTML Links Tautan/link <a href="https://...">Kunjungi</a>
HTML Images Menampilkan gambar    <img src="gambar.jpg">
HTML Favicon Icon di tab browser <link rel="icon" href="icon.png">
HTML Video/Audio    Media player <video src="video.mp4" controls></video>

📋 STRUKTUR & LAYOUT
Topik Penjelasan Contoh
HTML Tables Tabel data <table><tr><td>Data</td></tr></table>
HTML Lists Daftar <ul><li>Item</li></ul>
HTML Div Bagian blok <div class="kotak">...</div>
HTML Classes / ID     Untuk styling & JS     <div class="box" id="hero">...</div>
HTML Layout Layout website <header>, <main>, <footer>
HTML Responsive Mobile-friendly viewport, media queries

🧾 FORMS (Formulir Input)
Topik Penjelasan Contoh
HTML Forms Form input pengguna     <form><input type="text"></form>
Input Types Jenis input text, email, password
Input Attributes     Properti tambahan required, placeholder, value

🧩 HTML ADVANCED & APIs
Topik Penjelasan Contoh
HTML Iframes Menyisipkan halaman lain <iframe src="https://..." />
HTML JavaScript Menyisipkan JS ke HTML <script>console.log('Hi')</script>
HTML Web Storage Menyimpan data lokal localStorage.setItem()
HTML Canvas / SVG    Gambar/ilustrasi dengan kode     <canvas>, <svg>
HTML Geolocation Lokasi pengguna navigator.geolocation.getCurrentPosition()

websitenya : HTML Tutorial
Day 2 - CSS
Day 2 (CSS): Belajar mempercantik tampilan: warna, font, jarak, ukuran.
3 cara menulis css
1. Inline CSS (langsung di elemen HTML)

2. Internal CSS (di dalam <style> tag)

3. Eksternal CSS (file .css terpisah)

🔰 CSS DASAR

Topik Penjelasan Contoh
CSS Introduction Apa itu CSS dan kegunaannya CSS mengatur tampilan HTML
CSS Syntax Struktur penulisan CSS selector { property: value; }
CSS Selectors Cara memilih elemen p, .class, #id
CSS How To Cara menggunakan CSS (inline, internal,  external) <link href="style.css">
CSS Comments Komentar di CSS /* ini komentar */
CSS Colors / Backgrounds  Warna & latar color: red; background: yellow;
CSS Borders, Margin, Padding Jarak dan batas elemen margin: 10px; border: 1px solid;
CSS Box Model Cara browser hitung ukuran elemen width + padding + border + margin

✍️ TEKS & TAMPILAN
Topik Fungsi Contoh
CSS Text / Fonts Mengatur teks & font font-family: Arial; text-align: center;
CSS Icons Menambahkan ikon Pakai Font Awesome, Bootstrap Icons
CSS Links / Lists / Tables  Mengatur tampilan elemen ini text-decoration: none; list-style: none;

📐 UKURAN & POSISI
Topik Penjelasan Contoh
CSS Display Mengatur cara elemen tampil display: block; inline; flex; none
CSS Position / Z-index Posisi elemen di layar position: absolute; z-index: 10;
CSS Overflow / Float / Inline-block Kontrol alur & tumpahan konten overflow: hidden; float: left;

🔗 ADVANCED CSS
Topik Penjelasan Contoh
CSS Pseudo-classes Gaya berdasarkan kondisi a:hover, input:focus
CSS Pseudo-elements Gaya bagian dari elemen ::before, ::after
CSS Transitions / Animations Efek gerak transition: all 0.3s ease;
CSS Variables Custom variabel CSS --main-color: blue;
CSS Shadow, Gradients Efek visual box-shadow, linear-gradient(...)

🧱 LAYOUT: FLEXBOX & GRID
Topik Penjelasan Contoh
Flexbox Layout 1 dimensi (horizontal/vertical) display: flex;
Grid Layout 2 dimensi display: grid; grid-template-columns: ...

🌍 RESPONSIVE DESIGN
Topik Penjelasan Contoh
CSS Media Queries Gaya untuk layar tertentu @media (max-width: 600px)
Viewport / Images / Videos Menyesuaikan elemen di mobile width: 100%; height: auto;
Frameworks & Templates CSS siap pakai Bootstrap, Tailwind CSS

🔄 SASS (CSS Superpower)
Topik Penjelasan
SASS Bahasa preprocessor yang membuat CSS lebih kuat: variabel, nesting, mixin
websitenya : HTML Tutorial
Day 3 - Layout
Day 3 (Layout): Menyusun elemen agar rapi dengan Box Model dan Flexbox.

🧊 1. Apa Itu CSS Box Model?

Semua elemen HTML dianggap sebagai kotak (box). Box model terdiri dari:

+----------------------------+
|        Margin             |   ← Jarak luar elemen
|  +---------------------+  |
|  |      Border         |  |   ← Garis tepi
|  |  +--------------+   |  |
|  |  |   Padding     |  |  |   ← Jarak dalam konten
|  |  | +----------+  |  |  |
|  |  | |  Content |  |  |  |   ← Isi utama
|  |  | +----------+  |  |  |
|  |  +--------------+  |  |
|  +---------------------+  |
+----------------------------+

Contoh 📝 day3_boxmodel.html

<!DOCTYPE html>
<html>
<head>
  <title>Box Model</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 2px solid black;
      margin: 30px auto;
      background-color: #f0f0f0;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">Ini Kotak</div>
</body>
</html>

🔧 3. Apa Itu Flexbox?

Flexbox (Flexible Box) adalah cara mudah untuk membuat layout horizontal/vertical.

Dasar Flexbox:

.flex-container {
  display: flex;
}

Properti Umum:

Properti Fungsi
justify-content   Mengatur posisi horizontal
align-items Mengatur posisi vertical
flex-direction Urutan: row, column
flex-wrap Membungkus item saat overflow

Contoh📝 day3_flexbox.html

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Layout</title>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 200px;
      background-color: #e0f7fa;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #00acc1;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>
websitenya : HTML Tutorial
Day 4 - Responsive

Day 4 (Responsive): Membuat desain tetap bagus di HP atau desktop.

🔥  1. Apa itu Responsive Design?

Responsive Web Design adalah teknik membuat tampilan website menyesuaikan ukuran layar pengguna — baik itu HP, tablet, maupun laptop. 

Contohnya:

  • Di layar besar: menu horizontal

  • Di HP: menu jadi tombol ☰

🎨 2. Viewport Meta Tag (WAJIB!)

Tambahkan di <head> HTML agar desain responsif bekerja:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

💡 3. Apa itu Media Queries?

Media Queries adalah fitur CSS untuk memberikan gaya berbeda tergantung ukuran layar.📏 Contoh:

/* Gaya umum untuk semua layar */
body {
  font-size: 18px;
}

/* Gaya khusus layar kecil (maksimal 768px) */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

🛠️ 4. Contoh Responsive Layout

📝 day4_responsive.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout</title>
  <style>
    .container {
      display: flex;
      gap: 20px;
      padding: 20px;
    }

    .box {
      flex: 1;
      background-color: #4caf50;
      color: white;
      text-align: center;
      padding: 40px;
      font-size: 20px;
      border-radius: 10px;
    }

    /* RESPONSIVE: di HP jadi kolom */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>
websitenya : HTML Tutorial
Day 5 - CSS Lanjutan

Day 5 (CSS Lanjutan): Belajar efek animasi, hover, transisi, pseudo.

🧠 1. Apa itu Hover, Transition, Transform, dan Animation?

Konsep Penjelasan Singkat
:hover   Gaya yang aktif saat kursor diarahkan ke elemen
transition     Animasi mulus saat elemen berubah gaya (warna, posisi)
transform Mengubah bentuk/posisi elemen (scale, rotate, translate)
@keyframes Membuat animasi kompleks berulang atau sekali jalan

🧪 2. Contoh Hover + Transition

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      background-color: #007bff;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      transition: background-color 0.3s ease;
    }

    .btn:hover {
      background-color: #0056b3;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="btn">Hover Me!</button>
</body>
</html>

🌀 3. Contoh Transform + Scale

<style>
.card {
  width: 200px;
  padding: 20px;
  background: #4caf50;
  color: white;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.1); /* Membesar saat hover */
}
</style>

<div class="card">Hover untuk Membesar</div>

🎬 4. Contoh @keyframes Animation

<style>
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.banner {
  background: coral;
  color: white;
  padding: 20px;
  animation: slideIn 1s ease-out forwards;
}
</style>

<div class="banner">Animasi Slide In</div>
websitenya : HTML Tutorial
Day 6 - JS

Day 6 (JavaScript): Membuat web interaktif (misalnya klik tombol munculkan pesan). 

Letakkan di dalam tag <script> di HTML:



🛠️ 2. DOM (Document Object Model)
DOM adalah cara kita mengakses dan mengubah isi HTML lewat JavaScript.

Contoh:

🖱️ 3. Event (Interaksi)


Daftar panjang yang kamu tampilkan adalah struktur topik atau modul pembelajaran JavaScript, biasanya ditemukan di situs seperti W3Schools. Ini adalah panduan menyeluruh yang mencakup hampir semua aspek JavaScript — dari dasar hingga lanjutan, termasuk interaksi dengan HTML dan API browser.

Berikut adalah penjelasan singkat dan contoh dari beberapa kategori utama agar kamu paham konteksnya:

🟢 Dasar JavaScript

Topik Penjelasan Contoh
JS Variables      Cara menyimpan data let x = 5;
JS Functions Fungsi reusable function greet() { alert("Hi!"); }
JS Operators Operasi matematika dan logika x + y, x > y
JS Strings Teks dalam JavaScript "Hello World"
JS Arrays Kumpulan data dalam satu variabel       [1, 2, 3]

🟡 Objek dan OOP
Topik Penjelasan Contoh
JS Objects Struktur data kompleks    let user = {name: "Budi", age: 20};
Object Methods Fungsi dalam objek user.sayHi = () => alert("Hi")
JS Classes OOP modern class Person { constructor(name) { this.name = name; }}

🔵 Kontrol Alur & Logika
Topik Penjelasan Contoh
If Else    Pengambilan keputusan       if (x > 10) {...}
Switch Pilihan banyak kondisi switch(x) { case 1: ... }
Loops Pengulangan for, while, forEach

🟣 DOM Manipulation

DOM: cara JavaScript berinteraksi dengan HTML.

Topik Penjelasan Contoh
DOM Methods    Mengakses elemen HTML    document.getElementById("demo")
DOM Events Tanggapi klik, ketik, dll. element.addEventListener("click", myFunc)

🧠 Async & API
Topik Penjelasan Contoh
JS Promises Tunggu hasil proses async     fetch(url).then(...)
Async/Await Penulisan async modern async function loadData() { await fetch(...) }
AJAX / Fetch API    Ambil data dari server fetch("api.json").then(...)

🔥 Grafik & Visualisasi
Topik Penjelasan Contoh
JS Canvas Gambar grafik 2D     ctx.fillRect(0,0,150,75)
Chart.js, D3.js     Visualisasi data Pie chart, bar chart, dll

📦 Web Storage & API Browser
Topik Penjelasan Contoh
Local Storage Simpan data di browser    localStorage.setItem("key", "value")
Geolocation API     Lokasi pengguna navigator.geolocation.getCurrentPosition()

🛠️ Modul Lanjutan

  • JSON: Format data seperti { "name": "Budi" }

  • ES6+: Fitur modern seperti let, const, arrow function, class

  • jQuery: Library JS lama untuk manipulasi DOM (banyak digantikan oleh JS modern)

  • JavaScript Modules: Pisahkan kode menjadi file modular

websitenya : HTML Tutorial

Day 7 - Project

Day 7 (Project): Gabungkan semua jadi satu mini-project.

ku buat di codepen


berikan link github


0 Comments