css interview questions and answers

1 What is W3C ?

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

2 What is CSS ?

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

3 what do you know about web accessibility ?

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

4 What is the next version of css3 ?

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

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

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

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

6 what is the difference between foreground and background color?

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

7 what 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
وتم شرح هذه المشكلة في هذا الفيديو

8 What is the difference between padding and margin ?

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

9 difference between block, inline and inline-block ?

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

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

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

11 Should I use float in CSS ?

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

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

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

13 Flexbox vs Grid Which Should You Use and When?

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

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

14 How 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;
}

15 What is RWD?

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

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

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

- يجب ان يكون هذا الكود هو اول كود كالتالي:

 
button {
  all: unset;
 
  border-radius: 12px;
  padding: 10px 15px;
  cursor: pointer;
  background-color: goldenrod;
  font-size: 25px;
 }

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

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

18 Define "!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 وسيتم شرحها في الفيديو الخاص بهذا الدرس

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

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

😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك