تخطَّ إلى المحتوى
شعار بصمة
كل المسارات

CSS من الصفر

1.2 ساعةمبتدئ62 درسًاWebمجاني

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

ابدأ المسار

البداية

0 / 56 دقيقة
  1. يعني إيه CSS؟ وأول سطر تنسيقمعاينة مجانية
    1:15
  2. شكل القاعدة: سلكتور وخاصية وقيمة
    1:14
  3. تلات طرق تكتب بيها CSS
    1:20
  4. السلكتورز: العنصر والـ class والـ id
    1:03
  5. التعليقات وترتيب القواعد
    1:04

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

0 / 56 دقيقة
  1. الألوان: الأسماء والـ hex
    1:13
  2. rgb والألوان الشفافة
    1:05
  3. hsl: أسهل طريقة لدرجات اللون
    1:17
  4. الخلفيات: لون وصورة
    1:03
  5. التدرجات: linear و radial
    1:06

الوحدات

0 / 33 دقيقة
  1. الوحدات: px و %
    0:51
  2. em و rem
    1:19
  3. vw و vh: وحدات الشاشة
    1:03

النصوص

0 / 55 دقيقة
  1. الخطوط العربي: font-family
    1:17
  2. حجم الخط وتقله وميله
    0:55
  3. محاذاة الكلام والخطوط
    1:06
  4. المسافات بين السطور والحروف
    1:11
  5. تحويل الحروف وظل الكلام
    0:59

Box Model

0 / 1011 دقيقة
  1. الـ Box Model: كل حاجة صندوق
    1:26
  2. الـ padding: المسافة جوه الصندوق
    0:59
  3. الـ margin: المسافة بين الصناديق
    1:06
  4. توسيط الصندوق بـ margin auto
    0:59
  5. البراويز: border
    1:01
  6. الزوايا المدورة: border-radius
    1:00
  7. box-sizing: العرض اللي كتبته هو العرض
    1:12
  8. أقل وأكبر عرض وطول
    1:01
  9. لما المحتوى يطلع بره: overflow
    0:55
  10. الظلال: box-shadow
    1:15

السلكتورز

0 / 89 دقيقة
  1. تجميع السلكتورز والسلكتور جوه سلكتور
    0:53
  2. الابن المباشر والإخوات: > و + و ~
    0:57
  3. حالات العنصر: hover و focus و active
    1:21
  4. حسب الترتيب: first و last و nth-child
    0:54
  5. زينة من غير HTML: ::before و ::after
    1:20
  6. الاختيار حسب الـ attribute
    1:08
  7. مين يكسب؟ الـ Specificity
    1:16
  8. الوراثة: الأبناء بياخدوا من الأب
    1:03

Display و Position

0 / 44 دقيقة
  1. display: block و inline و inline-block و none
    1:04
  2. position: relative و absolute
    0:59
  3. position: fixed و sticky
    1:11
  4. مين فوق مين؟ z-index
    0:58

Flexbox

0 / 66 دقيقة
  1. Flexbox: أول مرة
    1:09
  2. justify-content: التوزيع على المحور الرئيسي
    0:52
  3. align-items: المحور التاني والتوسيط الكامل
    0:54
  4. الاتجاه والنزول لسطر جديد
    0:52
  5. flex-grow و flex-basis: مين ياخد المساحة
    1:02
  6. مشروع: هيدر كامل بالـ Flexbox
    1:24

Grid

0 / 55 دقيقة
  1. Grid: صفوف وأعمدة
    0:58
  2. repeat و minmax: شبكة بتتظبط لوحدها
    1:06
  3. grid-template-areas: ارسم التصميم بالكلام
    1:10
  4. span: عنصر ممتد على كذا خانة
    0:44
  5. مشروع: معرض صور بالـ Grid
    1:09

Responsive

0 / 34 دقيقة
  1. يعني إيه Responsive؟
    1:21
  2. Media Queries: تنسيق حسب مقاس الشاشة
    1:10
  3. Mobile First: ابدأ بالموبايل
    1:10

الحركة

0 / 34 دقيقة
  1. Transitions: التغيير الناعم
    1:10
  2. Transform: حرّك وكبّر ولف
    1:06
  3. Animations: الحركة بالـ keyframes
    1:37

متقدم

0 / 22 دقيقة
  1. متغيرات الـ CSS
    1:09
  2. الوضع الليلي
    1:04

المشروع النهائي

0 / 35 دقيقة
  1. المشروع: الأساس والهيدر
    1:49
  2. المشروع: الأقسام والمهارات والفورم
    2:12
  3. المشروع: الموبايل والوضع الليلي والختام
    1:13