Materi 11 - Programming dan Data Science

HTML, CSS, dan JavaScript Foundation

Tiga pillar web development. Struktur, styling, dan interaktivitas.

Durasi 28 Menit Level beginner Kurikulum 30 Materi

1. HTML Adalah Struktur

HyperText Markup Language. Tag adalah element dasar (h1, p, div, img). Semantic tag penting untuk SEO dan accessibility (header, nav, article, footer). Validasi di W3C validator.

2. CSS Adalah Styling

Cascading Style Sheets. Selector menargetkan element. Property-value pair untuk styling. Box model: content, padding, border, margin. Layout modern: flexbox dan grid.

3. JavaScript Adalah Interaktivitas

Bahasa pemrograman browser. Manipulasi DOM, handle event, fetch data dari API. Modern JS: ES6+ dengan let, const, arrow function, template literal, destructuring.

4. Responsive Design

Web harus baik di desktop, tablet, mobile. Pakai CSS media query untuk breakpoint. Mobile-first approach: design untuk mobile dulu, lalu enhance untuk layar besar.

5. Modern Tools

VS Code (editor). Chrome DevTools (debugging). Live Server (auto reload). Prettier (formatter). ESLint (linter). Vite atau Webpack (bundler) untuk project lebih besar.

Tugas Praktik

  1. Bangun landing page personal portfolio
  2. Praktek flexbox dan grid layout
  3. Tambah JavaScript interaktivitas (form validation)
  4. Buat responsive untuk mobile dan desktop
  5. Deploy ke GitHub Pages atau Netlify

Rangkuman