0Pricing
Vibe Coding · درس

إنشاء هيكل الصفحة

أنشئ هيكل الصفحة باستخدام prompt

إنشاء هيكل الصفحة درس مجاني في Vibe Coding على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vibe Coding، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vibe Coding 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

What Is a Landing Page?

A landing page is a single web page that introduces one product, app, or idea. Visitors arrive, learn what you offer, and click one main button.

In this course you will not write the code yourself. You will describe the page to an AI assistant in plain English, and it builds it for you.

Start With the Skeleton

Before colors or fancy words, you need a skeleton: the bones of the page. This is called scaffolding.

A good first prompt asks the AI for a basic structure with a header, a main area, and a footer. Keep it simple. You can always add more later.

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.

Say What the Page Is About

The AI works better when it knows your topic. Tell it the product or idea in one sentence.

Give it a name and a short goal. The more concrete you are, the closer the first result will be to what you imagine.

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.

The Hero Section

The hero is the big area at the top of the page. It usually has a headline, one short sentence, and a button.

When scaffolding, ask the AI to leave clear placeholders in the hero so you know where the headline and button go.

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".

Ask for One File

As a beginner, it is easier to work with a single file you can open in a browser. Many AI tools spread code across several files by default.

So it helps to clearly ask for one self-contained HTML file. Then you only have one thing to open and preview.

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.

Name Your Sections

Tell the AI which sections you want so the skeleton matches your plan. Common landing page sections are: hero, features, testimonials, and a final call to action.

You do not need all of them now. Naming them early gives the page a clear shape.

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.

Keep Prompts Short and Clear

Long, tangled prompts confuse the AI. Short prompts with one clear request work best.

If you want many things, ask for them one step at a time. Build the skeleton first, then add details in later messages.

Read the First Result

After the AI replies, look at what it made. Does it have a header, hero, and footer? Are your section names there?

You do not need to understand every line of code. Just check that the big pieces match your request before moving on.

Fixing a Missing Piece

If the AI forgot something, just say so plainly. You do not need to start over.

Point at the missing part and ask for it. The AI keeps the rest and adds what you asked for.

The footer is missing. Please add a simple footer at the bottom with the text "PlantPal 2025".
Keep everything else the same.

Placeholders Are Fine

Early on, it is okay if the words are fake, like "Headline goes here". These placeholders mark where real content will live.

Scaffolding is about structure, not final text. You will replace the placeholder words in a later lesson.

A Clean Starting Point

By now you can ask the AI for a tidy skeleton: header, hero, a few named sections, and a footer, all in one file.

This clean base makes every later step easier. A messy start leads to a messy page, so it is worth getting the bones right.

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.

Quick Check

Let's check what scaffolding means.

Recap: Scaffolding

You learned that a landing page is one focused page, and that scaffolding builds its skeleton first.

You practiced clear prompts: name the product, list the sections, ask for one file, and use placeholders. Next, you will style this skeleton using only plain language.

الأسئلة الشائعة

هل درس «إنشاء هيكل الصفحة» مجاني؟

نعم — نص درس «إنشاء هيكل الصفحة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vibe Coding، انتقل إلى CoddyKit PRO. تتضمن دورة Vibe Coding 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء هيكل الصفحة»؟

أنشئ هيكل الصفحة باستخدام prompt تتمرن على Vibe Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vibe Coding؟

لا تُشترط خبرة سابقة. Vibe Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إنشاء هيكل الصفحة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vibe Coding هذا؟

نعم. كل درس في Vibe Coding يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. إنشاء هيكل الصفحة
  2. التنسيق باللغة العادية
  3. إضافة الأقسام والمحتوى
  4. المعاينة وإجراء التعديلات
← العودة إلى Vibe Coding