css interview questions and answers

لو عاوز تقول حاجة

1What is W3C ?

W3C هي اختصار لــ World Wide Web Consortium وهي باختصار المُنظمة المسئولة عن تنظيم وتحديد المعايير الخاصة بالويب وهي أيضا المُنظمة المسئولة عن تحديث وتطوير لغة ال CSS و ال html والموقع الرسمي هو:w3.org

2What is CSS ?

- CSS تقوم بعمل تنسيق (style) لعناصر ال html
- وهي المسئول الأساسي لجعل صفحة الويب accessible لجميع الزوار
⚠تم شرح هذا الجزء فيالفيديو رقم 1من الكورس

3what do you know about web accessibility ?

Accessibility ترجمتها إمكانية الوصول وتعني ان تجعل جميع الزوار يمكنهم الوصل الى الموقع بدون أي مشاكل. ومعنى جميع الزوار يعنى توقع ان زائر الموقع يكون:

• Aيتصفح الموقع من الكمبيوتر الشخصي او الموبايل (جميع احجام الشاشات)
• Bشخص يستخدم الكيبورد فقط وذلك لسببين :
  • مفكر نفسه كده هيكون هاكر يعنى😂 او بيتعود انه يكتب بسرعة على الكيبورد
  • لأنه يعاني من الام المفاصل في اليد
• Cشخص لديه عمى ألوان
• Dشخص لديه مشكلة في النظر وبالتالي بيعمل zoom 400% مثلا اثناء تصفح الموقع
• Eشخص لديه عمى كلى او جزئي وبالتالي يستخدم screen reader حتى يتمكن من التعامل مع المواقع الالكترونية. واكيد انت مستغرب من الجزء دا. صح؟؟ مش مقتنع صح؟ طب اتفرج كده علىالفيديو ده

4What is the next version of css3 ?

Css3 هو اخر اصدار من اللغة ولن يكون هناك css4 لان بعد الإصدار الثاني انقسمت الىمواضيع منفصلةعشان مش كل شوية ينزل اصدار جديد ويقرفونا احنا 😂

يعنى مثلا في موضوع اسمه Media Queries في ال CSS الموضوع ده بس نزل له 5 تحديثات وبالتالي الجزء ده اصبح Media Queries Level 5 .. هل معنى كده ان كده ال css2 أصبحت css5 ؟.. لأ طبعاالمصدر

5What are the different ways to use CSS ?
How can you integrate CSS on a web page ?

يوجد 3طرق لكتابة اكواد css

• Aنكتب الاكواد داخل عنصر ال style وهذا العنصر يكون داخل ال head كما شرحنا سابقاً
• Bنكتب الاكواد في ملف خارجي ونربط هذا الملف الخارجي بملف ال html عن طريق عنصر link وهذا العنصر يكون داخل ال head كما شرحنا سابقاً
• Cنكتب الاكواد داخل attribute يُسمى style لعناصر ال html كما شرحنا سابقاً

6what is the difference between foreground and background color?

Foreground color هو اللون الامامي وهو لون الخط
background color هو اللون الخلفي وهو لون الخلفية

7what is the difference between box model and box sizing?

- أولا box sizing هو كود من اكواد ال CSS بينما الــــــــ box model ليس كود أصلا🤓
- ثانيا ال box model هو مصطلح يشير الي ان كل عنصر من عناصر ال html عبارة عن صندوق (box) و ال CSS هي التي تتحكم في حجم هذا الصندوق ومكانة بالنسبة للعناصر الأخرى وذلك عن طريق الاكواد الأتية

Width – height – border – padding - margin

والكود الخاص بال box sizing يستخدم لحل مشكلة كبيرة جدا خاصة بالــــــ box model
وتم شرح هذه المشكلة فيهذا الفيديو

8What is the difference between padding and margin ?

- اولاً ال padding و ال margin من خواص الbox model
- ثانياً
الـــــ padding مسافة داخلية (داخل حدود عنصر ال html )
الـــــ margin مسافة خارجية (خارج حدود عنصر ال html )

9difference between block, inline and inline-block ?

- أولا هؤلاء القيم الخاصة ب خاصية ال display
وهناتجد الإجابة بالتفصيل

10What are the differences between relative and absolute in CSS ?

- الفرق الأساسي هو ان العنصر ال relative يتحرك بالنسبة لمكانة الأصلي
- بينما العنصر ال absolute يتحرك بالنسبة لأقرب عنصر اب يحتوي على قيمة لل position

11Should I use float in CSS ?

يُفضل استخدام خاصية ال float في حالتين فقط
1- لتحريك العنصر أقصى اليمين او أقصى اليسار
2- لوضع مُحتوي نصي بجوار عنصر معين مثل الصور

12What is the difference between class selectors and id selectors ?

ستجد الاجابة بالتفصيل فيهذا الدرس

13Flexbox vs Grid Which Should You Use and When?

- أولا يجب معرفة ان ال flexbox يُمكننا من التحكم في العناصر في اتجاه واحد فقط اما رأسياً على محور ال Y او افقيا على محور ال X
بينما الـــ CSS Grid يُمكننا من التحكم في العنصر في الاتجاهين في نفس الوقت الاتجاه الراسي والاتجاه الافقي

- ثانيا انا معرفش تستخدم مين امته😂لان ببساطة انت الذي تقرر بناءاً على التصميم الموجود

14How to center an image horizontally and vertically ?

يمكننا توسيط الصورة افقياً عن طريق الاكواد التالية:
img { display: block;
      margin-left: auto;
      margin-right: auto; }

يمكننا توسيط الصورة افقياً ورأسياً باستخدام ال flexbox او ال grid وذلك عن طريق إضافة الاكواد التالية للعنصر الاب :

- باستخدام الــ flexbox نستخدم الاكواد التالية:

.parent {
  display: flex;
  /* توسيط العنصر افقيا */
  justify-content: center;
  /* توسيط العنصر رأسياً */
  align-items: center;
}

- باستخدام الــ grid نستخدم الاكواد التالية:

.parent {
  display: grid;
  /* توسيط العنصر افقيا */
  justify-content: center;
  /* توسيط العنصر رأسياً */
  align-items: center;
}

15What is RWD?

هي اختصار لـــ Responsive Web Design وتعني عرض الموقع علي جميع احجام الشاشات بدون مشاكل

16How to reset all default styles of button element using only one code?

بإستخدام هذا الكودbutton {all: unset;}وأيضا هذا الكود يُستخدم ل إعادة تعيين جميع خصائص عناصر ال html (resets all of an element’s properties)

17Explain the difference between visibility: hidden and display: none?

الإجابة علي هذا السؤال تحتاج الي شرح عملي اكثر من النظري🤓لذلك ستجد الإجابة في فيهذا الفيديوفي الدقيقة 13

18Define "!important" declarations used in CSS.

Declarations ترجمتها تصريح او اعلان ومعني declaration انها تُخبر المتصفح بشيء ما مثل
<!DOCTYPE html> في ال html فهي تعتبر أيضا declaration وتخبر المتصفح ان الاكواد التالية هي اكواد لغة html
بينما !important فهي تخبر المتصفح ان هذا الكود هو الأكثر أهمية
مثال علي ذلك:
الأكواد التالية:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
          h1 {color: red;}
          h1 {color: green;}
    </style>
  </head>

  <body>
    <h1>Courses 4 Arab</h1>
  </body>
</html>

تعني ان العنصر h1 سيكون لونه اخضر green
ولكن إذا كانت الاكواد هكذا

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
          h1 {color: red !important;}
          h1 {color: green;}
    </style>
  </head>

  <body>
    <h1>Courses 4 Arab</h1>
  </body>
</html>

سيكون لونه احمر red

⚠وغالبا ما يستخدم هذا الـــــ important! كثيرا في حالة اذا كان لدينا اكثر من قيمة لل class وسيتم شرحها في الفيديو الخاص بهذا الدرس

19what do you know about CSS Image sprites and CSS lazy load? [Advanced]

تم شرح الـــ CSS sprites بالتفصيل فيهذا الدرس
تم شرح الـــ CSS lazy load بالتفصيل فيهذا الدرس