تعلم HTML وCSS وJavaScript
من الصفر حتى الاحتراف
ثلاث لغات، ثلاثة مشاريع تطبيقية، ومسار واضح يوصلك من المبتدئ إلى بناء موقعك الأول بنفسك
لماذا تتعلم برمجة الويب في 2026؟
كل موقع تزوره، كل تطبيق تستخدمه على هاتفك، وكل صفحة تظهر على شاشتك — كلها مبنية بثلاث لغات فقط: HTML وCSS وJavaScript. هذه الثلاثي هي الأساس الذي يقوم عليه الإنترنت بأكمله.
الخبر الجيد: هذه اللغات من أسهل اللغات البرمجية تعلماً. لا تحتاج شهادة جامعية، ولا جهازاً خاصاً، ولا ميزانية ضخمة. كل ما تحتاجه هو حاسوب، إنترنت، وساعة يومية من التركيز الحقيقي.
الهيكل والبنية
مثل هيكل المبنى — يحدد ما يوجد في الصفحة ومكانه
التصميم والمظهر
مثل الديكور الداخلي — يجعل الصفحة جميلة واحترافية
التفاعل والحركة
مثل الكهرباء — يجعل كل شيء متحركاً وتفاعلياً
في هذا المقال لن تتعلم النظرية فقط — ستبني 3 مشاريع حقيقية يمكنك إضافتها مباشرة لمحفظتك. كل مشروع يطبّق ما تعلمته في القسم السابق.
الأدوات التي تحتاجها قبل البدء
لا تحتاج إلى شيء معقد. هذه الأدوات الثلاث كافية تماماً للبدء:
VS Code — محرر الكود
الأكثر استخداماً عالمياً بين المطورين. مجاني وسريع ومليء بالإضافات المفيدة. حمّله من code.visualstudio.com
Google Chrome — المتصفح
يأتي مع أدوات مطور قوية (اضغط F12). يتيح لك رؤية الكود المصدري، اختبار CSS، وتتبع الأخطاء مباشرة.
إضافة Live Server لـ VS Code
تجعل متصفحك يتحدث تلقائياً كلما حفظت الملف. ابحث عنها في متجر إضافات VS Code وثبّتها بنقرة واحدة.
تجنّب البدء على منصات إنترنت كـ CodePen في المرحلة الأولى. من الأفضل أن تتعلم العمل على ملفات حقيقية على جهازك — هذه هي البيئة الفعلية للتطوير.
HTML — هيكل كل صفحة ويب
HTML ليست لغة برمجة بالمعنى الدقيق — هي لغة ترميز. مهمتها الوحيدة هي إخبار المتصفح بما يجب عرضه: هذا عنوان، وهذه فقرة، وهذه صورة، وهذا رابط.
هيكل صفحة HTML الأساسي
كل صفحة HTML تبدأ بهذا الهيكل الثابت. احفظه لأنك ستستخدمه في كل مشروع:
JavaScript — أضف الحياة لصفحتك
HTML وCSS يصنعان موقعاً جميلاً لكنه ساكن. JavaScript هو ما يجعله يتفاعل مع المستخدم. الأزرار التي تفعل شيئاً، النماذج التي تتحقق من البيانات، القوائم المنسدلة، الإشعارات — كل هذا JavaScript.
الأساسيات: المتغيرات والأنواع
// let — يمكن تغيير قيمته
let name = "أحمد";
let age = 25;
let isStudent = true;
// const — لا يمكن تغيير قيمته (مفضّل للقيم الثابتة)
const SITE_NAME = "Morocco ICO";
const MAX_ITEMS = 10;
// المصفوفات (Arrays)
const skills = ["HTML", "CSS", "JavaScript"];
console.log(skills[0]); // "HTML"
// الكائنات (Objects)
const user = {
name: "سفيان",
age: 28,
blog: "Morocco ICO"
};
console.log(user.name); // "سفيان"الدوال (Functions)
// دالة عادية
function greet(name) {
return `مرحباً يا ${name}!`;
}
console.log(greet("أحمد")); // مرحباً يا أحمد!
// Arrow Function — الصيغة الحديثة
const double = (n) => n * 2;
console.log(double(5)); // 10
// دالة مع شرط
function getDiscount(price, isStudent) {
if (isStudent) {
return price * 0.8; // خصم 20%
}
return price;
}التعامل مع DOM — الجزء الأهم
DOM هو تمثيل JavaScript لعناصر HTML. عبره يمكنك تغيير أي شيء في الصفحة بعد تحميلها:
// اختيار العناصر
const btn = document.querySelector('#myBtn');
const title = document.querySelector('h1');
const cards = document.querySelectorAll('.card');
// تغيير المحتوى
title.textContent = "عنوان جديد";
title.innerHTML = "عنوان <span>ملوّن</span>";
// تغيير الأنماط
title.style.color = "#c9a84c";
title.style.fontSize = "2rem";
// إضافة/إزالة كلاسات
btn.classList.add('active');
btn.classList.remove('hidden');
btn.classList.toggle('open');
// الاستجابة للأحداث (Events)
btn.addEventListener('click', function() {
alert("تم النقر على الزر!");
});
// إنشاء عنصر جديد ديناميكياً
const newCard = document.createElement('div');
newCard.className = 'card';
newCard.textContent = 'بطاقة جديدة';
document.body.appendChild(newCard);المفتاح الذهبي: تعلّم JavaScript بممارسة مشاريع صغيرة، ليس بقراءة المفاهيم النظرية. كل مفهوم جديد — اكتبه فوراً في مشروع حقيقي.
مشروع 1: بطاقة تعريفية تفاعلية (HTML + CSS)
تطبّق في هذا المشروع: الهيكل الصحيح لـ HTML، تنسيق CSS، Flexbox، وتأثيرات hover. ستحصل على بطاقة تعريفية جاهزة يمكنك استخدامها في أي مكان.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>بطاقة تعريفية</title>
<link rel="stylesheet" href="card.css">
</head>
<body>
<div class="page">
<div class="card">
<div class="avatar">👨💻</div>
<h1>سفيان لهديم</h1>
<p class="role">مطور ويب | مدوّن تقني</p>
<p class="bio">
أنشئ محتوى تقنياً بالعربية وأبني أدوات ويب
مفيدة للمستخدم العربي
</p>
<div class="skills">
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>SEO</span>
</div>
<a href="https://morocco-ico.blogspot.com"
class="btn">زيارة المدونة</a>
</div>
</div>
</body>
</html>* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Cairo', sans-serif;
background: #0f1117;
color: #e8eaf0;
}
.page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: #161b27;
border: 1px solid rgba(201,168,76,0.3);
border-radius: 20px;
padding: 40px 32px;
text-align: center;
max-width: 360px;
width: 100%;
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(201,168,76,0.15);
}
.avatar {
font-size: 4rem;
margin-bottom: 16px;
}
h1 {
font-size: 1.5rem;
color: #fff;
margin-bottom: 6px;
}
.role {
color: #c9a84c;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 16px;
}
.bio {
color: #9aa3b8;
font-size: 0.88rem;
line-height: 1.7;
margin-bottom: 20px;
}
.skills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 24px;
}
.skills span {
background: rgba(201,168,76,0.1);
border: 1px solid rgba(201,168,76,0.3);
color: #c9a84c;
padding: 4px 14px;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 700;
}
.btn {
display: inline-block;
background: #c9a84c;
color: #0f1117;
padding: 12px 32px;
border-radius: 30px;
text-decoration: none;
font-weight: 700;
transition: background 0.2s, transform 0.2s;
}
.btn:hover {
background: #e8c56a;
transform: scale(1.04);
}مشروع 2: صفحة هبوط كاملة (HTML + CSS متقدم)
ستبني صفحة هبوط كاملة بقائمة تنقل، قسم رئيسي (Hero)، وقسم مميزات. تطبّق: CSS Grid، Flexbox، متغيرات CSS، وتصميم متجاوب.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>خدمتي الرقمية</title>
<style>
:root {
--bg: #0f1117;
--gold: #c9a84c;
--text: #e8eaf0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: var(--bg); color: var(--text); }
/* Navbar */
nav {
display: flex; justify-content: space-between;
align-items: center; padding: 16px 40px;
border-bottom: 1px solid rgba(255,255,255,0.08);
position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.logo { color: var(--gold); font-weight: 900; font-size: 1.2rem; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { color: #9aa3b8; text-decoration: none; font-size: 0.9rem; }
.nav-links a:hover { color: var(--gold); }
/* Hero */
.hero {
text-align: center; padding: 100px 20px;
background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 60%);
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 16px; }
.hero h1 span { color: var(--gold); }
.hero p { color: #9aa3b8; max-width: 500px; margin: 0 auto 32px; }
.cta {
background: var(--gold); color: #0f1117;
padding: 14px 36px; border-radius: 30px;
text-decoration: none; font-weight: 700; font-size: 1rem;
display: inline-block;
}
/* Features Grid */
.features {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px; padding: 60px 40px;
}
.feature {
background: #161b27; border-radius: 12px;
padding: 24px; text-align: center;
border: 1px solid rgba(255,255,255,0.06);
}
.feature .icon { font-size: 2.5rem; margin-bottom: 12px; }
.feature h3 { color: #fff; margin-bottom: 8px; }
.feature p { color: #9aa3b8; font-size: 0.88rem; }
</style>
</head>
<body>
<nav>
<div class="logo">Morocco ICO</div>
<ul class="nav-links">
<li><a href="#">الرئيسية</a></li>
<li><a href="#features">المميزات</a></li>
<li><a href="#contact">تواصل</a></li>
</ul>
</nav>
<section class="hero">
<h1>ابنِ موقعك<span> الأول</span> بنفسك</h1>
<p>تعلم HTML وCSS وJavaScript من الصفر</p>
<a href="#" class="cta">ابدأ الآن مجاناً</a>
</section>
<div class="features" id="features">
<div class="feature">
<div class="icon">🧱</div>
<h3>HTML</h3>
<p>بنِ هيكل موقعك من الصفر</p>
</div>
<div class="feature">
<div class="icon">🎨</div>
<h3>CSS</h3>
<p>صمّم موقعاً احترافياً وجميلاً</p>
</div>
<div class="feature">
<div class="icon">⚡</div>
<h3>JavaScript</h3>
<p>أضف التفاعل والحيوية</p>
</div>
</div>
</body>
</html>مشروع 3: آلة حاسبة تفاعلية (HTML + CSS + JavaScript)
هذا المشروع يجمع الثلاث لغات معاً. ستبني آلة حاسبة تعمل بالفعل مع منطق JavaScript كامل، تصميم CSS احترافي، وهيكل HTML صحيح.
// حالة الآلة الحاسبة
let display = '';
let operator = null;
let firstNum = null;
let newInput = false;
const screen = document.getElementById('screen');
function pressNum(num) {
if (newInput) {
display = num;
newInput = false;
} else {
display = display === '0' ? num : display + num;
}
screen.textContent = display;
}
function pressOp(op) {
firstNum = parseFloat(display);
operator = op;
newInput = true;
}
function calculate() {
if (!operator || firstNum === null) return;
const secondNum = parseFloat(display);
let result;
switch (operator) {
case '+': result = firstNum + secondNum; break;
case '-': result = firstNum - secondNum; break;
case '×': result = firstNum * secondNum; break;
case '÷':
result = secondNum !== 0 ? firstNum / secondNum : 'خطأ';
break;
}
display = result.toString();
screen.textContent = display;
operator = null;
firstNum = null;
newInput = true;
}
function clearAll() {
display = '';
operator = null;
firstNum = null;
screen.textContent = '0';
}بعد إتمام هذا المشروع، لديك آلة حاسبة حقيقية تعمل. هذا المستوى يكفي للحصول على أول عمل حر. أضفها لـ GitHub وضع رابطها في سيرتك الذاتية.
مسارك من الصفر إلى الاحتراف
هذه هي الخطوات الحقيقية التي يمر بها كل مطور ناجح. لا تتعجل ولا تقفز مراحل:
أكبر خطأ يقع فيه المبتدئون هو "تعلم تعلم تعلم" بدون بناء مشاريع. بعد كل أسبوع، ابنِ شيئاً. حتى لو كان بسيطاً. المشاريع هي ما تجعلك مطوراً حقيقياً.
أفضل مصادر التعلم المجانية
أسئلة يسألها كل مبتدئ
✅ الآن حان دورك
لقد قرأت عن HTML وCSS وJavaScript — لكن القراءة وحدها لا تصنع مطوراً. افتح VS Code الآن وابدأ بمشروع البطاقة الشخصية. الكود أمامك، الأدوات مجانية، والطريق واضح. المطور الحقيقي هو من يكتب الكود، لا من يقرأ عنه.
المشاركات
0 تعليقات