مقال

كيفية برمجة موقع ويب بسيط في أقل من ساعة

صفحة مقصودة شخصية تحتوي على:

2 دقيقة قراءةاللغة: AR العربيةمجاني0 تصفيقات0 تعليقات

الأعمالMarketing GrowthCodeWeb DevelopmentBusinessMarketing GrowthSimpleWebsite

خيارات القراءة

ما نقوم ببنائه

صفحة مقصودة شخصية تحتوي على:

عنوان رئيسي وشعار
قسم "نبذة عني".
روابط لملفاتك الاجتماعية
معلومات الاتصال
نموذج اتصال (يعمل بدون واجهة خلفية)

الخطوة 1: إعداد مشروعك (دقيقتان)

قم بإنشاء مجلد باسم "my-website" يحتوي على ملفين:

my-website/
├── index.html    (the structure)
└── style.css     (the styling)

افتح كلا الملفين في أي محرر نصوص (VS Code، Notepad، TextEdit).

الخطوة 2: كتابة HTML (10 دقائق)

HTML هو هيكل صفحتك. فكر في الأمر كإطار للمبنى.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Name | Personal Website</title>
  <!-- Link to our CSS file -->
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>

  <!-- Header / Hero Section -->
  <header>
    <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
    <p class="tagline">Web Developer | Designer | Creator</p>
  </header>

  <!-- About Section -->
  <section id="about">
    <h2>About Me</h2>
    <p>
      Write a sentence or two about yourself. What do you do?
      What are you passionate about? Keep it friendly and authentic.
    </p>
  </section>

  <!-- Skills Section -->
  <section id="skills">
    <h2>What I Do</h2>
    <div class="skills-grid">
      <div class="skill-card">
        <i class="fas fa-code"></i>
        <h3>Web Development</h3>
        <p>HTML, CSS, JavaScript, React</p>
      </div>
      <div class="skill-card">
        <i class="fas fa-paint-brush"></i>
        <h3>Design</h3>
        <p>UI/UX, Figma, Adobe XD</p>
      </div>
      <div class="skill-card">
        <i class="fas fa-mobile-alt"></i>
        <h3>Responsive</h3>
        <p>Mobile-first, all devices</p>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact">
    <h2>Get In Touch</h2>
    <form id="contact-form">
      <input type="text" placeholder="Your Name" required>
      <input type="email" placeholder="Your Email" required>
      <textarea placeholder="Your Message" rows="5" required></textarea>
      <button type="submit">Send Message</button>
    </form>
    <p class="form-message" id="form-message"></p>
  </section>

  <!-- Footer -->
  <footer>
    <div class="social-links">
      <a href="#"><i class="fab fa-github"></i></a>
      <a href="#"><i class="fab fa-linkedin"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </div>
    <p>&copy; 2026 Your Name. Made with <span class="heart">&hearts;</span></p>
  </footer>

  <script>
    // Contact form — no backend needed
    document.getElementById('contact-form').addEventListener('submit', function(e) {
      e.preventDefault();
      const message = document.getElementById('form-message');
      message.textContent = "Thanks! I will get back to you soon.";
      message.style.color = "#4CAF50";
      this.reset();
    });
  </script>
</body>
</html>

الخطوة 3: كتابة CSS (15 دقيقة)

CSS يجعل الصفحة تبدو جيدة. الألوان، التخطيط، التباعد.

/* === Reset & Base === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f8f9fa;
}

/* === Header === */
header {
  text-align: center;
  padding: 80px 20px 40px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.highlight {
  color: #ffd700;
}

.tagline {
  font-size: 1.2em;
  opacity: 0.9;
}

/* === Sections === */
section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}

h2 {
  font-size: 2em;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

/* === Skills Grid === */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.skill-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.skill-card:hover {
  transform: translateY(-5px);
}

.skill-card i {
  font-size: 2em;
  color: #667eea;
  margin-bottom: 15px;
}

.skill-card h3 {
  margin-bottom: 10px;
}

/* === Form === */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: 0 auto;
}

input, textarea, button {
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
}

input:focus, textarea:focus {
  border-color: #667eea;
  outline: none;
}

button {
  background: #667eea;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

button:hover {
  background: #5a67d8;
}

.form-message {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

/* === Footer === */
footer {
  text-align: center;
  padding: 40px;
  background: #333;
  color: white;
}

.social-links a {
  color: white;
  font-size: 1.5em;
  margin: 0 10px;
  text-decoration: none;
  transition: color 0.2s;
}

.social-links a:hover {
  color: #667eea;
}

.heart {
  color: #e74c3c;
}

/* === Responsive === */
@media (max-width: 600px) {
  header h1 { font-size: 1.8em; }
  header { padding: 60px 20px 30px; }
  section { padding: 40px 20px; }
}

الخطوة 4: فتح في المتصفح (ثانية واحدة)

انقر نقرًا مزدوجًا على "index.html". يتم فتحه في المتصفح الخاص بك.

لديك الآن موقع ويب يعمل.

الخطوة 5: التخصيص (10 دقائق)

قم بتغيير هذه الأشياء لجعلها ملكك:

استبدال النص — اسمك، الشعار، السيرة الذاتية
تغيير الألوان — قم بتحرير التدرج في الرأس واللون الأرجواني #667eea
تحديث الروابط — استبدل # في الروابط الاجتماعية بعناوين URL الفعلية
أضف صورتك — أضف <img src="your-photo.jpg" alt="Your Name"> داخل رأس الصفحة
تحرير النموذج — لإرسال رسائل البريد الإلكتروني فعليًا، استبدل إجراء النموذج بخدمة مثل Formspree أو Web3Forms

الخطوة 6: النشر (10 دقائق)

خيارات الاستضافة المجانية:

1. صفحات جيثب (مستحسن)

قم بإنشاء حساب على جيثب
قم بإنشاء مستودع باسم "username.github.io".
قم بتحميل "index.html" و"style.css".
موقعك موجود على "username.github.io".

2. Netlify (الأسهل)

انتقل إلى netlify.com
قم بسحب وإسقاط المجلد الخاص بك
تم. يحصل موقعك على عنوان URL مجاني (random-name.netlify.app)

3. فيرسيل

انتقل إلى vercel.com
قم باستيراد مشروعك
النشر التلقائي من GitHub

ما تعلمته

في أقل من ساعة:

بنية HTML (العناوين والفقرات والأقسام والنماذج)
تصميم CSS (الألوان والتخطيط والتصميم سريع الاستجابة)
نموذج الاتصال مع جافا سكريبت
كيفية النشر على الانترنت مجانا

الخطوات التالية

إضافة المزيد من الصفحات (حول، المحفظة، المدونة)
تعلم JavaScript لإضافة التفاعل (الرسوم المتحركة، الوضع المظلم)
استخدم إطار عمل CSS (Tailwind، Bootstrap) لتصميم أسرع
قم بتوصيل الواجهة الخلفية لنموذج الاتصال الحقيقي
شراء نطاق مخصص (10-15 دولارًا سنويًا)