Halaman Portfolio Peribadi

1.5 jamPemulaHTMLCSSResponsive designCSS Grid

Hasil

Portfolio satu halaman yang betul-betul boleh anda terbitkan: hero yang menonjol, cerita ringkas tentang diri anda, grid kad projek yang bertukar daripada satu ke tiga lajur, dan pautan hubungan yang berfungsi.

Objektif pembelajaran

Susun halaman sebenar dengan HTML semantik: header, nav, main, section, article, footer
Hubungkan bahagian halaman dengan anchor dalam halaman (href="#projects")
Gayakan hero, kad dan butang dengan jarak, warna dan bucu bulat
Jadikan grid responsif dengan tag meta viewport dan @media query

Prasyarat

Anda tahu apa itu tag HTML dan cara pelayar memaparkan halaman — lihat Apa Sebenarnya Berlaku Apabila Anda Buka Laman Web?
Asas CSS: selector, warna, padding dan margin (trek HTML & CSS ada menerangkannya)

Tingkah laku yang dijangka

Bahagian atas halaman memaparkan hero dengan nama anda, slogan satu baris, bar navigasi kecil dan butang call-to-action.
Klik pautan navigasi akan skrol ke bahagian yang sepadan (About, Projects, Contact).
Sekurang-kurangnya tiga kad projek dalam grid: satu lajur pada telefon, lebih banyak lajur pada skrin lebar.
Bahagian hubungan ada pautan mailto: yang berfungsi dan sekurang-kurangnya satu pautan profil lain.

Portfolio ialah perkara pertama yang ramai majikan dan pelanggan akan lihat. Ia tak perlu canggih — ia perlu jelas, laju dan senang dibaca di telefon. Dalam projek ini anda akan membinanya daripada halaman kosong, satu milestone demi satu milestone.

Text

header.hero    → nav + name + tagline + button
main
  #about       → who you are
  #projects    → .grid of .project-card
  #contact     → email + profile links
footer

Rangka halaman yang akan anda bina. Setiap milestone menambah satu lapisan.

Gunakan nama anda sendiri dan projek sebenar (atau yang dirancang). Teks contoh tak apa semasa membina — tapi tukarlah sebelum anda kongsi halaman ini.

Lajur CSS Grid

1

2

3

4

5

6

0 lajur → 1 garisan grid

/* CSS */

.grid {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 12px;

}

fr = satu bahagian daripada ruang yang tinggal. px = saiz tetap.

grid-template-columns

gap12px.item-1 { grid-column: span 2 }

Saiz trek di atas grid diukur terus daripada pelayar anda. Dipermudahkan: hanya lajur ditunjukkan; baris dicipta secara automatik.

Milestone 5 menggunakan CSS Grid untuk menyusun kad projek. Cuba main dengan lajur di sini dahulu.

Peringkat

Gantikan komen pertama dalam <body> dengan <header class="hero">. Di dalamnya, tambah:

• <nav> dengan tiga pautan: #about, #projects dan #contact • <h1> dengan nama anda • <p> dengan slogan satu baris tentang apa yang anda buat • pautan call-to-action dengan class="button" (contohnya href="#projects")

Semakan

Ada header.hero
Hero ada <h1> dengan nama anda
Hero ada perenggan slogan
Nav ada 3 pautan dalam halaman
Ada pautan call-to-action .button

Senarai semak penyiapan

Tandakan item ini apabila ia benar untuk projek anda. Projek selesai apabila setiap peringkat lulus dan setiap item ditanda.

Nama, slogan dan projek sebenar saya menggantikan semua teks contohSetiap pautan berfungsi: nav melompat ke section, e-mel membuka mesej baharu, pautan profil menuju ke tempat yang betulSaya sudah uji halaman pada lebar telefon (kad bertindan, tiada skrol ke tepi) dan lebar desktop (kad sebelah-menyebelah)Teks kontras dengan jelas berbanding latarnya dan jarak terasa konsistenSaya boleh tekan Tab melalui setiap pautan dengan papan kekunci dan nampak di mana fokus berada

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.