مشروع متكامل — موقع شخصي بـ HTML و CSS 2026

🎉 مبروك! وصلت إلى المقال الأخير في مسار HTML & CSS!

لقد تعلمت كل الأساسيات: الوسوم، النصوص، الصور، الروابط، النماذج، الجداول، الوسوم الدلالية، CSS، الألوان، Box Model، Flexbox، و Grid. الآن حان الوقت لتطبيق كل هذه المفاهيم في مشروع حقيقي متكامل.

في هذا الدليل العملي، سنبني موقعاً شخصياً كاملاً بـ HTML و CSS فقط (بدون JavaScript).

ما سنبنيه

موقع شخصي احترافي يحتوي على:

شريط تنقل (Navbar) مع روابط.
قسم البطل (Hero) مع صورة وزر.
قسم "من أنا" (About).
قسم المهارات (Skills) مع شبكة.
قسم المشاريع (Projects) مع بطاقات.
قسم الاتصال (Contact) مع روابط.
تذييل (Footer).
تصميم متجاوب يعمل على كل الأجهزة.
حركات بسيطة.

هيكل المشروع

my-portfolio/
├── index.html
├── css/
│   └── style.css
└── images/
    ├── profile.jpg
    ├── project1.jpg
    ├── project2.jpg
    └── project3.jpg

الخطوة 1: إنشاء المجلدات

أنشئ مجلداً باسم my-portfolio.
داخله، أنشئ مجلد css.
داخله، أنشئ مجلد images.
افتح المجلد في VS Code.

الخطوة 2: ملف `index.html`

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="أحمد - مطور ويب متخصص في HTML, CSS, JavaScript, React">
  <title>أحمد | مطور ويب</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap" rel="stylesheet">
</head>
<body>
  
  <!-- شريط التنقل -->
  <nav class="navbar">
    <div class="container nav-container">
      <a href="#" class="logo">أحمد</a>
      <ul class="nav-links">
        <li><a href="#home">الرئيسية</a></li>
        <li><a href="#about">من أنا</a></li>
        <li><a href="#skills">مهاراتي</a></li>
        <li><a href="#projects">مشاريعي</a></li>
        <li><a href="#contact">اتصل بي</a></li>
      </ul>
    </div>
  </nav>

  <!-- قسم البطل -->
  <section id="home" class="hero">
    <div class="container hero-content">
      <div class="hero-text">
        <h1>مرحباً، أنا <span>أحمد</span></h1>
        <p>مطور ويب متخصص في بناء مواقع حديثة وسريعة</p>
        <a href="#contact" class="btn btn-primary">تواصل معي</a>
        <a href="#projects" class="btn btn-outline">مشاريعي</a>
      </div>
      <div class="hero-image">
        <img src="images/profile.jpg" alt="صورة أحمد">
      </div>
    </div>
  </section>

  <!-- قسم من أنا -->
  <section id="about" class="about">
    <div class="container">
      <h2 class="section-title">من أنا</h2>
      <div class="about-content">
        <p>
          أنا مطور ويب شغوف ببناء تجارب رقمية مميزة. 
          أتخصص في HTML و CSS و JavaScript و React، 
          وأسعى دائماً لتعلم أحدث التقنيات.
        </p>
      </div>
    </div>
  </section>

  <!-- قسم المهارات -->
  <section id="skills" class="skills">
    <div class="container">
      <h2 class="section-title">مهاراتي</h2>
      <div class="skills-grid">
        <div class="skill-card">
          <span class="skill-icon">🌐</span>
          <h3>HTML5</h3>
          <p>بناء هياكل احترافية</p>
        </div>
        <div class="skill-card">
          <span class="skill-icon">🎨</span>
          <h3>CSS3</h3>
          <p>تصميم متجاوب وجميل</p>
        </div>
        <div class="skill-card">
          <span class="skill-icon">⚡</span>
          <h3>JavaScript</h3>
          <p>تفاعل ديناميكي</p>
        </div>
        <div class="skill-card">
          <span class="skill-icon">⚛️</span>
          <h3>React</h3>
          <p>مكونات حديثة</p>
        </div>
      </div>
    </div>
  </section>

  <!-- قسم المشاريع -->
  <section id="projects" class="projects">
    <div class="container">
      <h2 class="section-title">مشاريعي</h2>
      <div class="projects-grid">
        <article class="project-card">
          <img src="images/project1.jpg" alt="مشروع 1">
          <div class="project-info">
            <h3>متجر إلكتروني</h3>
            <p>متجر بـ React و TypeScript</p>
            <a href="#" class="project-link">عرض المشروع ←</a>
          </div>
        </article>
        <article class="project-card">
          <img src="images/project2.jpg" alt="مشروع 2">
          <div class="project-info">
            <h3>مدونة شخصية</h3>
            <p>مدونة بـ Next.js</p>
            <a href="#" class="project-link">عرض المشروع ←</a>
          </div>
        </article>
        <article class="project-card">
          <img src="images/project3.jpg" alt="مشروع 3">
          <div class="project-info">
            <h3>تطبيق مهام</h3>
            <p>قائمة مهام بـ React</p>
            <a href="#" class="project-link">عرض المشروع ←</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- قسم الاتصال -->
  <section id="contact" class="contact">
    <div class="container">
      <h2 class="section-title">اتصل بي</h2>
      <p>هل لديك مشروع؟ تواصل معي عبر:</p>
      <div class="contact-links">
        <a href="mailto:[email protected]" class="contact-btn">📧 البريد</a>
        <a href="https://twitter.com/ahmed" target="_blank" rel="noopener noreferrer" class="contact-btn">🐦 تويتر</a>
        <a href="https://github.com/ahmed" target="_blank" rel="noopener noreferrer" class="contact-btn">💻 GitHub</a>
        <a href="https://linkedin.com/in/ahmed" target="_blank" rel="noopener noreferrer" class="contact-btn">💼 LinkedIn</a>
      </div>
    </div>
  </section>

  <!-- التذييل -->
  <footer class="footer">
    <div class="container">
      <p>© 2026 أحمد — جميع الحقوق محفوظة</p>
    </div>
  </footer>

</body>
</html>

الخطوة 3: ملف `css/style.css`

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Cairo', sans-serif;
  line-height: 1.7;
  color: #1f2937;
  background: #ffffff;
  direction: rtl;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ==================== الحاوية ==================== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==================== شريط التنقل ==================== */
.navbar {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 0;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #3b82f6;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  color: #64748b;
  font-weight: 600;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #3b82f6;
}

/* ==================== قسم البطل ==================== */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 80px 0;
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.hero-text {
  flex: 1;
}

.hero-text h1 {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-text h1 span {
  color: #fbbf24;
}

.hero-text p {
  font-size: 1.25rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hero-image img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ==================== الأزرار ==================== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.3s;
  cursor: pointer;
  margin-left: 12px;
}

.btn-primary {
  background: #fbbf24;
  color: #1e293b;
}

.btn-primary:hover {
  background: #f59e0b;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(251, 191, 36, 0.4);
}

.btn-outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-outline:hover {
  background: white;
  color: #667eea;
}

/* ==================== العناوين ==================== */
.section-title {
  font-size: 2.5rem;
  font-weight: 900;
  text-align: center;
  color: #1e293b;
  margin-bottom: 60px;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  right: 50%;
  transform: translateX(50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(to left, #3b82f6, #8b5cf6);
  border-radius: 2px;
}

/* ==================== قسم من أنا ==================== */
.about {
  padding: 100px 0;
  background: #f9fafb;
}

.about-content {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.9;
}

/* ==================== قسم المهارات ==================== */
.skills {
  padding: 100px 0;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.skill-card {
  background: white;
  padding: 40px 20px;
  border-radius: 16px;
  text-align: center;
  border: 2px solid #f1f5f9;
  transition: all 0.3s;
}

.skill-card:hover {
  border-color: #3b82f6;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
}

.skill-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 20px;
}

.skill-card h3 {
  font-size: 1.25rem;
  color: #1e293b;
  margin-bottom: 8px;
}

.skill-card p {
  color: #64748b;
  font-size: 0.95rem;
}

/* ==================== قسم المشاريع ==================== */
.projects {
  padding: 100px 0;
  background: #f9fafb;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.project-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.project-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.project-info {
  padding: 24px;
}

.project-info h3 {
  font-size: 1.25rem;
  color: #1e293b;
  margin-bottom: 8px;
}

.project-info p {
  color: #64748b;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.project-link {
  color: #3b82f6;
  font-weight: 700;
  font-size: 0.95rem;
  transition: gap 0.3s;
  display: inline-block;
}

.project-link:hover {
  color: #2563eb;
}

/* ==================== قسم الاتصال ==================== */
.contact {
  padding: 100px 0;
  text-align: center;
}

.contact > .container > p {
  color: #64748b;
  font-size: 1.15rem;
  margin-bottom: 40px;
}

.contact-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-btn {
  display: inline-block;
  padding: 14px 28px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-weight: 700;
  color: #1f2937;
  transition: all 0.3s;
}

.contact-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
}

/* ==================== التذييل ==================== */
.footer {
  background: #1e293b;
  color: white;
  padding: 30px 0;
  text-align: center;
}

.footer p {
  opacity: 0.7;
}

/* ==================== التجاوب (Responsive) ==================== */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .hero-content {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 1rem;
  }

  .hero-image img {
    width: 200px;
    height: 200px;
  }

  .btn {
    display: block;
    margin: 10px auto;
    max-width: 250px;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .contact-links {
    flex-direction: column;
  }

  .contact-btn {
    max-width: 250px;
    margin: 0 auto;
  }
}

الخطوة 4: إضافة الصور

⚠️ مهم: أضف الصور التالية في مجلد images/:

profile.jpg — صورتك الشخصية.
project1.jpg، project2.jpg، project3.jpg — صور المشاريع.

إذا لم تكن لديك صور، استخدم صوراً من:

الخطوة 5: تشغيل الموقع

افتح index.html في المتصفح.
أو استخدم Live Server (بعد تثبيت الإضافة في VS Code).

🎉 مبروك! لديك موقع شخصي كامل!

فهم الكود خطوة بخطوة

1. الهيكل العام

<nav>: شريط تنقل ثابت (sticky).
<section>: أقسام (hero, about, skills, projects, contact).
<footer>: تذييل.

2. استخدام Flexbox

شريط التنقل: display: flex; justify-content: space-between;
قسم البطل: display: flex; align-items: center;

3. استخدام Grid

المهارات: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
المشاريع: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

4. الحركات

:hover: على البطاقات والأزرار.
transition: لتنعيم الحركات.

5. التجاوب

@media (max-width: 768px): للشاشات الصغيرة.
إخفاء روابط التنقل على الجوال.
تحويل الصفوف إلى أعمدة.

تمارين إضافية

تمرين 1: إضافة قسم "الخبرات"

أضف قسماً لعرض خبراتك السابقة.

الحل:

<section id="experience" class="experience">
  <div class="container">
    <h2 class="section-title">الخبرات</h2>
    <div class="timeline">
      <div class="experience-item">
        <h3>مطور ويب</h3>
        <p>شركة XYZ — 2024 إلى الآن</p>
      </div>
    </div>
  </div>
</section>

تمرين 2: إضافة نموذج اتصال

أضف نموذج اتصال في قسم Contact.

الحل:

<form class="contact-form">
  <input type="text" name="name" placeholder="اسمك" required>
  <input type="email" name="email" placeholder="بريدك" required>
  <textarea name="message" rows="5" placeholder="رسالتك" required></textarea>
  <button type="submit" class="btn btn-primary">إرسال</button>
</form>

تمرين 3: إضافة قائمة مشاريع قابلة للتصفية

أضف أزرار لتصفية المشاريع حسب النوع.

تمرين 4: إضافة الوضع الداكن

أضف زراً لتبديل الوضع الداكن.

تمرين 5: إضافة حركات عند التمرير

استخدم @keyframes لإضافة حركات عند ظهور الأقسام.

حل المشاكل الشائعة

🔴 المشكلة 1: الصور لا تظهر

السبب: مسار الصور خاطئ.

الحل: تأكد من:

اسم المجلد images.
اسم الصورة بالضبط (profile.jpg وليس Profile.JPG).
المسار الصحيح في HTML (images/profile.jpg).

🔴 المشكلة 2: التصميم لا يعمل على الجوال

السبب: عدم وجود @media أو viewport.

الحل:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

🔴 المشكلة 3: شريط التنقل يغطي الأقسام

السبب: sticky navbar.

الحل: أضف scroll-margin-top للأقسام:

section {
  scroll-margin-top: 80px;
}

🔴 المشكلة 4: الخطوط لا تظهر

السبب: رابط Google Fonts خاطئ.

الحل: تأكد من الرابط في <head>.

قائمة تحقق نهائية

المهمة	الحالة
إنشاء هيكل المشروع	⬜
بناء HTML كامل	⬜
تصميم CSS كامل	⬜
إضافة الصور	⬜
تشغيل الموقع في المتصفح	⬜
اختبار التجاوب على الجوال	⬜
حل تمرين إضافي	⬜

🎉 مبروك! أكملت مسار HTML & CSS!

لقد وصلت إلى نهاية المسار. أنت الآن تعرف:

✅ HTML: الوسوم، النصوص، الصور، الروابط، النماذج، الجداول، الوسوم الدلالية.
✅ CSS: المحددات، الألوان، Box Model، Flexbox، Grid.
✅ التصميم المتجاوب: يعمل على كل الأجهزة.
✅ الحركات: تأثيرات بصرية.
✅ مشروع متكامل: موقع شخصي احترافي.

ماذا بعد HTML & CSS؟

الآن أنت جاهز لـ:

JavaScript — لإضافة التفاعل.
Tailwind CSS — إطار تصميم حديث.
Bootstrap — إطار جاهز.
Sass/SCSS — CSS متقدم.
بناء معرض أعمالك — ارفع مشاريعك على GitHub.

الخلاصة

في هذا المشروع، طبقت:

✅ HTML دلالي: header, nav, section, article, footer.
✅ CSS حديث: Flexbox، Grid، Gradients، Shadows.
✅ التجاوب: Media Queries.
✅ الحركات: Hover، Transitions.
✅ بنية احترافية: مجلدات منظمة.

هذا المشروع هو أساس كل موقع احترافي. احتفظ بالكود، وطور فيه بنفسك!

مشروع متكامل — موقع شخصي بـ HTML و CSS 2026

ما سنبنيه

هيكل المشروع

الخطوة 1: إنشاء المجلدات

الخطوة 2: ملف `index.html`

الخطوة 3: ملف `css/style.css`

الخطوة 4: إضافة الصور

الخطوة 5: تشغيل الموقع

فهم الكود خطوة بخطوة

1. الهيكل العام

2. استخدام Flexbox

3. استخدام Grid

4. الحركات

5. التجاوب

تمارين إضافية

تمرين 1: إضافة قسم "الخبرات"

تمرين 2: إضافة نموذج اتصال

تمرين 3: إضافة قائمة مشاريع قابلة للتصفية

تمرين 4: إضافة الوضع الداكن

تمرين 5: إضافة حركات عند التمرير

حل المشاكل الشائعة

🔴 المشكلة 1: الصور لا تظهر

🔴 المشكلة 2: التصميم لا يعمل على الجوال

🔴 المشكلة 3: شريط التنقل يغطي الأقسام

🔴 المشكلة 4: الخطوط لا تظهر

قائمة تحقق نهائية

🎉 مبروك! أكملت مسار HTML & CSS!

ماذا بعد HTML & CSS؟

الخلاصة

Flexbox و CSS Grid — دليل شامل التخطيط الحديث 2026

📚 مقالات ذات صلة

Flexbox و CSS Grid — دليل شامل التخطيط الحديث 2026

الألوان و Box Model في CSS — دليل شامل 2026

مقدمة في CSS — دليل شامل 2026

مشروع متكامل — موقع شخصي بـ HTML و CSS 2026

ما سنبنيه

هيكل المشروع

الخطوة 1: إنشاء المجلدات

الخطوة 2: ملف index.html

الخطوة 3: ملف css/style.css

الخطوة 4: إضافة الصور

الخطوة 5: تشغيل الموقع

فهم الكود خطوة بخطوة

1. الهيكل العام

2. استخدام Flexbox

3. استخدام Grid

4. الحركات

5. التجاوب

تمارين إضافية

تمرين 1: إضافة قسم "الخبرات"

تمرين 2: إضافة نموذج اتصال

تمرين 3: إضافة قائمة مشاريع قابلة للتصفية

تمرين 4: إضافة الوضع الداكن

تمرين 5: إضافة حركات عند التمرير

حل المشاكل الشائعة

🔴 المشكلة 1: الصور لا تظهر

🔴 المشكلة 2: التصميم لا يعمل على الجوال

🔴 المشكلة 3: شريط التنقل يغطي الأقسام

🔴 المشكلة 4: الخطوط لا تظهر

قائمة تحقق نهائية

🎉 مبروك! أكملت مسار HTML & CSS!

ماذا بعد HTML & CSS؟

الخلاصة

Flexbox و CSS Grid — دليل شامل التخطيط الحديث 2026

📚 مقالات ذات صلة

Flexbox و CSS Grid — دليل شامل التخطيط الحديث 2026

الألوان و Box Model في CSS — دليل شامل 2026

مقدمة في CSS — دليل شامل 2026

الخطوة 2: ملف `index.html`

الخطوة 3: ملف `css/style.css`