دبلومة تطوير الواجهات الأمامية Frontend Development Diploma

رحلة شاملة لتعلم تطوير المواقع من الصفر إلى الاحتراف
HTML • CSS • JavaScript • TypeScript • Tailwind • Angular

6 أشهر 48 محاضرة مشاريع عملية

ابدأ رحلتك الآن شاهد المنهج التفصيلي

لماذا تختار دبلومة N.E؟

برنامج متكامل مصمم خصيصاً للمبتدئين ليصبحوا مطورين محترفين في مجال الواجهات الأمامية

منهج متدرج

منهج مدروس يبدأ من الأساسيات وينتهي بمشاريع احترافية متكاملة

تطبيق عملي

مشاريع حقيقية ومهام عملية بعد كل موضوع لضمان التطبيق الفوري

تقنيات حديثة

تعلم أحدث التقنيات المطلوبة في سوق العمل الحالي

المنهج التفصيلي

منهج شامل مقسم على 6 أشهر ليأخذك من المبتدئ إلى المحترف

الشهر الأول: HTML & CSS

أساسيات بناء المواقع والتصميم

Beginner HTML

HTML Structure & Basic Elements
Text Formatting & Typography
Images, Links & Navigation
Lists & Tables
Forms & Input Types
Semantic HTML5 Elements

📋 Tasks:

• Personal Profile Page
• Article Blog Page
• Restaurant Menu with Tables
• User Registration Form

CSS Fundamentals

CSS Selectors & Properties
Box Model & Positioning
Colors, Backgrounds & Typography
Flexbox Layout
CSS Grid Layout
Responsive Design & Media Queries
Animations & Transitions

📋 Tasks:

• Product Card Design
• Photo Gallery with Flexbox
• Blog Layout with Grid
• Responsive Landing Page

الشهر الثاني: Tailwind CSS & JavaScript

إطار العمل السريع والبرمجة التفاعلية

Tailwind CSS

Utility-First CSS Framework
Installation & Setup
Spacing, Colors & Typography
Flexbox & Grid in Tailwind
Responsive Design & Dark Mode
Animations & Hover Effects

📋 Tasks:

• Redesign Profile Page with Tailwind
• Product Card with Tailwind
• 3x3 Responsive Photo Gallery
• Landing Page with Dark Mode

JavaScript Basics

Variables & Data Types
Operators & Conditionals
Loops & Arrays
Functions & Events
DOM Manipulation
Event Listeners & Basic APIs

📋 Tasks:

• Welcome Message App
• Simple Calculator
• To-Do List Display
• Background Color Changer
• Product List from JSON

الشهر الثالث: JavaScript المتقدم & TypeScript

البرمجة المتقدمة والبرمجة المكتوبة

Advanced JavaScript

String & Math Methods
Objects & Nested Data
ES6+ Features (Destructuring, Arrow Functions)
Array Methods (map, filter, reduce)
Local Storage & Session Storage
JSON & Error Handling

📋 Tasks:

• Random Quote Generator
• Student Data Display
• Array Filter Application
• Persistent To-Do List

TypeScript Introduction

TypeScript vs JavaScript
Installation & Setup
Basic Types (string, number, boolean)
Arrays & Objects in TypeScript
Type Aliases & Interfaces
Functions & Error Handling

📋 Tasks:

• Sum Calculator with Types
• Employee Data with TypeScript
• Product List with Custom Types
• Password Strength Checker

الشهر الرابع: TypeScript المتقدم & مقدمة Angular

البرمجة المتقدمة وبداية أطر العمل

Advanced TypeScript

Generics & Advanced Types
Union & Literal Types
Classes & Inheritance
Enums & Tuples
Modules & Namespaces
Decorators

📋 Tasks:

• Product Management Library
• User Management System
• Multi-file Module Project

Angular Introduction

Framework Overview & SPA Concept
Node.js & NPM Basics
Angular CLI & Project Structure
Components & Data Binding
Directives & Services
Dependency Injection

📋 Tasks:

• First Angular Project
• User Registration Component
• Dynamic Product Gallery
• Smart To-Do List Application

الشهر الخامس: Angular المتقدم

التوجيه والأمان والمصادقة

Advanced Angular Features

Routing & Navigation
Route Parameters & Guards
Lazy Loading & 404 Pages
Reactive Forms & Validation
FormArray & File Upload
HttpClient & Observables

📋 Tasks:

• Product Gallery with Routing
• Multi-page Application
• Professional Registration Form
• Product Form with File Upload
• API Data Display with Loading

Security & Authentication

JWT Authentication
Token Storage & Management
Route Guards & Protection
Angular Interceptors
Component Lifecycle Hooks
Angular Pipes & Shared Services

📋 Tasks:

• Simple Login System
• CRUD System with JWT
• Secure Product Management App

الشهر السادس: مشروع التخرج

مشروع متكامل مع دمج الذكاء الاصطناعي

Final Project Development

Project Planning & Setup
Angular + Tailwind Integration
Navigation & Responsive Design
Authentication System
Dashboard & Data Management
CRUD Operations & API Integration

📋 Project Options:

• E-commerce Website
• Task Management System
• Admin Dashboard

AI Integration & Deployment

AI-Assisted Development
Search & Filtering Features
Performance Optimization
Design Enhancement
GitHub Integration
Live Deployment (Vercel/Netlify)

📋 Final Deliverables:

• Complete Professional Website
• GitHub Repository
• Live Deployment
• Professional README

6

أشهر تدريب

48

محاضرة

20+

مشروع عملي

6

تقنيات حديثة

ابدأ رحلتك في تطوير الواجهات الأمامية

انضم الان واستمتع بخصم رائع اكثر من 1500 جنية

احجز مكانك الآن تحدث مع مستشار