Membina Rangka Halaman
Jana struktur halaman melalui arahan.
Membina Rangka Halaman ialah pelajaran Pengekodan Vibe percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengekodan Vibe, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.
Apakah Halaman Pendaratan?
Halaman pendaratan ialah satu halaman web yang memperkenalkan satu produk, aplikasi atau idea. Pelawat tiba, mengetahui perkara yang anda tawarkan dan mengklik satu butang utama.
Dalam kursus ini, anda tidak akan menulis kod sendiri. Anda akan menerangkan halaman itu kepada pembantu AI dalam bahasa Inggeris biasa, dan AI akan membinanya untuk anda.
Mulakan dengan Rangka Asas
Sebelum memikirkan warna atau perkataan yang menarik, anda memerlukan rangka asas: tulang halaman itu. Ini dipanggil pembinaan rangka.
Permintaan pertama yang baik meminta AI menyediakan struktur asas dengan pengepala, bahagian utama dan pengaki. Pastikan ia ringkas. Anda sentiasa boleh menambah lebih banyak perkara kemudian.
Create a single HTML file for a landing page.
It should have a header at the top, a main section in the middle, and a footer at the bottom.
Use plain HTML for now, no styling yet.Nyatakan Perkara yang Dibincangkan Halaman
AI berfungsi dengan lebih baik apabila mengetahui topik anda. Beritahu AI tentang produk atau idea itu dalam satu ayat.
Berikan nama dan matlamat ringkas. Semakin konkrit penerangan anda, semakin hampir hasil pertama kepada perkara yang anda bayangkan.
Build a landing page for a mobile app called "PlantPal".
PlantPal reminds people to water their houseplants.
Start with just the page structure: header, hero section, and footer.Bahagian Utama
Bahagian utama ialah kawasan besar di bahagian atas halaman. Biasanya bahagian ini mempunyai tajuk, satu ayat ringkas dan satu butang.
Semasa membina rangka, minta AI meninggalkan ruang letak yang jelas dalam bahagian utama supaya anda tahu tempat tajuk dan butang.
Add a hero section near the top of the page.
Include a large headline, one short subtitle line, and a single call-to-action button that says "Get Started".Minta Satu Fail
Sebagai pemula, lebih mudah untuk bekerja dengan satu fail yang boleh dibuka dalam pelayar. Banyak alat AI membahagikan kod kepada beberapa fail secara lalai.
Jadi, anda perlu meminta dengan jelas satu fail HTML yang berdikari. Kemudian anda hanya mempunyai satu perkara untuk dibuka dan dipratonton.
Put everything in one single index.html file.
Keep the HTML, structure, and any styles together so I can open it directly in a browser.Namakan Bahagian Anda
Beritahu AI bahagian yang anda mahukan supaya rangka itu sepadan dengan pelan anda. Bahagian halaman pendaratan yang biasa ialah: bahagian utama, ciri, testimoni dan seruan tindakan terakhir.
Anda tidak memerlukan semuanya sekarang. Menamakannya dari awal memberikan bentuk yang jelas kepada halaman.
Scaffold the page with these empty sections in order:
1. Hero
2. Features
3. How It Works
4. Footer
Leave a short placeholder line inside each one.Pastikan Permintaan Ringkas dan Jelas
Permintaan yang panjang dan berserabut mengelirukan AI. Permintaan ringkas dengan satu arahan yang jelas memberikan hasil terbaik.
Jika anda mahukan banyak perkara, mintanya satu langkah pada satu masa. Bina rangka dahulu, kemudian tambah butiran dalam mesej seterusnya.
Baca Hasil Pertama
Selepas AI membalas, lihat perkara yang dihasilkannya. Adakah terdapat pengepala, bahagian utama dan pengaki? Adakah nama bahagian anda ada?
Anda tidak perlu memahami setiap baris kod. Semak sahaja sama ada bahagian besar itu sepadan dengan permintaan anda sebelum meneruskan.
Membaiki Bahagian yang Tertinggal
Jika AI terlupa sesuatu, nyatakan sahaja dengan jelas. Anda tidak perlu bermula semula.
Tunjukkan bahagian yang tertinggal dan minta AI menambahnya. AI akan mengekalkan bahagian lain dan menambah perkara yang anda minta.
The footer is missing. Please add a simple footer at the bottom with the text "PlantPal 2025".
Keep everything else the same.Ruang Letak Tidak Mengapa
Pada peringkat awal, tidak mengapa jika perkataannya sementara, seperti "Tajuk diletakkan di sini". Ruang letak ini menandakan tempat kandungan sebenar akan diletakkan.
Pembinaan rangka adalah tentang struktur, bukan teks akhir. Anda akan menggantikan perkataan ruang letak dalam pelajaran kemudian.
Titik Permulaan yang Kemas
Setakat ini, anda boleh meminta AI menyediakan rangka yang kemas: pengepala, bahagian utama, beberapa bahagian bernama dan pengaki, semuanya dalam satu fail.
Asas yang kemas ini menjadikan setiap langkah seterusnya lebih mudah. Permulaan yang berserabut membawa kepada halaman yang berserabut, jadi pastikan rangkanya betul.
Give me a clean single-file landing page skeleton for "PlantPal".
Sections in order: header, hero with a "Get Started" button, features, footer.
Use placeholder text inside each section.Semakan Pantas
Mari semak maksud pembinaan rangka.
Rumusan: Pembinaan Rangka
Anda telah belajar bahawa halaman pendaratan ialah satu halaman yang tertumpu, dan pembinaan rangka membina rangkanya terlebih dahulu.
Anda telah berlatih membuat permintaan yang jelas: namakan produk, senaraikan bahagian, minta satu fail dan gunakan ruang letak. Seterusnya, anda akan menggayakan rangka ini hanya menggunakan bahasa biasa.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 25
- Pelajaran
- 100
Soalan Lazim
Adakah pelajaran “Membina Rangka Halaman” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pengekodan Vibe, termasuk “Membina Rangka Halaman”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Membina Rangka Halaman”?
Jana struktur halaman melalui arahan. Anda berlatih Pengekodan Vibe menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Pengekodan Vibe?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengekodan Vibe di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Membina Rangka Halaman” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengekodan Vibe ini?
Ya. Setiap pelajaran Pengekodan Vibe menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Membina Rangka Halaman
- Menggayakan dengan Bahasa Biasa
- Menambah Bahagian dan Kandungan
- Membuat Pratonton dan Pelarasan