جوابجواب
ar
مقال

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

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

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

2 دقيقة قراءةاللغة: AR العربيةمجاني0 تصفيقات0 تعليقات
الأعمالنمو التسويقCodeWeb 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 دقائق)

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

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

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

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

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

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

2. Netlify (الأسهل)

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

3. فيرسيل

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

ما تعلمته

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

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

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

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

مقالات مختارة

كيفية إتقان فن التحدث أمام الجمهور للانطوائيين
تحريريAR
7 دمجاني

كيفية إتقان فن التحدث أمام الجمهور للانطوائيين

يُشار إلى التحدث أمام الجمهور على نطاق واسع باعتباره أحد أكبر المخاوف التي يواجهها الناس، حيث يحتل مرتبة أعلى من الموت في بعض الدراسات. بالنسبة للانطوائيين، فإن احتمال الوقوف أمام غرفة مليئة بالناس يمكن أن يكون أمرًا شاقًا بشكل خاص. الخبر السار: غالبًا ما يكون الانطوائيون متحدثين استثنائيين. أنت عاكس ومستعد ومتعاطف بشكل طبيعي مع جمهورك.

الأعمالالتطور المهنيBusinessCareerCareer Growth
0 تصفيقات
قراءة
10 ترقيات للفناء الخلفي بميزانية محدودة: تحسين المنزل بنفسك
تحريريAR
8 دمجاني

10 ترقيات للفناء الخلفي بميزانية محدودة: تحسين المنزل بنفسك

الفناء الخلفي الخاص بك لديه إمكانات أكثر مما تعتقد. حتى المساحة الخارجية الصغيرة يمكن أن تصبح ملاذًا مريحًا أو مركزًا ترفيهيًا أو حديقة منتجة. ولا تحتاج إلى آلاف الدولارات أو مقاولين محترفين لتحقيق ذلك.

الأعمالالتمويل الشخصيPersonal FinanceSaving MoneyBusiness
0 تصفيقات
قراءة
أفضل وجهات السفر للمسافرين المنفردين بميزانية محدودة
تحريريAR
8 دمجاني

أفضل وجهات السفر للمسافرين المنفردين بميزانية محدودة

يعد السفر الفردي أحد أكثر التجارب التحويلية التي يمكنك الاستمتاع بها. يمكنك تحديد جدولك الزمني الخاص، واتخاذ القرارات بسرعة، والتعرف على أشخاص لن تتحدث معهم أبدًا إذا كنت مسافرًا مع صديق. الاعتراض الشائع هو التكلفة، لكن السفر الفردي يمكن أن يكون في الواقع أرخص من السفر الجماعي عندما تختار الوجهات الصحيحة.

الأعمالنمط الحياةالتمويل الشخصيPersonal FinanceSaving MoneyBusiness
0 تصفيقات
قراءة

التعليقات

0 تعليقات

لا توجد تعليقات معتمدة بعد. قد تنتظر الردود الجديدة المراجعة.