🌐
تطوير ويب من المبتدئ للمحترف شهادة معتمدة

تطوير الواجهات الأمامية — Frontend Web

تعلّم HTML, CSS و Bootstrap بالتفصيل لبناء واجهات ويب احترافية.

15
مستوى دراسي
71
موضوع تفصيلي
120
ساعة تدريب
✓
شهادة معتمدة

🎬 دروس مجانية للاطلاع

⚠️ المحتوى مسجّل ضمن حقوق الملكية — أي مشاركة أو تحميل دون إذن خطي يعرّضك للمساءلة القانونية.

103 - Create The HTML Form — الدرس الثالث
111 - Shorthand Border Property — الدرس الحادي عشر

📚 المحتوى التفصيلي

دورة شاملة في تطوير الواجهات الأمامية للويب — 15 مستوى تغطي HTML5 من الصفر، CSS3 المتقدمة، Bootstrap 5، الـ Forms والـ Tables والـ Multimedia. مدعومة بدروس JavaScript عملية وتنتهي بمقابلة ومشروع تخرج.

html-101
HTML & CSS 101 — الأساسيات
  • Intro و تنزيل المحرّر
  • أول صفحة (شرح مفصّل)
  • Hyperlinks + الصور
  • Headings / Paragraphs / Styles
  • Text Formatting / Quotation / Comments
  • HTML Colors
  • HTML Links (parts 1-2) + Buttons + Bookmarks
  • Images + Floating + Maps (react/circle/poly)
  • Background Images + picture Element
html-102
HTML & CSS 102 + JS 102
  • HTML Tables (Borders / Padding / Spans / Caption)
  • Lists (Unordered / Ordered / Control Counting)
  • Block & Inline Elements + div/span
  • class & id Attributes (مع JavaScript)
  • HTML iframes
  • Layout Elements
html-103
HTML & CSS 103 — Forms
  • HTML Forms
  • Text Fields + Label Element
  • Radio Buttons + Checkboxes
  • Submit Button + Post/Get + File Handler
  • Form Attributes (Action/Target/Method)
  • Autocomplete / Required / Novalidate
html-104
HTML & CSS 104 + JS 104 — Multimedia
  • HTML Multimedia
  • HTML Video (autoplay/muted)
  • HTML Audio
  • JavaScript play/pause مع الصوت والفيديو
  • إدراج محتوى من Facebook/YouTube/Twitter
html-105
HTML 105 — المرجع و HTTP
  • Language & Country Codes Reference
  • HTTP Status Messages (1xx-5xx)
  • ما هو الـ Server وعمله
  • HTML Error Messages بالتفصيل
css-101
CSS 101 — مقدمة + Selectors
  • What is CSS و لماذا CSS
  • CSS Syntax
  • Selectors (Element / ID / Class / Universal / Grouping)
css-102
CSS 102 — الإدراج + الألوان
  • External / Internal / Inline CSS
  • Multiple Stylesheets
  • Comments
  • Colors: Names / RGB / RGBA / HEX (full + 3-digit) / HSL / HSLA
  • كيفية الحصول على قيم الألوان
css-103
CSS 103 — Backgrounds + Borders
  • Background / Opacity / Image / Repeat / Position
  • Border (Style / Width / Color / Sides / Shorthand / Radius)
  • Margins (3 أجزاء)
  • Padding
css-104
CSS 104 — Layout & Text
  • Height / Width / Max-Width
  • Outline (Style / Width)
  • Text: Color / Background / Alignment / Vertical
  • Direction / unicode-bidi
  • Transformation / Shadow
  • Spacing (Letter / Line Height / Word / White Space)
bs-101
Bootstrap 101 — Get Started
  • Bootstrap Get Started
  • Bootstrap Responsive + Versions
  • Bootstrap 5 Example + CDN
  • إنشاء صفحة بـ Bootstrap 5
  • Containers (Fixed / Fluid / Responsive)
  • Padding / Border / Color
bs-102
Bootstrap 102 — Grid & Typography
  • Grid System + Grid Classes (5 أجزاء)
  • Text Typography (Headings / Display / small / mark / abbr / blockquote)
  • dl / Code / kbd / pre
  • Typography Classes (lead / text-align / break / decoration / case / list)
bs-103
Bootstrap 103 — Tables, Images, Buttons
  • Bootstrap Colors (Text / Opacity / Background)
  • Tables (Basic / Striped / Bordered / Hover / Dark / Contextual)
  • Responsive & Small Tables
  • Images (Rounded / Circle / Thumbnail / Aligning / Responsive)
  • Jumbotron / Alerts
  • Buttons (Styles / Outline / Sizes / Block Level / States / Spinner)
  • Button Groups (Sizes / Vertical / Nesting / Dropdown)
bs-104
Bootstrap 104 — UI Components
  • Badges (Contextual / Pill / In Button)
  • Progress Bars (Basic / Height / Label / Colored / Striped / Animated / Multiple)
  • Spinners (Colored / Growing / Sizes / Buttons)
  • Pagination (Active / Disabled / Sizing / Alignment)
  • Breadcrumbs
  • List Groups (Active / Linked / Disabled / Flush / Numbered / Horizontal / Contextual / Badges)
🎤
المقابلة (Interview)

مقابلة فنية على مواضيع الدورة كاملة. النجاح متطلّب للمرحلة التالية.

🎓
مشروع التخرج

مشروع التخرج العملي. يُسلَّم خلال فترة محددة.