Frontend from Scratch: How a Website Is Built and Comes Alive

HTML · CSS · JavaScript · React

FRONTEND بالعربي
إزاي الموقع بيتبني وبيتحرّك قدام عينك — من الصفر

HTML
الهيكل 🦴
إيه اللي في الصفحة

CSS
الشكل 🎨
شكله إيه

JS
الحركة ⚡
بيعمل إيه لما تدوس

mo3ty.com

أهلًا يا أحمد 👋
عندك 3 إشعارات جديدة
افتح

كل اللي شايفه على أي موقع = الـ 3 لغات دول بيشتغلوا مع بعض. في آخر الكتاب هتعرف تبني ده بإيدك.

الكتاب ده لمين؟

عمره ما كتب سطر كود وعايز يبدأ
Backend عايز يفهم الطرف التاني
عارف HTML/CSS وعايز يفهم JavaScript صح
بيحضّر لمقابلة Frontend

هتلاقي جوه:

كل كود جنبه "شكله هيبقى إيه" في المتصفح
تشبيه من الحياة لكل فكرة
أشهر الأخطاء وحلّها
أسئلة المقابلات

1/25→

الفهرس

الكتاب مقسوم 4 أقسام بتبني على بعض: الأساسيات ← CSS ← JavaScript ← الحديث والمقابلات. كل صفحة = فكرة واحدة بتشبيه ومثال كود شغّال.

2/25→

إيه اللي بيحصل لما تفتح موقع؟
رحلة الصفحة من السيرفر لشاشتك

بتكتب mo3ty.com وتدوس Enter. في أقل من ثانية الصفحة ظهرت. تعالَ نشوف الـ 6 خطوات اللي حصلت.

الرحلة

بتكتب العنوان

←

DNS
يحوّل الاسم لرقم IP

←

السيرفر
يبعت الملفات

←

المتصفح
يقرأ HTML

←

يجيب CSS و JS

←

يرسم الصفحة

1 DNS: المتصفح بيسأل "mo3ty.com ده عنوانه الرقمي إيه؟" — زي دليل التليفونات. الجواب: 104.21.5.8

2 بيبعت طلب HTTP للعنوان ده: "هات لي الصفحة الرئيسية".

3 السيرفر بيرد بملف index.html.

4 المتصفح بيقرأ الـ HTML سطر سطر. كل ما يلاقي <link> أو <script> أو <img> بيطلب الملف ده كمان.

5 بيبني شجرة من العناصر (DOM)، ويطبّق عليها الـ CSS.

6 بيحسب مكان كل عنصر وحجمه (Layout)، وبعدين يرسم البكسلات على الشاشة.

الـ 3 لغات — مين بيعمل إيه

اللغة	دورها	لو شلتها
HTML	الهيكل: عنوان، فقرة، زرار، صورة	مفيش صفحة أصلًا
CSS	الشكل: ألوان، أحجام، أماكن	صفحة بيضا بخط أسود فوق بعض
JavaScript	التفاعل: لما تدوس، لما تكتب، جيب بيانات	صفحة ثابتة — مفيش حاجة بتتحرك

تشبيه 🏠

البيت: HTML = الحيطان والأوض والأبواب. CSS = الدهان والأثاث والستاير. JavaScript = الكهربا — اللمبة تنوّر لما تدوس، الباب يفتح لما تدوس الجرس.

يعني إيه DOM؟

المتصفح بيحوّل الـ HTML لـشجرة في الذاكرة. كل عنصر = فرع. وده اللي JavaScript بتتعامل معاه (بتغيّر الشجرة، فالصفحة بتتغيّر).

html ├── head │ └── title └── body ├── h1 "أهلًا" ├── p "مرحبًا بيك" └── button "اضغط"

افتكر الكلمة دي: DOM = Document Object Model = "الصفحة كشجرة أقدر أعدّل فيها بالكود". هتسمعها في كل مكان.

يلا نبدأ بالهيكل…
HTML

3/25→

HTML — هيكل الصفحة
الوسوم · الهيكل الأساسي · أول صفحة ليك

HTML مش لغة برمجة — هي لغة وصف: بتقول للمتصفح "ده عنوان، دي فقرة، ده زرار". كل حاجة بتتكتب جوه وسم (Tag) بيفتح وبيقفل.

شكل الوسم

<p>مرحبًا</p>

وسم فتح + المحتوى + وسم قفل (بشرطة مايلة /)

<a href="https://mo3ty.com">زورنا</a>

الـ attribute = معلومة إضافية عن الوسم (الرابط رايح فين)

الوسم	يعني	مثال
h1 … h6	عنوان (1 الأكبر)	<h1>الرئيسية</h1>
p	فقرة	<p>نص</p>
a	رابط	<a href="…">
img	صورة	<img src="cat.jpg">
button	زرار	<button>اضغط</button>
div	صندوق عام	لتجميع عناصر
ul / li	قايمة / عنصر فيها	<ul><li>…

أول صفحة كاملة

index.html

1 <!DOCTYPE html> 2 <html lang="ar" dir="rtl"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>موقعي</title> 6 </head> 7 <body> 8 <h1>أهلًا بيك 👋</h1> 9 <p>ده أول موقع ليا.</p> 10 <button>اضغط هنا</button> 11 </body> 12 </html>

localhost/index.html

أهلًا بيك 👋

ده أول موقع ليا.
اضغط هنا

head معلومات عن الصفحة (العنوان، الترميز) — مش بتظهر

body كل اللي بيظهر على الشاشة

جرّب دلوقتي: افتح Notepad، انسخ الكود، احفظه باسم index.html، ودبل كليك عليه. مبروك — ده موقع. مش محتاج أي برنامج. و dir="rtl" بتخلّي الصفحة من اليمين للشمال عشان العربي.

الصفحة شكلها فقير…
يلا نديها شكل بالـ CSS

4/25→

HTML بمعنى Semantic + الفورم
الوسوم اللي بتقول "أنا إيه" — وإزاي تاخد بيانات من المستخدم

ليه مش div لكل حاجة؟

ممكن تبني صفحة كلها <div>. بس المتصفح وجوجل وقارئ الشاشة للمكفوفين مش هيفهموا إيه الهيدر وإيه المقال. الوسوم "بمعنى" بتقول:

<header>
اللوجو والقايمة

<nav>
روابط التنقل

<main>
المحتوى الأساسي — <article> · <section>

<aside>
الجانبي

<footer>
الحقوق والروابط

تشبيه 🏷️

كراتين النقل: ممكن تكتب "حاجات" على كلها. بس لو كتبت "مطبخ" و"أوضة نوم" أي حد يساعدك في الفك هيعرف يحطها فين. المتصفح وجوجل هما اللي بيساعدوك.

الفورم — بوابة البيانات

form.html

1 <form action="/register" method="POST"> 2 <label>الاسم</label> 3 <input type="text" name="name" required> 4 5 <label>الإيميل</label> 6 <input type="email" name="email"> 7 8 <select name="city"> 9 <option>القاهرة</option> 10 </select> 11 12 <button type="submit">تسجيل</button> 13 </form>

type=	بيعمل إيه
text / email / password	خانة نص (الإيميل بيتأكد من الشكل)
number / date	أرقام / تاريخ
checkbox / radio	اختيار متعدد / واحد بس
file	رفع ملف

الحاجات اللي بتفرق: name = اللي الـ Backend هيستلم بيه القيمة (من غيره مش بتتبعت) · required = لازم تتملي · <label> مربوط بالـ input عشان لما تدوس على الكلمة الخانة تتفعّل · alt على الصور = وصف للمكفوفين ولو الصورة ما اتحمّلتش

الشكل بقى…
CSS من الأول

5/25→

CSS — شكل الصفحة
المحدد والخاصية والقيمة — وإزاي تربطها بالـ HTML

CSS = قواعد بتقول "العناصر دي شكلها كده". كل قاعدة = مين (المحدد) + إيه (الخاصية) + قد إيه (القيمة).

شكل القاعدة

h1 { color: red; font-size: 32px; }

المحدد h1 ← كل العناوين · الخاصية color ← اللون · القيمة red

المحدد	بيختار	مثال
p	كل وسوم p	p {…}
.card	كل اللي عليه class="card"	.card { … }
#logo	العنصر اللي id="logo" (واحد بس)	#logo { … }
p a	روابط جوه فقرات	p a {…}
a:hover	الرابط لما الماوس عليه	a:hover { … }

القاعدة: استخدم class للشكل (بتتكرر). id للعنصر الفريد بس. ومتستخدمش الوسم لوحده في المشاريع الكبيرة.

بتربطها إزاي؟

style.css

1 body { 2 font-family: Cairo, sans-serif; 3 background: #f5f2ea; 4 } 5 6 .btn { 7 background: #1f2f7a; 8 color: white; 9 padding: 10px 20px; 10 border-radius: 8px; 11 }

index.html

1 <head> 2 <link rel="stylesheet" href="style.css"> 3 </head> 4 <body> 5 <button class="btn">اضغط</button>

localhost/index.html

اضغط

الـ Cascade — لما قاعدتين يتعارضوا مين يكسب؟

inline style
الأقوى

←

#id

←

.class

←

الوسم
الأضعف

الأخص بيكسب. ولو نفس القوة ← اللي مكتوب آخر بيكسب.

تشبيه 📢

أوامر من مدير عام "كل الموظفين لبس أزرق" (الوسم)، ومدير القسم "قسم المبيعات أحمر" (class)، ومديرك المباشر "إنت بالذات أخضر" (id). هتلبس أخضر — الأقرب ليك بيكسب. و !important = أمر من صاحب الشركة، متستخدمهوش إلا للضرورة.

كل عنصر في الصفحة صندوق…
يعني إيه Box Model؟

6/25→

كل حاجة صندوق Box Model
Margin · Border · Padding · Content — أهم فكرة في CSS

أي عنصر في الصفحة (نص، صورة، زرار) المتصفح شايفه مستطيل. وكل مستطيل ليه 4 طبقات من جوه لبره.

الطبقات الأربعة

margin — المسافة بره

border — الحدود

padding — المسافة جوه

content
المحتوى

تشبيه 🖼️

لوحة على الحيطة: المحتوى = الرسمة. Padding = الكرتون الأبيض حوالين الرسمة جوه البرواز. Border = البرواز نفسه. Margin = المسافة بين البرواز واللوحة اللي جنبه.

بالكود

1 .card { 2 width: 200px; 3 padding: 20px; 4 border: 2px solid navy; 5 margin: 10px; 6 }

سؤال المقابلة الكلاسيكي: العرض الكلي كام؟

200 (محتوى) + 2×20 (padding) + 2×2 (border) = 244px
+ margin 10×2 = 264px المساحة اللي بياخدها

⚠️ المفاجأة اللي بتضايق الكل: كتبت width: 200px والعنصر طلع 244! الحل في كل مشروع:

1 * { box-sizing: border-box; } 2 /* دلوقتي width = العرض الكلي بالـ padding والـ border */

الاختصارات

الكتابة	يعني
padding: 10px	الأربع جهات 10
padding: 10px 20px	فوق/تحت 10 · يمين/شمال 20
padding: 5px 10px 15px 20px	فوق · يمين · تحت · شمال (عقارب الساعة)
margin: 0 auto	فوق/تحت 0 · يمين/شمال تلقائي = توسيط

display — الصندوق بيتصرف إزاي

القيمة	السلوك	أمثلة
block	بياخد سطر كامل لوحده	div · p · h1
inline	جوه السطر مع الكلام، مبيقبلش width	a · span · b
inline-block	جوه السطر بس بيقبل width/height	button · img
none	يختفي خالص

Margin collapse: لو عنصرين فوق بعض، واحد margin-bottom: 20 والتاني margin-top: 30، المسافة بينهم 30 مش 50. المتصفح بياخد الأكبر بس.

عايز 3 صناديق جنب بعض…
Flexbox

7/25→

Flexbox — ترتيب في اتجاه واحد
الأداة اللي هتستخدمها في 80% من التنسيق

قبل Flexbox، ترتيب 3 صناديق جنب بعض وتوسيطهم كان كابوس. دلوقتي: سطرين. بتحطها على الأب (الحاوية)، والأبناء بيترتبوا لوحدهم.

الأساس

1 .container { 2 display: flex; 3 }

الأبناء بقوا جنب بعض تلقائي (الاتجاه الافتراضي: صف)

الاتجاه:

1 flex-direction: row; /* صف ← الافتراضي */ 2 flex-direction: column; /* عمود ↓ */

تشبيه 🚂

الحاوية = قضيب القطار. العربيات (الأبناء) بتتصف عليه تلقائي. إنت بتقرر: القضيب أفقي ولا رأسي، والعربيات متلزّقة ولا بينهم مسافة، وفي الأول ولا النص ولا الآخر.

التوزيع والمحاذاة

justify-content — على المحور الأساسي (أفقي في الصف):

flex-start

center

space-between

align-items — على المحور التاني (رأسي في الصف): center بيوسّط رأسيًا.

التوسيط المثالي (سؤال مقابلة):

display:flex; justify-content:center; align-items:center;

3 سطور بتوسّط أي حاجة أفقيًا ورأسيًا. قبل Flexbox ده كان يحتاج 20 سطر.

خصائص الأبناء

الخاصية	بتعمل إيه
gap: 10px (على الأب)	مسافة بين الأبناء — بدل margin
flex: 1	الابن ياخد كل المساحة الفاضية (لو اتنين flex:1 يتقاسموها)
flex-wrap: wrap (على الأب)	لو مفيش مكان، انزل سطر جديد
order: 2	غيّر الترتيب من غير ما تغيّر الـ HTML

flex:1

ثابت

flex:1

الأول والتالت بياخدوا الفاضي بالتساوي، النص بحجمه

جرّب: flexboxfroggy.com — لعبة بتعلّمك Flexbox في ساعة. أحسن طريقة تثبّتها.

طيب لو عايز شبكة صفوف وأعمدة
زي جدول؟

8/25→

Grid — شبكة في اتجاهين
لما التصميم صفوف وأعمدة مع بعض

Flexbox = اتجاه واحد (صف أو عمود). Grid = الاتنين مع بعض. مناسب لتخطيط الصفحة الكامل: هيدر فوق، جانبي شمال، محتوى يمين، فوتر تحت.

الأساس

1 .grid { 2 display: grid; 3 grid-template-columns: 1fr 1fr 1fr; 4 gap: 10px; 5 }

3 أعمدة متساوية (fr = جزء من المساحة الفاضية). العناصر بتتوزّع لوحدها

القيمة	يعني
1fr 2fr	التاني ضعف الأول
200px 1fr	الأول ثابت، التاني الباقي
repeat(3, 1fr)	3 أعمدة متساوية — اختصار
repeat(auto-fit, minmax(200px, 1fr))	أعمدة بتزيد وتقل حسب المساحة — سحر الريسبونسف

تخطيط صفحة كامل

1 .page { 2 display: grid; 3 grid-template-areas: 4 "header header" 5 "sidebar main" 6 "footer footer"; 7 grid-template-columns: 200px 1fr; 8 } 9 header { grid-area: header; }

header

side

main

footer

تشبيه 🗺️

بترسم خريطة الصفحة بالكلمات زي ما بترسمها على ورقة. "header header" يعني الهيدر بياخد العمودين. والمتصفح بينفّذ الرسمة.

	Flexbox	Grid
الاتجاه	واحد (صف أو عمود)	اتنين (صفوف وأعمدة)
بيتحكم	المحتوى بيحدد الحجم	الحاوية بتحدد الشبكة
استخدمه لـ	شريط تنقل · أزرار · كارت · توسيط	تخطيط الصفحة · معرض صور · جداول
القاعدة	مكوّنات صغيرة	الهيكل الكبير

الاتنين بيشتغلوا مع بعض: Grid للصفحة، و Flexbox جوه كل خانة.

الموقع حلو على اللابتوب…
وعلى الموبايل؟

9/25→

الريسبونسف Responsive
موقع واحد يشتغل على كل الشاشات

60% من الزوار على موبايل. التصميم اللي شكله حلو على 1400px بيبقى كارثة على 375px. الحل مش موقعين — موقع واحد بيتأقلم.

Media Queries — قواعد حسب الحجم

1 .cards { 2 display: grid; 3 grid-template-columns: 1fr; /* موبايل: عمود واحد */ 4 } 5 6 @media (min-width: 768px) { 7 .cards { grid-template-columns: 1fr 1fr; } 8 } 9 10 @media (min-width: 1024px) { 11 .cards { grid-template-columns: 1fr 1fr 1fr; } 12 }

"لو الشاشة أعرض من 768، اعمل عمودين. أعرض من 1024، تلاتة".

تشبيه 💧

المية بتاخد شكل الإناء. الموقع الريسبونسف بياخد شكل الشاشة. والـ media query = "لو الإناء كبير اتفرد، لو صغير اتجمّع".

Mobile-First — ابدأ بالصغير

اكتب الـ CSS الأساسي للموبايل الأول (أبسط)، وبعدين ضيف قواعد للشاشات الأكبر بـ min-width. الطريقة دي أسهل من العكس.

موبايل
عمود 1

تابلت
عمود 2

ديسكتوب
عمود 3

النقطة	الجهاز
< 640px	موبايل
768px	تابلت
1024px	لابتوب
1280px+	شاشة كبيرة

الحاجات اللي بتنسى — والموقع يبوظ على الموبايل

index.html

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

السطر ده في الـ head — من غيره الموبايل بيعرض الموقع مصغّر زي الديسكتوب
الصور: max-width: 100% عشان متطلعش بره الشاشة
الوحدات: rem و % بدل px الثابتة · vw/vh = نسبة من الشاشة
جرّب على موبايل حقيقي مش بس DevTools

الصفحة شكلها حلو…
بس مفيش حاجة بتتحرك. JavaScript!

10/25→

تحريك العناصر والحركة
Position · Transition · Animation · المتغيرات

position — العنصر يقف فين

القيمة	السلوك	استخدمه لـ
static	الافتراضي — في مكانه الطبيعي	—
relative	في مكانه + تقدر تزحزحه (top/left)	نقطة مرجع للأبناء
absolute	بيطلع من التدفق، بيتحدد بالنسبة لأقرب أب relative	بادج على صورة · قايمة منسدلة
fixed	ثابت في الشاشة حتى مع السكرول	هيدر ثابت · زرار شات
sticky	عادي لحد ما يوصل لنقطة، بعدها يلزق	عناوين الأقسام

تشبيه 📌

ورق على مكتب: static = مكانه الطبيعي. absolute = ورقة مرفوعة ومحطوطة في مكان معيّن بالنسبة للمكتب. fixed = ملزوقة على الشاشة متتحركش مهما قلّبت الورق.

Transition — الحركة الناعمة

1 .btn { 2 background: navy; 3 transition: all 0.3s ease; 4 } 5 .btn:hover { 6 background: red; 7 transform: scale(1.05); 8 }

لما الماوس يعدّي، اللون بيتغيّر بنعومة في 0.3 ثانية ويكبر 5% — بدل ما ينطّ فجأة

Animation — حركة مستمرة من غير ماوس:

1 @keyframes pulse { 2 0% { transform: scale(1); } 3 50% { transform: scale(1.1); } 4 100% { transform: scale(1); } 5 } 6 .heart { animation: pulse 1s infinite; }

CSS Variables — غيّر لون الموقع كله من سطر

1 :root { 2 --primary: #1f2f7a; 3 --space: 16px; 4 } 5 .btn { background: var(--primary); } 6 .card { padding: var(--space); }

عرّف اللون مرة في :root واستخدمه في 100 مكان. عايز تغيّر هوية الموقع؟ سطر واحد. وده أساس الـ Dark Mode:

1 @media (prefers-color-scheme: dark) { 2 :root { --bg: #111; --text: #eee; } 3 }

دلوقتي نخلّي الصفحة تتحرك بجد…
JavaScript

11/25→

JavaScript — الصفحة بتتحرك
المتغيرات · الأنواع · الدوال — في صفحة واحدة

JavaScript = لغة برمجة حقيقية بتشتغل جوه المتصفح. هي اللي بتخلّي الزرار يعمل حاجة لما تدوسه، والقايمة تفتح، والبيانات تيجي من غير ما الصفحة تتحمّل تاني.

المتغيرات والأنواع

basics.js

1 const name = "Ahmed"; // نص — مش هيتغيّر 2 let age = 25; // رقم — ممكن يتغيّر 3 let isOnline = true; // صح/غلط 4 let nothing = null; // فاضي عمدًا 5 6 const user = { // كائن: مجموعة خصائص 7 name: "Sara", 8 age: 30, 9 }; 10 const colors = ["red", "blue"]; // مصفوفة 11 12 console.log(user.name); // Sara 13 console.log(colors[0]); // red

const ولا let؟ ابدأ دايمًا بـ const. لو احتجت تغيّر القيمة حوّلها let. وvar قديمة — متستخدمهاش.

الدوال — كود بتناديه بالاسم

functions.js

1 // الطريقة التقليدية 2 function greet(name) { 3 return "أهلًا يا " + name; 4 } 5 6 // Arrow function — الأحدث والأقصر 7 const greet = (name) => "أهلًا يا " + name; 8 9 // Template literal — نص فيه متغيرات 10 const greet = (name) => `أهلًا يا ${name}`; 11 12 console.log(greet("Ali")); // أهلًا يا Ali

تشبيه 🧾

الدالة زي وصفة باسم: تكتبها مرة، وتناديها كل ما تحتاجها. الـ Arrow function نفس الوصفة بس مكتوبة باختصار.

فين بتتكتب؟ في ملف app.js وتربطه قبل </body>: <script src="app.js"></script>

الشروط والتكرار — زي أي لغة

1 if (age >= 18) { 2 console.log("بالغ"); 3 } else { 4 console.log("قاصر"); 5 } 6 7 // الشرط الثلاثي 8 const status = age >= 18 ? "بالغ" : "قاصر";

1 for (const color of colors) { 2 console.log(color); 3 } 4 5 // الأشهر في JS الحديثة 6 colors.forEach(color => console.log(color)); 7 8 const big = colors.map(c => c.toUpperCase()); 9 // ["RED", "BLUE"]

⚠️ خد بالك: == بيحوّل الأنواع ("5" == 5 صح!). استخدم === دايمًا — بتقارن النوع كمان.

طيب إزاي الكود ده يلمس الصفحة؟
DOM

12/25→

التعامل مع الصفحة DOM
جيب عنصر · غيّره · أضف · امسح

افتكر: المتصفح بيحوّل الـ HTML لشجرة (DOM). JavaScript بتقدر تمسك أي فرع في الشجرة وتغيّره — والصفحة بتتحدّث فورًا.

امسك العنصر

index.html

1 <h1 id="title">أهلًا</h1> 2 <p class="msg">رسالة 1</p> 3 <p class="msg">رسالة 2</p> 4 <button id="btn">اضغط</button>

app.js

1 // عنصر واحد — بنفس محددات CSS 2 const title = document.querySelector("#title"); 3 4 // كل العناصر اللي بتطابق 5 const msgs = document.querySelectorAll(".msg"); 6 7 console.log(title.textContent); // أهلًا 8 console.log(msgs.length); // 2

تشبيه 🎯

querySelector = "هات لي أول واحد شكله كده". querySelectorAll = "هات لي كلهم". وبتستخدم نفس طريقة الاختيار بتاعة CSS.

غيّره

app.js

1 // النص 2 title.textContent = "مرحبًا يا أحمد"; 3 4 // الشكل (CSS من الكود) 5 title.style.color = "red"; 6 7 // الأفضل: ضيف/شيل class 8 title.classList.add("highlight"); 9 title.classList.remove("highlight"); 10 title.classList.toggle("dark"); // لو موجود شيله، لو مش موجود ضيفه 11 12 // الخصائص 13 img.src = "new.jpg"; 14 input.value = ""; // فضّي الخانة

ليه classList أحسن من style؟ الشكل يفضل في CSS، و JS تقول بس "فعّل الحالة دي". كده الكود منظّم والمصمّم يقدر يعدّل من غير ما يلمس JS.

أضف وامسح

1 // اعمل عنصر جديد 2 const li = document.createElement("li"); 3 li.textContent = "عنصر جديد"; 4 5 // ضيفه في القايمة 6 document.querySelector("ul").append(li); 7 8 // امسح 9 li.remove();

1 // أو اكتب HTML مباشرة (للسرعة) 2 list.innerHTML = ` 3 <li>واحد</li> 4 <li>اتنين</li> 5 `;

⚠️ innerHTML + بيانات من المستخدم = XSS، لو هتعرض نص كتبه حد. استخدم textContent.

طيب الكود ده يشتغل إمتى؟
لما المستخدم يدوس!

13/25→

الأحداث Events
"لما المستخدم يعمل كذا، نفّذ كذا"

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

الأساس

app.js

1 const btn = document.querySelector("#btn"); 2 3 btn.addEventListener("click", () => { 4 alert("ضغطت!"); 5 }); 6 7 // مع معلومات الحدث 8 input.addEventListener("input", (e) => { 9 console.log(e.target.value); // اللي اتكتب 10 });

الحدث	إمتى
click	ضغط
input	كل حرف بيتكتب
change	بعد ما يخلص الكتابة ويسيب الخانة
submit	إرسال فورم
keydown	ضغط زرار كيبورد
mouseenter / mouseleave	الماوس دخل / خرج
scroll	تمرير
DOMContentLoaded	الصفحة خلصت تحميل

مثال كامل: عدّاد

index.html

1 <p>العدد: <span id="count">0</span></p> 2 <button id="plus">+</button> 3 <button id="minus">−</button>

app.js

1 let count = 0; 2 const display = document.querySelector("#count"); 3 4 const render = () => display.textContent = count; 5 6 document.querySelector("#plus") 7 .addEventListener("click", () => { count++; render(); }); 8 document.querySelector("#minus") 9 .addEventListener("click", () => { count--; render(); });

localhost/index.html

العدد: 3 + −

النمط ده مهم: الحالة (count) في متغير · دالة render بتحدّث الشاشة من الحالة · الأحداث بتغيّر الحالة وتنادي render. ده بالظبط اللي React بيعمله — بس تلقائي.

الفورم + منع الافتراضي

1 form.addEventListener("submit", (e) => { 2 e.preventDefault(); // متعملش reload! 3 const name = form.name.value; 4 if (name.length < 3) { 5 error.textContent = "الاسم قصير"; 6 return; 7 } 8 // ابعت للسيرفر... 9 });

preventDefault = "متعملش السلوك الافتراضي". الفورم افتراضيًا بيعمل reload للصفحة. الرابط بيروح للعنوان. بنمنع ده عشان نتحكم إحنا.

Event Delegation: بدل ما تحط listener على 100 زرار، حطه على الأب الواحد واعرف مين اتضغط من e.target. أخف وبيشتغل مع العناصر اللي هتتضاف بعدين.

عايز أجيب بيانات من السيرفر
من غير ما الصفحة تتحمّل تاني؟

14/25→

الانتظار الذكي Async و fetch
إزاي تجيب بيانات من السيرفر من غير ما الصفحة تتجمّد

طلب للسيرفر بياخد نص ثانية. لو JavaScript استنّت، الصفحة هتتجمّد والمستخدم مش هيقدر يعمل حاجة. الحل: ابعت الطلب وكمّل شغلك، ولما الرد يوصل نفّذ اللي عايزه.

المشكلة والحل

تشبيه ☕

في الكافيه: Synchronous = تطلب قهوة وتقف قدام الكاونتر متحركش لحد ما تيجي. Asynchronous = تطلب، تاخد رقم، تقعد على الترابيزة وتكمّل شغلك، ولما الرقم ينادى تروح تاخدها. الـ Promise = الرقم اللي أخدته.

promise.js

1 // Promise = "وعد" إن النتيجة هتيجي 2 fetch("/api/users") 3 .then(res => res.json()) 4 .then(data => console.log(data)) 5 .catch(err => console.log("غلط:", err)); 6 7 console.log("ده بيتطبع الأول!"); // مش بيستنى

الترتيب في الكونسول: "ده بيتطبع الأول!" ثم البيانات بعد ما توصل

async / await — نفس الحاجة بس أوضح

async.js

1 async function loadUsers() { 2 try { 3 const res = await fetch("/api/users"); 4 const users = await res.json(); 5 render(users); 6 } catch (err) { 7 showError("فشل التحميل"); 8 } finally { 9 hideSpinner(); 10 } 11 } 12 13 loadUsers();

async الدالة دي فيها انتظار

await "استنّى هنا (من غير ما تجمّد الصفحة) لحد ما الوعد يتحقق"

try/catch لو حصل غلط (نت قطع، سيرفر وقع) امسكه

الكود شكله متتابع وسهل القراءة، بس من تحت بيشتغل async. استخدم async/await دايمًا — الـ .then للفهم بس.

إرسال بيانات (POST + JSON)

1 const res = await fetch("/api/users", { 2 method: "POST", 3 headers: { "Content-Type": "application/json" }, 4 body: JSON.stringify({ name: "Ali", age: 25 }), 5 }); 6 const saved = await res.json();

JSON = شكل نصي للبيانات بيفهمه كل حاجة. JSON.stringify يحوّل الكائن لنص عشان يتبعت. res.json() يحوّل الرد لكائن تقدر تستخدمه.

الـ Event Loop (سؤال مقابلة): JS بتشتغل على خيط واحد. الحاجات اللي بتستنّى (fetch, setTimeout) بتتحط في طابور، ولما الكود الحالي يخلص بتتنفّذ. عشان كده "ده بيتطبع الأول".

الكود بقى كتير ومبعثر…
إزاي ننظّمه؟

15/25→

JavaScript الحديثة
Destructuring · Spread · Modules · Array methods — اللي هتشوفها في أي كود

اختصارات هتشوفها في كل مكان

1 // Destructuring — فكّ الكائن 2 const user = { name: "Sara", age: 30 }; 3 const { name, age } = user; 4 5 // Spread — انسخ وضيف 6 const updated = { ...user, age: 31 }; 7 const all = [...colors, "green"]; 8 9 // Optional chaining — لو مش موجود مترميش غلط 10 const city = user.address?.city; // undefined بدل crash 11 12 // Default 13 const lang = user.lang ?? "ar";

Array methods — بدل الـ for

1 const products = [ 2 { name: "لابتوب", price: 25000, inStock: true }, 3 { name: "ماوس", price: 200, inStock: false }, 4 { name: "كيبورد", price: 500, inStock: true }, 5 ]; 6 7 // فلتر 8 const available = products.filter(p => p.inStock); 9 10 // حوّل 11 const names = products.map(p => p.name); 12 13 // جمّع 14 const total = products.reduce((sum, p) => sum + p.price, 0); 15 16 // دوّر 17 const cheap = products.find(p => p.price < 1000);

Modules — قسّم الكود لملفات

utils.js

1 export const formatPrice = (p) => `${p} ج.م`; 2 export default function api() { ... }

app.js

1 import api, { formatPrice } from "./utils.js";

index.html

1 <script type="module" src="app.js"></script>

تشبيه 📁

بدل ما كل الكود في ملف واحد 5000 سطر، كل ملف مسؤول عن حاجة ويصدّر اللي الباقي محتاجه.

LocalStorage — احفظ في المتصفح

1 // احفظ (نص بس — فحوّل) 2 localStorage.setItem("theme", "dark"); 3 localStorage.setItem("cart", JSON.stringify(cart)); 4 5 // اقرأ 6 const theme = localStorage.getItem("theme"); 7 const cart = JSON.parse(localStorage.getItem("cart") ?? "[]"); 8 9 // امسح 10 localStorage.removeItem("cart");

بيفضل بعد ما تقفل المتصفح. مناسب لـ: الثيم، سلة الشراء، إعدادات. مش لكلمات السر أو التوكن الحساس.

المشروع الأول:
قايمة مهام كاملة بكل اللي اتعلمناه

16/25→

مشروع: قايمة مهام كاملة
HTML + CSS + JS + LocalStorage — في 40 سطر

index.html

1 <div class="app"> 2 <h1>مهامي</h1> 3 <form id="form"> 4 <input id="input" placeholder="مهمة جديدة..." required> 5 <button>أضف</button> 6 </form> 7 <ul id="list"></ul> 8 </div>

style.css

1 .app { max-width: 400px; margin: 40px auto; } 2 form { display: flex; gap: 8px; } 3 input { flex: 1; padding: 10px; } 4 li { display: flex; justify-content: space-between; 5 padding: 10px; border-bottom: 1px solid #ddd; } 6 li.done { text-decoration: line-through; opacity: .5; }

localhost/index.html

مهامي

مهمة جديدة... أضف
أذاكر JavaScript ✕
~~أقرأ الكتاب~~ ✕

app.js

1 const form = document.querySelector("#form"); 2 const input = document.querySelector("#input"); 3 const list = document.querySelector("#list"); 4 5 // 1) الحالة — من LocalStorage أو فاضية 6 let tasks = JSON.parse(localStorage.getItem("tasks")) ?? []; 7 8 // 2) ارسم الشاشة من الحالة 9 const render = () => { 10 localStorage.setItem("tasks", JSON.stringify(tasks)); 11 list.innerHTML = tasks.map((t, i) => ` 12 <li class="${t.done ? "done" : ""}" data-i="${i}"> 13 <span>${t.text}</span><button>✕</button> 14 </li>`).join(""); 15 }; 16 17 // 3) أضف 18 form.addEventListener("submit", (e) => { 19 e.preventDefault(); 20 tasks.push({ text: input.value, done: false }); 21 input.value = ""; 22 render(); 23 }); 24 25 // 4) علّم كمنجز / امسح (Event Delegation) 26 list.addEventListener("click", (e) => { 27 const i = e.target.closest("li").dataset.i; 28 if (e.target.tagName === "BUTTON") tasks.splice(i, 1); 29 else tasks[i].done = !tasks[i].done; 30 render(); 31 }); 32 33 render();

لاحظ النمط: الحالة في مصفوفة · دالة render واحدة بتحوّل الحالة لـ HTML · الأحداث بتغيّر الحالة وتنادي render. ده النمط اللي React مبني عليه.

النمط ده لو عملته يدوي في موقع كبير هيبقى جحيم…
React!

17/25→

ليه React؟
المشكلة اللي بتحلها الـ Frameworks — والمكوّن (Component)

في المشروع اللي فات كتبنا render بإيدنا وقلنا للمتصفح يرسم كل حاجة من الأول. في موقع فيه 50 جزء بيتغيّروا، التتبّع اليدوي ده مستحيل. React بتقول: إنت وصف الشكل حسب الحالة، وأنا هحدّث اللي اتغيّر بس.

الفكرة الجوهرية

UI = f(state)
الشاشة = دالة في الحالة. غيّر الحالة ← الشاشة تتغيّر لوحدها.

الحالة
state

←

React
بيقارن القديم بالجديد

←

يحدّث الفرق بس
Virtual DOM

←

الشاشة

تشبيه 🧾

في JS العادية إنت بتقول للمتصفح إزاي يغيّر الشاشة خطوة خطوة ("امسح ده، ضيف ده"). في React بتقول إيه الشكل النهائي ("القايمة فيها 3 مهام")، وهي بتعرف لوحدها إيه اللي اتغيّر. زي الفرق بين إنك تدّي السواق الطريق شارع شارع، وبين إنك تقوله العنوان.

Component — قطعة ليجو

الموقع بيتقسم لقطع صغيرة بتتعاد استخدامها. كل قطعة = دالة بترجّع HTML (اسمه JSX):

Button.jsx

1 function Button({ text, color }) { 2 return ( 3 <button className={color}> 4 {text} 5 </button> 6 ); 7 } 8 9 // الاستخدام — زي وسم HTML جديد اخترعته 10 <Button text="احفظ" color="blue" /> 11 <Button text="امسح" color="red" />

Props المدخلات — بتيجي من الأب، مش بتتغيّر جوه المكوّن

JSX HTML جوه JavaScript. الـ { } = "هنا JS"

فروق صغيرة: className بدل class · الوسم لازم يتقفل <img /> · المكوّن اسمه بحرف كبير

الموقع كشجرة مكوّنات

App ├── Header │ ├── Logo │ └── Nav ├── ProductList │ ├── ProductCard ← نفس المكوّن 20 مرة ببيانات مختلفة │ ├── ProductCard │ └── ProductCard └── Footer

تشبيه 🧱

ليجو: بتبني قطعة "كارت منتج" مرة واحدة، وبتستخدمها 100 مرة. عايز تغيّر شكل الكروت كلها؟ تعدّل القطعة مرة واحدة. وكل قطعة ممكن تتبني من قطع أصغر.

طيب الحالة (state) دي
بتتعمل وبتتغيّر إزاي؟

18/25→

الحالة useState و useEffect
الـ Hooks الاتنين اللي هتستخدمهم في 90% من الوقت

useState — ذاكرة المكوّن

Counter.jsx

1 import { useState } from "react"; 2 3 function Counter() { 4 const [count, setCount] = useState(0); 5 6 return ( 7 <div> 8 <p>العدد: {count}</p> 9 <button onClick={() => setCount(count + 1)}>+</button> 10 </div> 11 ); 12 }

count القيمة الحالية (تقرأها)

setCount الدالة اللي بس بتغيّرها — وبتخلّي React يعيد الرسم

useState(0) القيمة الأولى

⚠️ أشهر غلطة: count = count + 1 مباشرة. مش هيحصل حاجة — React مش هتعرف. لازم setCount.

تشبيه 🔔

الحالة زي لوحة نتايج في ملعب. مينفعش تمسح الرقم بإيدك — لازم تدوس الزرار الرسمي (setCount) عشان الجميع يشوف التحديث.

useEffect — اعمل حاجة بعد الرسم

جيب بيانات من السيرفر، غيّر عنوان الصفحة، اشترك في حدث… الحاجات اللي "بره" الرسم:

Users.jsx

1 function Users() { 2 const [users, setUsers] = useState([]); 3 const [loading, setLoading] = useState(true); 4 5 useEffect(() => { 6 fetch("/api/users") 7 .then(r => r.json()) 8 .then(data => { setUsers(data); setLoading(false); }); 9 }, []); // [] = مرة واحدة بس عند الظهور 10 11 if (loading) return <p>جاري التحميل...</p>; 12 return ( 13 <ul> 14 {users.map(u => <li key={u.id}>{u.name}</li>)} 15 </ul> 16 ); 17 }

المصفوفة التانية	يشتغل إمتى
[]	مرة واحدة لما المكوّن يظهر
[id]	كل ما id يتغيّر
مفيش	بعد كل رسم (نادرًا تحتاجه)

key في القوايم: لما تعمل map على مصفوفة، كل عنصر لازم key فريد (id مش index). React بتستخدمه عشان تعرف مين اتغيّر ومين اتمسح من غير ما تعيد رسم الكل. من غيره هتاخد تحذير وأحيانًا سلوك غريب.

البيانات محتاجة تتنقل
بين المكوّنات…

19/25→

تدفّق البيانات والنظام البيئي
Props down · Events up · Context · Router · الأدوات

القاعدة: البيانات تنزل، الأحداث تطلع

App
state: cart = [...]

↓ props: cart · onAdd

ProductList

↓ props: product · onAdd

ProductCard
onClick → onAdd(product)

الحالة في الأب. الابن بياخدها كـ props. لما الابن عايز يغيّرها بينادي دالة جات له من الأب.

1 // الأب 2 const [cart, setCart] = useState([]); 3 const addToCart = (p) => setCart([...cart, p]); 4 <ProductCard product={p} onAdd={addToCart} /> 5 6 // الابن 7 <button onClick={() => onAdd(product)}>أضف</button>

تشبيه 🏢

الشركة: المعلومات بتنزل من المدير للموظفين (props). الموظف مش بيغيّر قرار المدير بنفسه — بيرفع طلب (event) والمدير هو اللي يقرر ويبلّغ الكل.

Context — لما الشجرة تطول

المستخدم الحالي محتاج في 30 مكوّن. تمرّره props عبر 6 مستويات؟ (Prop Drilling — مرهق). Context = صندوق مشترك أي مكوّن يقرأ منه مباشرة:

1 const UserContext = createContext(); 2 3 // فوق 4 <UserContext.Provider value={user}> 5 <App /> 6 </UserContext.Provider> 7 8 // في أي مكوّن تحت مهما كان بعيد 9 const user = useContext(UserContext);

الحالة	الحل
بين أب وابن	props
في 3+ مستويات	Context
معقّدة ومشتركة في كل التطبيق	Redux · Zustand
جاية من السيرفر	React Query · SWR

النظام البيئي — الحاجات اللي حوالين React

المشكلة	الأداة	في سطر
صفحات متعددة بدون reload	React Router	<Route path="/users/:id">
بداية مشروع	Vite	npm create vite@latest
إطار كامل (SSR، routing، API)	Next.js	الأكثر طلبًا في الوظائف
تنسيق سريع	Tailwind CSS	class="flex gap-4 p-2"
أنواع للكود	TypeScript	بيمسك الأخطاء قبل التشغيل
بدائل React	Vue · Svelte · Angular	نفس الأفكار بشكل مختلف

نصيحة: اتقن JavaScript الأول (الصفحات اللي فاتت). React من غير JS قوية = حفظ من غير فهم. وبعدين React + TypeScript + Next.js = الكومبو اللي السوق عايزه.

الموقع شغّال… بس بطيء.
إزاي أخلّيه سريع؟

20/25→

الأداء Performance
ليه الموقع بطيء وإزاي تقيس وتصلّح

كل ثانية تأخير = 7% من الزوار بيمشوا. وجوجل بتحط الموقع البطيء تحت في النتايج. الأداء مش رفاهية.

قيس الأول — Lighthouse

في Chrome: F12 ← تاب Lighthouse ← Analyze. بيديك درجة من 100 وقايمة بالمشاكل.

المقياس	يعني	الهدف
LCP	أكبر عنصر ظهر إمتى (الصورة الرئيسية)	< 2.5s
INP	الصفحة بترد على الضغط بسرعة؟	< 200ms
CLS	العناصر بتنطّ وإنت بتقرأ؟	< 0.1

دول الـ Core Web Vitals — اللي جوجل بتقيس بيهم

تشبيه 🏥

متعالجش قبل ما تشخّص. Lighthouse = الأشعة. بيقولك المشكلة فين بالظبط بدل ما تحسّن حاجات عشوائية.

أكبر 5 أسباب للبطء

السبب	الحل
صور ضخمة (أشهر سبب!)	اضغطها · WebP · loading="lazy" · أحجام مختلفة بـ srcset
JS كتير بيتحمّل مرة واحدة	Code splitting — حمّل كل صفحة لما تتفتح
طلبات كتير للسيرفر	جمّع الملفات · كاش · CDN
CSS/JS بيوقّف الرسم	defer على السكريبت · CSS الحرج inline
إعادة رسم كتير	متغيّرش الـ DOM في loop · استخدم transform بدل top/left

1 <img src="hero.webp" loading="lazy" width="800" height="400"> 2 <script src="app.js" defer></script>

width/height على الصورة بيمنع النطّ (CLS). defer = حمّل من غير ما توقّف الصفحة.

في React تحديدًا

1 // حمّل الصفحة لما تتفتح بس 2 const Admin = lazy(() => import("./Admin")); 3 4 // متعيدش حساب تقيل في كل رسم 5 const total = useMemo(() => calc(items), [items]); 6 7 // متعيدش رسم مكوّن لو props متغيّرتش 8 export default memo(ProductCard);

القاعدة: متحسّنش قبل ما تقيس. 90% من مشاكل أداء React سببها إعادة رسم مكوّنات مش محتاجة. React DevTools → Profiler بيوريك مين بيترسم كتير.

والموقع يشتغل للمكفوفين؟
ويظهر في جوجل؟

21/25→

الوصولية a11y و SEO
موقع الكل يقدر يستخدمه، وجوجل تلاقيه

الوصولية — 15% من الناس

مكفوفين بيستخدموا قارئ شاشة، ناس مش بتقدر تستخدم ماوس، عمى ألوان. الموقع لازم يشتغل ليهم. والخبر الحلو: أغلبها HTML صح.

القاعدة	ليه
وسوم بمعنى (button مش div)	قارئ الشاشة يعرف ده زرار ويتفعّل بالكيبورد
alt على كل صورة	المكفوف يسمع وصفها
label لكل input	يعرف الخانة دي لإيه
تباين ألوان كافي (4.5:1)	ضعاف النظر يقروا
كل حاجة تتعمل بالكيبورد (Tab)	اللي مش بيستخدم ماوس
h1 → h2 → h3 بالترتيب	هيكل مفهوم

تشبيه 🏢

المبنى اللي فيه منحدر للكراسي المتحركة بيفيد كمان الأم بعربية الأطفال وعامل التوصيل. التسهيلات بتفيد الكل.

SEO — جوجل تفهم موقعك

index.html

1 <head> 2 <title>كتب برمجة بالعربي | Mo3ty</title> 3 <meta name="description" content="كتب مبسّطة..."> 4 <meta property="og:image" content="cover.jpg"> 5 </head>

title فريد لكل صفحة — ده اللي بيظهر في نتايج البحث
description — السطرين تحت العنوان
og:image — الصورة لما حد يشارك الرابط على فيسبوك/واتساب
h1 واحد بس في الصفحة
روابط بنص واضح ("اقرأ الكتاب" مش "اضغط هنا")
سرعة الموقع (الصفحة اللي فاتت) — عامل ترتيب

مشكلة React مع SEO: جوجل بتشوف صفحة فاضية لأن المحتوى بيتبني بـ JS. الحل: Next.js (SSR) بيرسم الصفحة على السيرفر الأول.

أدوات مجانية: Lighthouse (فيه تاب Accessibility وSEO) · WAVE extension · axe DevTools · جرّب موقعك بالكيبورد بس — Tab وEnter — لو عرفت تعمل كل حاجة، كويس.

الأدوات اللي هتشتغل بيها كل يوم

22/25→

أدوات الشغل اليومي
DevTools · npm · Git · النشر

DevTools — أهم أداة (F12)

التاب	تستخدمه لـ
Elements	شوف وعدّل HTML/CSS لايف — جرّب قبل ما تكتب
Console	الأخطاء · console.log · جرّب JS
Network	كل طلب للسيرفر: الحجم، الوقت، الرد
Sources	Breakpoints — وقّف الكود وشوف المتغيرات
Application	LocalStorage · Cookies
Lighthouse	الأداء والوصولية وSEO

أول حاجة لما حاجة متشتغلش: افتح Console. 90% من المشاكل مكتوبة هناك بالأحمر مع رقم السطر.

npm + Vite — بداية أي مشروع

Terminal

1 # مشروع جديد 2 npm create vite@latest my-app 3 cd my-app 4 npm install # حمّل المكتبات 5 npm run dev # شغّل localhost:5173 6 npm run build # جهّز للنشر → فولدر dist/

package.json قايمة المكتبات والأوامر

node_modules/ المكتبات نفسها — متحطهاش على Git

Vite بيجمّع ملفاتك ويصغّرها ويشغّل سيرفر تطوير

Git — احفظ كل خطوة

Terminal

1 git init # ابدأ 2 git add . # حضّر الملفات 3 git commit -m "أول نسخة" # احفظ نقطة 4 git push # ارفع على GitHub 5 6 git checkout -b feature # فرع جديد لتجربة 7 git merge feature # ادمجه لما يخلص

تشبيه 🎮

نقاط الحفظ في لعبة: كل commit = نقطة ترجع لها لو بوّظت. والفرع = نسخة تجرّب فيها من غير ما تأثر على الأصل.

النشر — في 5 دقايق مجانًا

الكود على GitHub

←

Vercel / Netlify
يربط بالريبو

←

كل push = نشر تلقائي

←

رابط حي
my-app.vercel.app

Vercel — الأفضل لـ React/Next.js
Netlify — أي موقع ثابت
GitHub Pages — بسيط HTML/CSS/JS
كلهم مجانًا للمشاريع الشخصية + HTTPS تلقائي

نصيحة: انشر من أول يوم حتى لو الموقع صفحة واحدة. الرابط الحي بيحمّسك تكمّل، وبيبقى في الـ CV.

جاهز للمقابلة؟
أشهر الأسئلة وإجاباتها

23/25→

أسئلة مقابلات Frontend
الأسئلة اللي بتتكرر — وإجاباتها في سطرين

HTML / CSS

1. الفرق بين block وinline؟ block بياخد سطر كامل وبيقبل width/height. inline جوه السطر ومبيقبلهمش.

2. Box model؟ content → padding → border → margin. و box-sizing: border-box بيخلّي width شامل.

3. Flexbox ولا Grid؟ Flex لاتجاه واحد (مكوّنات)، Grid لاتنين (تخطيط الصفحة).

4. توسّط عنصر؟ على الأب:

display:flex; justify-content:center; align-items:center

5. Specificity؟ inline > id > class > tag. والأخير يكسب لو متساويين.

6. position: absolute بيتحدد بالنسبة لمين؟ أقرب أب عليه position غير static.

7. Mobile-first يعني إيه؟ CSS الأساسي للموبايل، وmin-width للأكبر.

JavaScript

1. == vs ===؟ الأولى بتحوّل الأنواع، التانية بتقارن النوع والقيمة. استخدم ===.

2. let vs const vs var؟ const مبيتغيّرش، let بيتغيّر، var قديمة ونطاقها غريب.

3. Promise؟ كائن بيمثّل نتيجة هتيجي بعدين. async/await = طريقة أنضف للتعامل معاه.

4. Event Loop؟ JS خيط واحد. الحاجات اللي بتستنّى بتتحط في طابور وبتتنفّذ لما الكود الحالي يخلص.

5. Closure؟ دالة بتفتكر المتغيرات اللي كانت حواليها لما اتعملت، حتى بعد ما الدالة الأم خلصت.

6. this؟ بيعتمد على مين نادى الدالة. Arrow functions مبيبقاش ليها this خاص.

7. Event delegation؟ listener واحد على الأب بدل 100 على الأبناء.

React

1. Virtual DOM؟ نسخة خفيفة من الـ DOM في الذاكرة. React بتقارن القديم بالجديد وتحدّث الفرق بس.

2. props vs state؟ props جاية من الأب ومبتتغيّرش. state داخلية وبتتغيّر بـ setState.

3. ليه key في القوايم؟ عشان React تعرف مين اتغيّر من غير ما تعيد رسم الكل.

4. useEffect بيشتغل إمتى؟ بعد الرسم. والمصفوفة التانية بتحدد يتكرّر إمتى.

5. Prop drilling وحله؟ تمرير props عبر مستويات كتير. الحل: Context أو state manager.

الأسئلة العملية (Live coding)

اعمل عدّاد / قايمة مهام (الصفحات 14 و17)
اعمل debounce لخانة بحث (متبعتش طلب مع كل حرف)
اجلب بيانات من API واعرضها مع loading وerror
اعمل modal يتقفل بـ Escape وبالضغط بره
حوّل تصميم (صورة) لـ HTML/CSS ريسبونسف

النصيحة: فكّر بصوت عالي. المقابِل عايز يشوف إزاي بتفكّر مش بس الإجابة. ولو مش عارف قول "مش متأكد بس هجرّب كده".

خلّصت الكتاب!
الخلاصة والخطوة الجاية

24/25→

مبروك! بقيت Frontend Developer
الخلاصة + خريطة الطريق

الرحلة كلها في رسمة

HTML
الهيكل

←

CSS
Box · Flex · Grid · Responsive

←

JavaScript
DOM · Events · Async

←

React
Components · State · Hooks

←

الأداء والجودة
Performance · a11y · SEO

←

النشر
Git · Vercel

كل مرحلة بتبني على اللي قبلها. اللي بيقفز لـ React من غير JavaScript قوية بيرجع بعد شهرين.

اختبر نفسك ✍️

1. عنصر width: 300px وpadding: 20px وborder: 5px — عرضه الكلي كام؟ (من غير border-box)

2. إزاي تخلّي 3 كروت جنب بعض على الديسكتوب وتحت بعض على الموبايل؟

3. ليه console.log بعد fetch بيتطبع قبل البيانات؟

4. في React غيّرت count = 5 مباشرة والشاشة ما اتغيّرتش. ليه؟

5. إيه الفرق بين textContent وinnerHTML وإمتى كل واحد خطر؟

6. الموقع بطيء — أول حاجة تعملها؟

1) 350px · 2) Grid + media query أو Flex مع wrap · 3) fetch غير متزامن — الكود بيكمّل ومش بيستنّى · 4) لازم setCount عشان React تعرف · 5) innerHTML بيفسّر HTML (خطر XSS مع بيانات المستخدم)، textContent نص بس · 6) قيس بـ Lighthouse — غالبًا الصور

الخطوة الجاية 🗺️

1 ابني 3 مشاريع بـ HTML/CSS/JS بس: صفحة شخصية · آلة حاسبة · تطبيق طقس (API). انشرهم.

2 اتعلم React من الموقع الرسمي react.dev — أحسن مصدر. أعد بناء المشاريع بيه.

3 TypeScript — أسبوع واحد بيفرق في كل حاجة بعده.

4 Next.js + مشروع كامل فيه تسجيل دخول وبيانات من API.

5 GitHub منظّم + موقع شخصي بمشاريعك = الـ CV الحقيقي.

الأهم: Frontend بيتعلم بالعين والإيد. كل صفحة في الكتاب ده — اكتب الكود بتاعها وشوفه في المتصفح. القراءة لوحدها مبتعلّمش CSS.

💾
احفظ الكتاب — مرجع سريع لأي مقابلة.

📤
ابعته لصاحبك اللي عايز يبدأ Frontend.

25/25✓

FRONTEND بالعربيإزاي الموقع بيتبني وبيتحرّك قدام عينك — من الصفر

الكتاب ده لمين؟

هتلاقي جوه:

الفهرس

الأساسيات

CSS

JavaScript

الحديث والمقابلات

إيه اللي بيحصل لما تفتح موقع؟رحلة الصفحة من السيرفر لشاشتك

الرحلة

الـ 3 لغات — مين بيعمل إيه

يعني إيه DOM؟

HTML — هيكل الصفحةالوسوم · الهيكل الأساسي · أول صفحة ليك

شكل الوسم

أول صفحة كاملة

أهلًا بيك 👋

HTML بمعنى Semantic + الفورمالوسوم اللي بتقول "أنا إيه" — وإزاي تاخد بيانات من المستخدم

ليه مش div لكل حاجة؟

الفورم — بوابة البيانات

CSS — شكل الصفحةالمحدد والخاصية والقيمة — وإزاي تربطها بالـ HTML

شكل القاعدة

بتربطها إزاي؟

الـ Cascade — لما قاعدتين يتعارضوا مين يكسب؟

كل حاجة صندوق Box ModelMargin · Border · Padding · Content — أهم فكرة في CSS

الطبقات الأربعة

بالكود

سؤال المقابلة الكلاسيكي: العرض الكلي كام؟

الاختصارات

display — الصندوق بيتصرف إزاي

Flexbox — ترتيب في اتجاه واحدالأداة اللي هتستخدمها في 80% من التنسيق

الأساس

الاتجاه:

التوزيع والمحاذاة

خصائص الأبناء

Grid — شبكة في اتجاهينلما التصميم صفوف وأعمدة مع بعض

الأساس

تخطيط صفحة كامل

الريسبونسف Responsiveموقع واحد يشتغل على كل الشاشات

Media Queries — قواعد حسب الحجم

Mobile-First — ابدأ بالصغير

الحاجات اللي بتنسى — والموقع يبوظ على الموبايل

تحريك العناصر والحركةPosition · Transition · Animation · المتغيرات

position — العنصر يقف فين

Transition — الحركة الناعمة

CSS Variables — غيّر لون الموقع كله من سطر

JavaScript — الصفحة بتتحركالمتغيرات · الأنواع · الدوال — في صفحة واحدة

المتغيرات والأنواع

الدوال — كود بتناديه بالاسم

الشروط والتكرار — زي أي لغة

التعامل مع الصفحة DOMجيب عنصر · غيّره · أضف · امسح

امسك العنصر

غيّره

أضف وامسح

الأحداث Events"لما المستخدم يعمل كذا، نفّذ كذا"

الأساس

مثال كامل: عدّاد

الفورم + منع الافتراضي

الانتظار الذكي Async و fetchإزاي تجيب بيانات من السيرفر من غير ما الصفحة تتجمّد

المشكلة والحل

async / await — نفس الحاجة بس أوضح

إرسال بيانات (POST + JSON)

JavaScript الحديثةDestructuring · Spread · Modules · Array methods — اللي هتشوفها في أي كود

اختصارات هتشوفها في كل مكان

Array methods — بدل الـ for

Modules — قسّم الكود لملفات

LocalStorage — احفظ في المتصفح

مشروع: قايمة مهام كاملةHTML + CSS + JS + LocalStorage — في 40 سطر

مهامي

ليه React؟المشكلة اللي بتحلها الـ Frameworks — والمكوّن (Component)

الفكرة الجوهرية

Component — قطعة ليجو

الموقع كشجرة مكوّنات

الحالة useState و useEffectالـ Hooks الاتنين اللي هتستخدمهم في 90% من الوقت

useState — ذاكرة المكوّن

useEffect — اعمل حاجة بعد الرسم

تدفّق البيانات والنظام البيئيProps down · Events up · Context · Router · الأدوات

القاعدة: البيانات تنزل، الأحداث تطلع

Context — لما الشجرة تطول

النظام البيئي — الحاجات اللي حوالين React

FRONTEND بالعربي
إزاي الموقع بيتبني وبيتحرّك قدام عينك — من الصفر

إيه اللي بيحصل لما تفتح موقع؟
رحلة الصفحة من السيرفر لشاشتك

HTML — هيكل الصفحة
الوسوم · الهيكل الأساسي · أول صفحة ليك

HTML بمعنى Semantic + الفورم
الوسوم اللي بتقول "أنا إيه" — وإزاي تاخد بيانات من المستخدم

CSS — شكل الصفحة
المحدد والخاصية والقيمة — وإزاي تربطها بالـ HTML

كل حاجة صندوق Box Model
Margin · Border · Padding · Content — أهم فكرة في CSS

Flexbox — ترتيب في اتجاه واحد
الأداة اللي هتستخدمها في 80% من التنسيق

Grid — شبكة في اتجاهين
لما التصميم صفوف وأعمدة مع بعض

الريسبونسف Responsive
موقع واحد يشتغل على كل الشاشات

تحريك العناصر والحركة
Position · Transition · Animation · المتغيرات

JavaScript — الصفحة بتتحرك
المتغيرات · الأنواع · الدوال — في صفحة واحدة

التعامل مع الصفحة DOM
جيب عنصر · غيّره · أضف · امسح

الأحداث Events
"لما المستخدم يعمل كذا، نفّذ كذا"

الانتظار الذكي Async و fetch
إزاي تجيب بيانات من السيرفر من غير ما الصفحة تتجمّد

JavaScript الحديثة
Destructuring · Spread · Modules · Array methods — اللي هتشوفها في أي كود

مشروع: قايمة مهام كاملة
HTML + CSS + JS + LocalStorage — في 40 سطر

ليه React؟
المشكلة اللي بتحلها الـ Frameworks — والمكوّن (Component)

الحالة useState و useEffect
الـ Hooks الاتنين اللي هتستخدمهم في 90% من الوقت

تدفّق البيانات والنظام البيئي
Props down · Events up · Context · Router · الأدوات

الأداء Performance
ليه الموقع بطيء وإزاي تقيس وتصلّح

الوصولية a11y و SEO
موقع الكل يقدر يستخدمه، وجوجل تلاقيه

أدوات الشغل اليومي
DevTools · npm · Git · النشر

أسئلة مقابلات Frontend
الأسئلة اللي بتتكرر — وإجاباتها في سطرين

مبروك! بقيت Frontend Developer
الخلاصة + خريطة الطريق