Skip to content
Badr Academy Education
العربية
Log in Create account
Badr Academy Education

Browse by topic

ProgrammingAI & DataDigital marketing & SEORoboticsFoundational & Soft SkillsBusiness & FinanceTech Infrastructure & SecurityDesign & UX

Programming

HTML و CSS

HTML & CSS

ابنِ صفحات ويب حقيقية من الصفر: هيكل HTML دلالي ومتاح للجميع، وتنسيق CSS حديث بالـ Flexbox والـ Grid، وصفحات تعمل بالعربية والإنجليزية وعلى الموبايل.

Build real web pages from scratch: semantic, accessible HTML and modern CSS with Flexbox and Grid, bilingual (RTL/LTR) and mobile-ready.

  • Eng. Abdelmaksoud Badr
  • No reviews yet
  • BeginnerNo prior experience needed
  • 30 hTotal content time
  • In ArabicWith technical terms in English

About this course

تبدأ الدورة بفهم كيف يعمل الويب، ثم تبني الهيكل بالـ HTML الدلالي، ثم التنسيق والتخطيط بالـ CSS، مع اهتمام خاص بالصفحات العربية (اتجاه من اليمين لليسار) وإتاحة المحتوى لذوي الإعاقة. تنتهي بنشر موقع شخصي من صفحتين.

Estimated duration: 30 hours (8 modules, 28 lessons + capstone)

تفاصيل الكورس (بالإنجليزية)

What you will learn

  • Explain how a browser requests and renders a page, and use developer tools to inspect HTML and CSS
  • Write a valid HTML document with correct structure, lang/dir, metadata, text, lists and links
  • Use semantic elements, images with meaningful alt text, tables for data and media elements appropriately
  • Build accessible forms with labels, input types and built-in validation
  • Apply CSS with selectors, the cascade and specificity, colours, units and typography (incl. Arabic web fonts)
  • Control the box model, sizing, spacing, backgrounds and overflow
  • Lay out pages with Flexbox and Grid and make them responsive with mobile-first media queries
  • Write direction-agnostic CSS with logical properties and custom properties, debug, validate and publish a site

Who it is for: beginners who want to build web pages; future front-end, WordPress or UX learners

Prerequisites: none; typing and file/folder basics

محتوى من إعداد أكاديمية بدر. / Academy-authored content.

Build real web pages from scratch: semantic, accessible HTML and modern CSS with Flexbox and Grid, bilingual (RTL/LTR) and mobile-ready.

What you will learn

  • Explain how a browser requests and renders a page, and use developer tools to inspect HTML and CSS
  • Write a valid HTML document with correct structure, lang/dir, metadata, text, lists and links
  • Use semantic elements, images with meaningful alt text, tables for data and media elements appropriately
  • Build accessible forms with labels, input types and built-in validation
  • Apply CSS with selectors, the cascade and specificity, colours, units and typography (incl. Arabic web fonts)
  • Control the box model, sizing, spacing, backgrounds and overflow
  • Lay out pages with Flexbox and Grid and make them responsive with mobile-first media queries
  • Write direction-agnostic CSS with logical properties and custom properties, debug, validate and publish a site

Who it is for: beginners who want to build web pages; future front-end, WordPress or UX learners

Prerequisites: none; typing and file/folder basics

Academy-authored content.

The practical result

What you’ll build

ابنِ صفحات ويب حقيقية من الصفر: هيكل HTML دلالي ومتاح للجميع، وتنسيق CSS حديث بالـ Flexbox والـ Grid، وصفحات تعمل بالعربية والإنجليزية وعلى الموبايل.

Final lesson: 8.3 النشر

Course content

The whole outline is shown here with the length of each session; sessions open once you have the course and it is activated in your account.

  • 9units
  • 28sessions
M1 — كيف يعمل الويب3 sessions
  1. 1.1 العميل والخادم Introduction video coming soon
  2. 1.2 المحرر والملفات
  3. 1.3 أدوات المطور
M2 — هيكل HTML4 sessions
  1. 2.1 العناصر والوسوم والخصائص
  2. 2.2 هيكل المستند
  3. 2.3 العناوين والفقرات والقوائم
  4. 2.4 الروابط والمسارات
M3 — HTML الدلالي والوسائط4 sessions
  1. 3.1 عناصر التخطيط الدلالية
  2. 3.2 الصور
  3. 3.3 الجداول
  4. 3.4 الصوت والفيديو
M4 — النماذج والإتاحة3 sessions
  1. 4.1 عناصر النموذج
  2. 4.2 أنواع الحقول والتحقق المدمج
  3. 4.3 أساسيات الإتاحة
M5 — أساسيات CSS4 sessions
  1. 5.1 الربط والصيغة
  2. 5.2 المحددات والتتالي والخصوصية
  3. 5.3 الألوان والوحدات
  4. 5.4 النصوص والخطوط العربية
M6 — نموذج الصندوق3 sessions
  1. 6.1 نموذج الصندوق
  2. 6.2 الهوامش والحشو والحدود
  3. 6.3 الخلفيات و overflow و display
M7 — التخطيط4 sessions
  1. 7.1 Flexbox
  2. 7.2 Grid
  3. 7.3 position
  4. 7.4 التصميم المتجاوب
M8 — الجودة والنشر3 sessions
  1. 8.1 الخصائص المنطقية والمتغيرات
  2. 8.2 التحقق وتصحيح الأخطاء
  3. 8.3 النشر
المشاريع والواجبات / Projects and assignments0 sessions
  1. A1 — «صفحة نادي المدرسة»
  2. A2 — «بطاقات الدورات»
  3. Capstone — «موقعي الشخصي ثنائي اللغة»

The lecturer

Lecturer

Eng. Abdelmaksoud Badr

  • 72 published courses at the academy
Profile

Ratings and reviews

No ratings yet – be the first to rate.

No written reviews yet

Written reviews come from enrolled students after studying. We don’t display reviews that real students didn’t write.

Discussion (0)

Commenting is for signed-in members. Comments from people not enrolled in the course are reviewed by the lecturer or the academy before they appear.

No comments yet – be the first to join in.

Your next step

This course is part of the trackProgrammingFrom your first line of code to a project you build yourself. 20 courses

Courses close to this one

Programming

Microsoft SQL Server

العمل مع SQL Server ولغة T-SQL: الإصدارات والأدوات وقواعد البيانات، الأنواع و NVARCHAR والترتيب العربي، الاستعلام وخصائص T-SQL، الإجراءات المخزنة والدوال ومعالجة…

  • Intermediate
  • 30 h
  • Taught in Arabic · all content in Arabic
Eng. Abdelmaksoud
Coming soon – learn more
Programming

React

ابنِ واجهات من مكونات: JSX والخصائص والقوائم، الحالة والأحداث، إدارة الحالة بالرفع و useReducer و Context، المؤثرات والمراجع والـ hooks المخصصة، جلب…

  • Intermediate
  • 36 h
  • Taught in Arabic · all content in Arabic
Eng. Abdelmaksoud
Coming soon – learn more
Programming

PostgreSQL

PostgreSQL عمليًا: التثبيت و psql والمخططات، الأنواع الغنية (هوية، نصوص، تواريخ بمناطق زمنية، JSONB، مصفوفات، ENUM)، الاستعلام المتقدم والعودة بالنتائج والإدراج مع…

  • Intermediate
  • 30 h
  • Taught in Arabic · all content in Arabic
Eng. Abdelmaksoud
Coming soon – learn more
Programming

Laravel

بناء تطبيقات ويب كاملة بإطار Laravel: التوجيه والمتحكمات وقوالب Blade، الترحيلات و Eloquent والعلاقات، النماذج والتحقق والحماية، المصادقة والصلاحيات، واجهات API مع…

  • Intermediate
  • 36 h
  • Taught in Arabic · all content in Arabic
Eng. Abdelmaksoud
Coming soon – learn more
Programming

أساسيات SQL

SQL Fundamentals

لغة الاستعلام عن قواعد البيانات: الجداول والمفاتيح، SELECT والتصفية والترتيب، القيم الفارغة، التجميع و GROUP BY و HAVING، الربط بين الجداول، الاستعلامات…

  • Beginner
  • 28 h
  • Taught in Arabic · all content in Arabic
Eng. Abdelmaksoud
Coming soon – learn more
Programming

البرمجة بلغة Python

Python Programming

تعلّم البرمجة من الصفر بلغة Python: المتغيرات والقرارات والتكرار والقوائم والدوال والملفات، وصولًا إلى مشروع تطبيقي كامل.

  • Beginner
  • 36 h
  • Taught in Arabic · all content in Arabic
Eng. Abdelmaksoud
Coming soon – learn more
Programming

البرمجة بلغة PHP

PHP Programming

برمجة الخادم بلغة PHP: المتغيرات والأنواع والنصوص، الشروط و match والحلقات والدوال، المصفوفات و JSON، النماذج والتحقق والهروب من HTML والجلسات، البرمجة…

  • Beginner
  • 34 h
  • Taught in Arabic · all content in Arabic
Eng. Abdelmaksoud
Coming soon – learn more
Programming

MySQL

العمل مع MySQL عمليًا: التثبيت والأدوات والاتصال، الأنواع وترميز utf8mb4 للعربية ومحرك InnoDB، الاستعلام والتعديل بخصائص MySQL، الفهارس و EXPLAIN، المستخدمون والصلاحيات…

  • Beginner
  • 28 h
  • Taught in Arabic · all content in Arabic
Eng. Abdelmaksoud
Coming soon – learn more