Every great website starts with a clear concept. Ask yourself: what is this website for? Who will visit it? What value does it offer? Write down your idea, list the pages you'll need, and sketch a rough layout — even on paper is fine.
كل موقع عظيم يبدأ بفكرة واضحة. اسأل نفسك: ما هدف الموقع؟ من سيزوره؟ ما القيمة التي يقدمها؟ دوّن فكرتك، حدد الصفحات التي ستحتاجها، وارسم تخطيطاً أولياً — حتى على ورقة.
💡Keep it simple to start. A one-page website is perfectly fine for a first project — you can always expand later.
💡ابدأ ببساطة. موقع من صفحة واحدة ممتاز كمشروع أول — يمكنك التوسع لاحقاً.
Websites are built with three core languages: HTML (structure), CSS (design), and JavaScript (interactivity). Start with HTML. Better yet — use AI tools to generate code, then tweak it to fit your vision.
تُبنى المواقع بثلاث لغات أساسية: HTML (الهيكل)، CSS (التصميم)، JavaScript (التفاعل). ابدأ بـ HTML. والأفضل — استخدم أدوات الذكاء الاصطناعي لتوليد الكود ثم عدّل عليه.
🤖Try: "Build me a simple dark-theme portfolio page with HTML and CSS — one section for bio, one for projects."
🤖جرب: "اصنع لي صفحة portfolio بسيطة بـ HTML وCSS، خلفية داكنة، قسم للسيرة الذاتية وقسم للمشاريع."
Before publishing, see how your website looks. Use a local code editor or an online playground — both work great for beginners. Edit freely until it matches your vision.
قبل النشر، تحتاج لرؤية كيف يبدو موقعك. استخدم محرر كود على جهازك أو موقع تجربة أونلاين — كلاهما ممتاز. عدّل بحرية حتى يطابق تصورك.
✏️CodePen is the fastest — paste your code and see it render instantly in the preview panel.
✏️CodePen هو الأسرع — الصق الكود وشاهده يُعرض فوراً في لوحة المعاينة.
GitHub stores your code in the cloud — think of it as Google Drive for developers. Sign up, create a new repository, name it my-website, then upload your files or write an index.html directly in the browser.
GitHub يخزن الكود في السحابة — فكّر فيه كـ Google Drive للمطورين. سجل حساباً، أنشئ مستودعاً جديداً، سمّه my-website، ثم ارفع ملفاتك أو اكتب index.html مباشرة في المتصفح.
📁Your main file must be named index.html — hosting services look for this name automatically as the entry point.
📁يجب تسمية ملفك الرئيسي index.html — خدمات الاستضافة تبحث عن هذا الاسم تلقائياً كنقطة دخول.
Hosting makes your website visible to the world. Connect your GitHub repository to a free hosting platform — they build and deploy your site automatically, giving you a public URL in under 60 seconds.
الاستضافة تجعل موقعك مرئياً للعالم. اربط مستودع GitHub بمنصة استضافة مجانية — ستقوم ببناء ونشر موقعك تلقائياً وتعطيك رابطاً عاماً في أقل من 60 ثانية.
🚀With Vercel: Sign in with GitHub → Import your repo → Deploy. Your URL will be yoursite.vercel.app
🚀مع Vercel: سجل دخول بـ GitHub ← استورد مستودعك ← Deploy. رابطك سيكون yoursite.vercel.app
Want yourname.com instead of yoursite.vercel.app? Buy a domain from a registrar and link it in your hosting dashboard. Cloudflare offers the best prices with free DNS management included.
تريد yourname.com بدلاً من yoursite.vercel.app؟ اشتر دومين من مسجّل وقم بربطه في لوحة تحكم استضافتك. Cloudflare يقدم أفضل الأسعار مع إدارة DNS مجانية.
🌐Domains cost around $10–15/year. After buying, go to your hosting's settings and add it as a "Custom Domain" — the platform will walk you through DNS configuration.
🌐الدومينات بـ 10-15 دولار/سنة. بعد الشراء، اذهب لإعدادات الاستضافة وأضفه كـ "Custom Domain" — المنصة ستوجهك في إعدادات DNS.
Open your website on multiple devices — phone, tablet, desktop. Check all links work and images load correctly. Then share the URL with friends, put it in your bio, or post it. You just shipped something real!
افتح موقعك على أجهزة متعددة — جوال، تابلت، حاسوب. تأكد من أن الروابط تعمل والصور تُحمَّل. ثم شارك الرابط مع أصدقائك أو ضعه في بيو حساباتك. لقد نشرت شيئاً حقيقياً الآن!
🎯
Every update you push to GitHub will automatically redeploy your site. Keep improving — one commit at a time.
🎯
كل تحديث ترفعه على GitHub سيُعيد نشر موقعك تلقائياً. استمر في التطوير — commit واحد في كل مرة.