Menu
Coddy logo textTech
ابدأ التعلم
flag Ar iconالعربيةdown icon
html iconجزء من رحلة HTMLشائعرحلة

تعلّم CSS

دورة CSS مجانية وتفاعلية. تنسّق HTML حقيقيًا في كل درس - المُحدِّدات، ونموذج الصندوق، والألوان، والخطوط، وflexbox، وgrid، والتصميم المتجاوب - مع معاينة حيّة أثناء كتابتك وشهادة مجانية عند الانتهاء. وهي جزء من رحلة HTML الأوسع، لذا فإن سياق الترميز الذي يحتاجه CSS موجود هناك مباشرةً.

ابدأ التعلم(مجاني)
عرض المنهجPlayground لـ Styling with CSS

281,604+ من الـ codders مسجلون

119 درسًا104 تحديات583 أسئلة الاختبار

  • مناسب للمبتدئين
  • sparkles iconمساعدة برمجية بالذكاء الاصطناعي
  • hint iconدروس تفاعلية عملية
  • volume On iconتعليق صوتي في كل درس
  • quiz iconاختبارات لقياس معرفتك
  • certificate iconشهادة إتمام مجانية

المنهج

2 أقسام3 مشاريع119 درسًا104 تحديات583 أسئلة الاختبار

هذا القسم جزء من رحلة HTML. المنهج الكامل يحتوي على أقسام أكثر - اضغط على أي معاينة أدناه لعرضها في صفحة الرحلة.

  1. قسم 1Fundamentals60 درسًا
  2. قسم 2

    Styling with CSS

    ابدأ القسمابدأتوسيعطي    Bring your web pages to life with colors, layouts, and styles76 درسًا100 تحديات419 أسئلة3 مشاريع

    مقدمة

    5 درسًا540

    إضافة CSS

    4 درسًا725

    المحددات الأساسية

    7 درسًا1247

    أساسيات النصوص

    8 درسًا1450

    الألوان والخلفيات

    5 درسًا834

    قائمة المقهى

    مشروع3 درسًا1

    نموذج الصندوق - الجزء الأول

    6 درسًا943

    نموذج الصندوق (Box Model) - الجزء الثاني

    5 درسًا834

    Flex Box

    6 درسًا943

    نموذج تسجيل الدخول

    مشروع4 درسًا1

    تقنيات التخطيط

    7 درسًا1151

    أساسيات التصميم المتجاوب

    6 درسًا1052

    صفحة ويب تونغا

    مشروع6 درسًا1

    التحديات النهائية

    4 درسًا4
  3. قسم 3

    CSS Mastery

    ابدأ القسمابدأتوسيعطي    Take you css skills to the next level!43 درسًا40 تحديات164 أسئلة

    إتقان المحددات – الربط

    6 درسًا539

    الفئات الزائفة التفاعلية

    5 درسًا431

    الأصناف الزائفة الهيكلية (Structural pseudo-classes)

    5 درسًا432

    مشروع القائمة المنسدلة

    4 درسًا4

    التأثيرات البصرية

    5 درسًا536

    صفحة الهبوط (Landing Page)

    5 درسًا5

    البناء باستخدام CSS Grid

    4 درسًا426

    موقع Flavor Fiesta

    4 درسًا4

    التحديات النهائية

    5 درسًا5
  4. قسم 4Practical Frontend35 درسًا
  5. قسم 5JavaScript in Action27 درسًا
عرض منهج رحلة HTML كاملاً
ما الذي تحصل عليه
كل ما ستستخدمه لتتعلّم البرمجة

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

لماذا تتعلّم CSS مع Coddy

  • اكتب CSS في متصفحك وشاهد الصفحة تُعاد تنسيقها مباشرةً. لا خطوة بناء، ولا إعداد محرّر. يظهر كل تغيير على مُحدِّد أو خاصية فورًا لترى ما الذي تفعله كل قاعدة فعليًا.
  • أساسيات CSS: المُحدِّدات والأولوية، ونموذج الصندوق، والتموضع، وflexbox، وCSS grid، والانتقالات، واستعلامات الوسائط، والتصميم المتجاوب. وهي مهارات CSS التي يحتاجها كل مطوّر واجهات أمامية يوميًا.
  • تساعدك تلميحات الذكاء الاصطناعي على تصحيح الأمور التي تُربك الجميع دائمًا - مفاجآت الأولوية، وتجاوزات التخطيط، وسلوك flexbox الغريب - دون أن تُفسد عليك الحل، لتصبح CSS بديهية بدلًا من أن تبدو سحرًا.
  • شهادة CSS مجانية عند إنهائك القسم. تتكامل طبيعيًا مع دورتَي HTML وJavaScript لتكوّن أساسًا متكاملًا في الواجهات الأمامية.

أسئلة شائعة حول تعلّم CSS

ما هي CSS؟

CSS (أوراق الأنماط المتتالية) هي اللغة التي تتحكّم في شكل صفحات HTML - الألوان، والخطوط، والتباعد، والتخطيط، والحركات، والسلوك المتجاوب عبر أحجام الشاشات المختلفة. يحدّد HTML ما يوجد على الصفحة؛ وتحدّد CSS كيفية عرضه.

هل تعلّم CSS صعب؟

أساسيات CSS - المُحدِّدات، والألوان، والخطوط، ونموذج الصندوق - سهلة الاستيعاب في غضون ساعات قليلة. أما الأجزاء الأصعب فتأتي لاحقًا: قواعد الأولوية، وتخطيطات flexbox وgrid، وجعل الأمور تبدو صحيحة على كل حجم شاشة. تقدّم الدورة هذه الأجزاء عبر خطوات صغيرة مع معاينة حيّة، لترى بالضبط ما الذي تفعله كل قاعدة.

هل ينبغي أن أتعلّم HTML قبل CSS؟

نعم. يحدّد HTML بنية الصفحة؛ وتنسّقها CSS. فمن دون HTML لن يكون لديك ما تنسّقه. ولهذا السبب يُعدّ قسم CSS هذا جزءًا من رحلة HTML - يأتي قسم أساسيات HTML أولًا، ثم تقضي الجزء الأكبر من الرحلة في تنسيقه.

ما الفرق بين CSS وFlexbox وGrid؟

Flexbox وGrid هما وحدتا تخطيط داخل CSS - فهما ليستا تقنيتين منفصلتين، بل ميزتان من ميزات CSS. يُعدّ Flexbox الأفضل للتخطيطات أحادية البُعد (صفّ من البطاقات، شريط تنقّل). ويُعدّ Grid الأفضل للتخطيطات ثنائية البُعد (صفحة كاملة، تخطيط بطاقات معقّد). وتستخدم معظم المواقع الحقيقية كليهما، وتغطّي الدورة متى تلجأ إلى كلٍّ منهما.

هل يمكنني تعلّم CSS عبر الإنترنت مجانًا؟

نعم. قسم CSS التفاعلي مجاني - دروس كاملة، وتمارين برمجية، ومعاينة حيّة، وشهادة. يعمل كل شيء في المتصفح، لذا لا حاجة لتثبيت أي محرّر أو أدوات للبدء.

هل أحصل على شهادة بعد دورة CSS؟

نعم. إنهاؤك قسم CSS يمنحك شهادة إتمام مجانية. وهي دليل قابل للتحقّق يمكنك إضافته إلى سيرتك الذاتية أو مشاركته على LinkedIn إلى جانب شهادتَي HTML وJavaScript كجزء من معرض أعمالك في الواجهات الأمامية.
Coddy programming languages illustration

Learn Styling with CSS with Coddy

ابدأ الآن