N.E Academy Logo

دبلومة تطوير الواجهات الأمامية 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 جنية