Langkau ke kandungan
WANCODE
EN

▍Belajar / HTML & CSS

Bina Laman Web Pertama Anda

Bermula dari kosong. Fahami cara web berfungsi, tulis HTML sebenar, gayakan dengan CSS, kuasai Flexbox dan Grid, jadikan ia responsif — dan akhiri dengan landing page anda sendiri.

12 pelajaran diterbitkan 2.9 jamPemula

Mula laluan ini

Percuma untuk bermula. Tiada pendaftaran.

  1. 01Apa Sebenarnya Berlaku Apabila Anda Buka Laman Web?Ikuti perjalanan laman web dari bar alamat ke skrin — kemudian sunting halaman web sebenar dan lihat pelayar melukisnya semula.
  2. 02Halaman HTML Pertama AndaTulis halaman HTML lengkap dari kosong: doctype, html, head dan body, serta cara tag, nesting dan komen berfungsi.
  3. 03Tajuk, Perenggan & TeksBeri teks anda rangka yang jelas dengan h1–h6, pecahkan kepada perenggan sebenar, dan guna strong serta em untuk makna, bukan sekadar rupa.
  4. 04Pautan, Gambar & SenaraiHubungkan halaman dengan pautan, tambah gambar dengan teks alt yang berguna, dan susun kandungan dalam senarai berbutir dan bernombor.
  5. 05Memahami Struktur HTMLGantikan timbunan div dengan header, nav, main, section, article dan footer, dan lihat halaman anda sebagai pokok yang dibina pelayar.
  6. 06Pengenalan kepada CSSTulis peraturan CSS pertama anda: selector, property dan value, selector element, class dan id, serta cara cascade menentukan peraturan mana yang menang.
  7. 07Warna, Fon & JarakGayakan kad jemputan sebenar: format warna (nama, hex, rgb, hsl), font stack, saiz dan line height yang mudah dibaca, serta margin berbanding padding.
  8. 08Box Model: Padding, Border dan MarginSetiap elemen ialah kotak. Belajar content, padding, border dan margin, betulkan jarak, dan jadikan kiraan lebar mudah dijangka dengan border-box.
  9. 09Flexbox DipermudahkanSusun elemen dalam satu baris, jarakkan mereka, dan tengahkan apa sahaja — lima property flexbox yang anda akan guna setiap hari.
  10. 10Asas CSS GridBina galeri kad yang kemas dengan CSS Grid: lajur dengan fr dan repeat(), gap, dan item yang merentas lebih daripada satu lajur.
  11. 11Reka Bentuk Responsif: Satu Halaman, Semua SkrinBina halaman yang berfungsi di telefon, tablet dan laptop: tag viewport, lebar fleksibel, gambar fleksibel dan media query mobile-first.
  12. 12Projek: Bina Laman Peribadi AndaGabungkan semuanya: laman peribadi yang responsif dengan HTML semantik, nav, hero, bahagian tentang diri dan grid projek.