HTML & CSS
مشروع متكامل — موقع شخصي بـ HTML و CSS 2026
📅 2026-10-29⏱ 10 دقائق قراءة
🎉 **مبروك! وصلت إلى المقال الأخير في مسار 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: إنشاء المجلدات
1. أنشئ مجلداً باسم `my-portfolio`.
2. داخله، أنشئ مجلد `css`.
3. داخله، أنشئ مجلد `images`.
4. افتح المجلد في VS Code.
## الخطوة 2: ملف `index.html`
```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:ahmed@example.com" 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`
```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` — صور المشاريع.
**إذا لم تكن لديك صور**، استخدم صوراً من:
- [Unsplash](https://unsplash.com)
- [Pexels](https://pexels.com)
## الخطوة 5: تشغيل الموقع
1. افتح `index.html` في المتصفح.
2. أو استخدم **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: إضافة قسم "الخبرات"
أضف قسماً لعرض خبراتك السابقة.
**الحل:**
```html
<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.
**الحل:**
```html
<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`.
**الحل:**
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
### 🔴 المشكلة 3: شريط التنقل يغطي الأقسام
**السبب:** `sticky` navbar.
**الحل:** أضف `scroll-margin-top` للأقسام:
```css
section {
scroll-margin-top: 80px;
}
```
### 🔴 المشكلة 4: الخطوط لا تظهر
**السبب:** رابط Google Fonts خاطئ.
**الحل:** تأكد من الرابط في `<head>`.
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>إنشاء هيكل المشروع</td>
<td>⬜</td>
</tr>
<tr>
<td>بناء HTML كامل</td>
<td>⬜</td>
</tr>
<tr>
<td>تصميم CSS كامل</td>
<td>⬜</td>
</tr>
<tr>
<td>إضافة الصور</td>
<td>⬜</td>
</tr>
<tr>
<td>تشغيل الموقع في المتصفح</td>
<td>⬜</td>
</tr>
<tr>
<td>اختبار التجاوب على الجوال</td>
<td>⬜</td>
</tr>
<tr>
<td>حل تمرين إضافي</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## 🎉 مبروك! أكملت مسار HTML & CSS!
لقد وصلت إلى نهاية المسار. أنت الآن تعرف:
- ✅ **HTML:** الوسوم، النصوص، الصور، الروابط، النماذج، الجداول، الوسوم الدلالية.
- ✅ **CSS:** المحددات، الألوان، Box Model، Flexbox، Grid.
- ✅ **التصميم المتجاوب:** يعمل على كل الأجهزة.
- ✅ **الحركات:** تأثيرات بصرية.
- ✅ **مشروع متكامل:** موقع شخصي احترافي.
## ماذا بعد HTML & CSS؟
الآن أنت جاهز لـ:
1. **JavaScript** — لإضافة التفاعل.
2. **Tailwind CSS** — إطار تصميم حديث.
3. **Bootstrap** — إطار جاهز.
4. **Sass/SCSS** — CSS متقدم.
5. **بناء معرض أعمالك** — ارفع مشاريعك على GitHub.
## الخلاصة
في هذا المشروع، طبقت:
- ✅ **HTML دلالي:** header, nav, section, article, footer.
- ✅ **CSS حديث:** Flexbox، Grid، Gradients، Shadows.
- ✅ **التجاوب:** Media Queries.
- ✅ **الحركات:** Hover، Transitions.
- ✅ **بنية احترافية:** مجلدات منظمة.
**هذا المشروع هو أساس كل موقع احترافي.** احتفظ بالكود، وطور فيه بنفسك!