CSS - 14 CSS Positions [Arabic] | CSS المواضع في الـ

CSS - 14 CSS Positions [Arabic] | CSS المواضع في الـ

Arabic:
1. المواضع في CSS:
- يمكن تحديد مواضع العناصر في CSS باستخدام خصائص المواضع.
- بعض خصائص المواضع تشمل:
- `position: static;`: الموضع الافتراضي وهو لا يتغير عن الموضع الأصلي.
- `position: relative;`: يتحرك العنصر بالنسبة لموضعه الأصلي، ويمكن استخدام `top` و `left` وغيرها لتحديد الموضع.
- `position: absolute;`: يتحرك العنصر بالنسبة لأول عنصر قائم (أو موضع الأب القريب) غير `static`.
- `position: fixed;`: يثبت العنصر بالنسبة لنافذة المتصفح ولا يتحرك مع التمرير.
- `position: sticky;`: يتحرك العنصر بالنسبة لموضعه الأصلي، ولكن عندما يصل إلى حافة الشاشة يثبت في المكان.

2. استخدامات خصائص المواضع:
- `position: static;` يستخدم للمواضع الافتراضية والتي لا تحتاج إلى تعديل.
- `position: relative;` يمكن استخدامه لتعديل المواضع بالنسبة للموضع الأصلي للعنصر.
- `position: absolute;` يمكن استخدامه لتحديد موضع العنصر بالنسبة لأول عنصر قائم.
- `position: fixed;` يستخدم لتثبيت العنصر في مكانه عند التمرير في الصفحة.
- `position: sticky;` يمكن استخدامه لتثبيت العنصر في الموضع عندما يمر بالمكان المحدد.

English:
1. CSS Positions:
- Element positions in CSS can be defined using position properties.
- Some position properties include:
- `position: static;`: The default position, it does not change from the original position.
- `position: relative;`: The element moves relative to its original position, and `top`, `left`, etc. can be used to define the position.
- `position: absolute;`: The element moves relative to the first positioned (not `static`) parent element.
- `position: fixed;`: The element is fixed to the browser window and does not move with scrolling.
- `position: sticky;`: The element moves relative to its original position until it reaches a specified point, then it sticks in place.

2. Uses of Position Properties:
- `position: static;` is used for default positions that do not need adjustment.
- `position: relative;` can be used to adjust positions relative to the original position of the element.
- `position: absolute;` can be used to position an element relative to its closest positioned ancestor.
- `position: fixed;` is used to fix an element in place when scrolling on the page.
- `position: sticky;` can be used to make an element stick in a specific position when scrolling.

-------------------------------------------------------------------------------------------------
ترحيباً بكم في مقدمة دورتنا لتطوير الويب باللغة العربية! في هذا الفيديو، نتحدث عن أهم التقنيات من استطلاع StackOverFlow 2024، مما يمهّد الطريق لرحلتكم في عالم البرمجة. سنغطي محتوى الدورة، مع التركيز على HTML، CSS، وJavaScript. انضموا إلينا لتتعلموا كيفية بناء مواقع ويب رائعة وتطبيقات ويب ديناميكية.

Welcome to the introduction of our Web Development course in Arabic! In this video, we discuss the most popular technologies from the StackOverFlow 2024 survey, setting the foundation for your programming journey. We'll cover the course content, focusing on HTML, CSS, and JavaScript. Join us to learn how to build stunning websites and dynamic web applications.

Course Content (English):

Introduction to Web Development

Overview of web development
Basics of HTML, CSS, and JavaScript
Setting up development environment

HTML Fundamentals

Structure of HTML documents
Tags and attributes
Creating forms and tables

CSS Styling

CSS syntax and selectors
Working with colors, backgrounds, and borders
Flexbox and Grid layout

JavaScript Basics

Variables, data types, and operators
Functions and control structures
DOM manipulation and events

Responsive Web Design

Media queries
Designing for different screen sizes
Mobile-first approach

Project: Personal Portfolio

Apply HTML, CSS, and JavaScript
Build a responsive portfolio website
Showcase your projects and skills

Advanced CSS

CSS preprocessors (Sass)
Animations and transitions
CSS frameworks (Bootstrap)

مقدمة في تطوير الويب

نظرة عامة على تطوير الويب
أساسيات HTML، CSS، وJavaScript
إعداد بيئة التطوير

أساسيات HTML

هيكل مستندات HTML
العلامات والسمات
إنشاء نماذج وجداول

تنسيق CSS

بناء جملة CSS واختيار العناصر
العمل مع الألوان والخلفيات والحدود
نموذج Flexbox والتخطيط الشبكي

JavaScript الأساسيات

المتغيرات وأنواع البيانات والعمليات
الدوال والهياكل التحكمية
التلاعب بـ DOM والأحداث

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

استعلامات الوسائط
التصميم لأحجام شاشات مختلفة
نهج التصميم للأجهزة المحمولة أولاً

مشروع: السيرة الذاتية الشخصية

تطبيق HTML، CSS، وJavaScript
بناء موقع ويب للسيرة الذاتية يستجيب للشاشات
عرض مشاريعك ومهاراتك

CSS المتقدمة

معالجات CSS (Sass)
الرسوم المتحركة والانتقالات
أطر CSS (Bootstrap)

Видео CSS - 14 CSS Positions [Arabic] | CSS المواضع في الـ канала Ghaiath Al trabulsi غياث الطرابلسي