الرئيسية chevron_left المعسكرات chevron_left معسكر تصميم وبرمجة الواجهة الأمامية لتطبيقات ومواقع الويب
CT-WP02
معسكر تصميم وبرمجة الواجهة الأمامية لتطبيقات ومواقع الويب
Front End design and development bootcamp
باستخدام تقنيات
Using technologies
المواد
المستوى
اللغة
المدة
السعر
"مصمم ومبرمج الواجهة الأمامية"
هذا ما ستكون عليه بعد دراستك لهذا المعسكر !
يهدف هذا المعسكر إلى إعداد مصممين ومبرمجين محترفين للواجهة الأمامية لمواقع وتطبيقات الويب، وأن تكون لديهم القدرة على تصميم وبناء تطبيقات ويب ضخمة باستخدام أشهر التقنيات HTML - CSS - JavaScript - ReactJS - BootStrap
في هذا المجال لديهم الخبرة الكافية في سوق العمل لينقلوا لك صورة كاملة أكاديمية وعملية عن هذا التخصص بجميع تفاصيله من زاوية الحياة العملية
وفي كل مرحلة من مراحل هذا المعسكر سيتم توجيهك خطوة بخطوة بدايةً من دراسة المواد الأساسية وعمل التطبيقات حتى تكتسب الآتي:
- فهمًا متكاملًا للواجهة الأمامية لمواقع وتطبيقات الويب
- القدرة على حل المشكلات والعقبات
- القدرة على تصميم الواجهة الأمامية لمواقع وتطبيقات ويب حقيقية
- القدرة على برمجة الواجهة الأمامية لمواقع وتطبيقات الويب
- الخبرة في عمل المشاريع الحقيقية
- الخبرة في التعاون والعمل ضمن فريق عمل
- سابقة أعمال احترافية
وليس هذا فحسب، إننا هنا لا نتحدث عن شروحات نظرية فقط، بل سنقدم لك تجربة العمل في هذا المجال حتى تتأكد بنفسك من مدى قابليتك للعمل في المجال أو التخصص الذي قمت باختياره، ولذلك نوفر لك تدريبًا عمليًا ميدانيًا في هذا المعسكر والذي سيضيف إليك أيضًا الكثير من المهارات الفنية والشخصية التي ستحتاج إليها وتستعملها لاحقًا في سوق العمل.
يتضمن المعسكر أيضًا قسمًا مختصًا بالمهارات الشخصية في مجال العمل؛ مثل تنظيم الوقت، والتسويق الشخصي، وكيفية كتابة سيرة ذاتية احترافية لمجال برمجة وتطوير الواجهة الخلفية لمواقع وتطبيقات الويب، وكيفية الاستعداد للمقابلة الشخصية أو للقاء العميل، وما ينبغي عليك ذكره في مقابلتك الشخصية وماينبغي عليك السكوت عنه سواء في الشركات أو مع عملائك في العمل الحر، وغيرها من الموضوعات الأساسية لتأهيلك للمضي قدمًا في تخصصك المختار.
هذا المعسكر التدريبي هو فرصتك لاختصار شهور وربما سنوات من البحث والدراسة والتجربة لتحصل على دليل شامل وواضح لمسيرتك نحو
مجال تصميم وبرمجة الواجهة الأمامية لمواقع وتطبيقات الويب بناءً على تحليل السوق المصرية والعالمية
المواد التعليمية التي سيتم دراستها في هذا المعسكر
Front-End
تصميم وبرمجة الواجهة الأمامية لمواقع وتطبيقات الويب
Web Technology
تشمل مادة تكنولوجيا الويب الأساسيات الضرورية للبدء في دراسة مجال برمجة وتطوير مواقع وتطبيقات الويب؛ حيث تبدأ بالشبكات، وكيفية عمل الانترنت، والاتصالات بين الخوادم والمتصفحات، وكيفية عمل المواقع على الانترنت؛ مما يوفر رؤية واضحة عن الويب نفسه قبل الانتقال إلى تقنيات تطوير الويب.
الدروس
Virtual machines Introduction
Virtual Machine Software
Virtual Box Installation
Create VirtualBox Machine
Virtual Box Windows 10
Virtual Box Configuration
الدروس
Computer Networks
Computer Network Devices
Computer Network Types
Local Area Network
Personal Area Network
Wide Area Network
Virtual Private Network
Internet Protocol Address IP
Find Your Private IP Address in Windows 10
Find Your Private IP Address in Windows 11
Find Your Private IP Address in Linux Mint
Find Your Private IP Address in Mac
Domain Name System DNS
Transmission Control Protocol TCP
Domain Name
Register a Domain Name
Domain Reservation
Internet
File Sharing over Computer Networks
File Sharing over Computer Networks on Windows 10
Servers
Remote Server Management
Web Server
Server Load Balance
Website and Web Application Hosting
File Transfer Protocol FTP
open systems interconnection OSI model
User Datagram Protocol UDP
الدروس
Web Browsers
File extension
IDE code editor
Static Web Pages
Dynamic Web Pages
الدروس
HTTP Hypertext Transfer Protocol
HTTP Parameters
HTTP Messages
HTTP Request
HTTP Response
HTTP Methods
HTTP Status Codes
HTTP Header Fields
HTTP Caching
HTTP URL Encoding
HTTP Security
HTTPS Hypertext Transfer Protocol Secure
HTML
توفر هذه المادة شرحًا شاملًا لـ HTML التي تعتبر أساس بناء الويب، فهي تركز على معرفة كيفية إنشاء وتنظيم صفحات الويب باستخدام العناصر الأساسية، مثل: العناوين، والفقرات، والروابط، والصور، كما تغطي المواضيع المتقدمة، مثل: تعلم كيفية تضمين الفيديوهات والمقاطع الصوتية لصفحات الويب.
الدروس
HTML Headings
HTML Paragraphs
HTML Comments
HTML Text Formatting
الدروس
HTML Links
HTML Link Attributes
HTML Hyperlinks
HTML Link Types
الدروس
HTML Images
HTML Image Maps
HTML Image File Types
HTML File Path
الدروس
HTML Tables
HTML Table Attributes
Merge Table Cells html
HTML Table Nested Elements
الدروس
HTML Lists
HTML Ordered Lists
HTML Unordered Lists
HTML Description List
HTML Nested List
List Attributes
الدروس
HTML Nested Pages - Iframes
HTML Head Element
HTML Meta Tags
الدروس
HTML Forms
HTML Form Attributes
HTML Form Text Inputs
HTML Form Buttons Inputs
HTML Form Select Inputs
HTML Form Date and Time Inputs
HTML Form Numbers Inputs
HTML Form files Inputs
HTML Form Input Primary Attributes
HTML Form Input Secondary Attributes
HTML Form Input Advanced Attributes
HTML Form Elements
الدروس
HTML Block and Inline Elements
HTML Semantic Elements
HTML Entities
CSS
الدروس
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To
CSS Comments
CSS Important
الدروس
CSS Text Color
CSS Text Alignment
CSS Vertical Alignment
CSS Text Transformation
CSS Text Spacing
CSS Text White Space
CSS Text Shadow
CSS Text Direction
الدروس
CSS Text Decoration Line
CSS Text Decoration Color
CSS Text Decoration thickness
CSS Text Decoration style
CSS Text Decoration Shorthand
الدروس
CSS Font Size
CSS Font Family
CSS Font Style
CSS Font Shorthand
CSS Google Font
الدروس
CSS Background Color
CSS Background Image
CSS Background Size
CSS Background Repeat
CSS Background Attachment
CSS Background Position
CSS Background Shorthand
الدروس
CSS Borders
CSS Border style
CSS Border Width
CSS Border Color
CSS Border Sides
CSS Border Shorthand
CSS Rounded Borders
الدروس
CSS Outline
CSS Outline style
CSS Outline Width
CSS Outline Color
CSS Outline Offset
CSS Outline Shorthand
الدروس
CSS Height
CSS Width
CSS Max Height
CSS Min Height
CSS Max Width
CSS Min Width
CSS Calculator
الدروس
CSS Display
CSS Visibility
CSS Float
CSS Clear
CSS Position
CSS Layers Orders z-index
CSS Overflow
الدروس
CSS Links
CSS Images
CSS Lists
CSS Tables
CSS Transparency Opacity
الدروس
CSS Navigation Bar
CSS Vertical Navigation Bar
CSS Horizontal Navigation Bar
الدروس
CSS Flexbox
CSS Flex Direction
CSS Flex Wrap
CSS Flex Flow
CSS flex Justify Content
CSS flex Align Items
CSS flex Align Content
CSS Flex Order
CSS Flex Basis
CSS Flex Grow
CSS Flex Shrink
CSS Flex Align Self
CSS Flex
الدروس
CSS Grid Template Columns
CSS Grid Column Start
CSS Grid Column End
CSS Grid Column
CSS Grid Auto Columns
الدروس
CSS Grid Template Rows
CSS Grid Row Start
CSS Grid Row End
CSS Grid Row
CSS Grid Auto Rows
CSS Grid Template
الدروس
CSS Responsive Introduction
CSS Responsive Viewport
CSS Media Queries
CSS Media Query Examples
CSS Responsive Grid View
CSS Grid Media Queries
CSS Video Responsive
CSS Image Responsive
CSS Flex Responsive
الدروس
CSS Background Origin
CSS Pagination
CSS Buttons
CSS Column Count
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
CSS Background Clip
CSS Rounded Corners
CSS Colors
CSS Multiple Backgrounds
CSS Color Keywords
CSS Color Gradients
CSS Border Images
CSS Animations
CSS Tooltip
CSS Variables
CSS Dynamic
JavaScript
الدروس
JavaScript Introduction
JavaScript Where To
JavaScript Output
JavaScript Syntax
JavaScript Comments
الدروس
JavaScript var Variables
JavaScript Constants
JavaScript let Variables
JavaScript Data Types
الدروس
Java Script Arithmetic Operators
Java Script Increment And Decrement Operators
JavaScript Unary Operators
Operator Precedence in javascript
JavaScript Assignment Operators
JavaScript Comparison Operators
JavaScript Logical Operators
JavaScript Bitwise Operators
Java Script Operators
الدروس
JavaScript Arrays
Print array in JavaScript
Java Script Arrays Elements
Java Script Array Methods
JavaScript Multidimensional Array
الدروس
JavaScript Objects
Java Script Print Object
Java Script Object Methods
Java Script Object vs Array
الدروس
JavaScript if else and else if Conditions
JavaScript Conditional Ternary Operator
JavaScript Switch
الدروس
JavaScript For Loop
JavaScript While Loop
JavaScript forEach Loop
JS for OF
Js Break and Continue
الدروس
JavaScript Functions
JavaScript Function Definitions
JavaScript Function Parameters
JavaScript Function Call
JavaScript Function Invocation
JavaScript Function Apply method
JavaScript Block statement
JavaScript Function Closures
JavaScript Scope
JS Events
الدروس
JavaScript Document Object Model
JavaScript DOM Get Elements
JavaScript DOM Set Elements
JavaScript DOM Attributes
JavaScript DOM Create Element
JavaScript DOM Remove Methods
JavaScript DOM CSS
JavaScript DOM ClassList
HTML DOM Collections
الدروس
JavaScript DOM Events
JavaScript DOM EventListener
JavaScript Click Event
JavaScript UI Events
JavaScript Mouse Events
JavaScript Form Events
الدروس
JavaScript DOM Navigation
JavaScript parentNode Method
JavaScript childNodes Method
JavaScript firstChild Method
JavaScript lastChild Method
JavaScript nextSibling Method
JavaScript previousSibling Method
JavaScript parentElement Method
JavaScript nextElementSibling Method
JavaScript previousElementSibling Method
الدروس
JavaScript Browser Object Model Introduction - BOM
JavaScript Window
JavaScript window open Function
JavaScript window close Function
JavaScript Window Screen Object
JavaScript Window Location Object
JavaScript Window History Object
JavaScript Window History State
JavaScript History pushState Method
JavaScript SPA Single page application
JavaScript Window Navigator
JavaScript Timing Events
الدروس
Arrow Function
JavaScript Cookies
JavaScript Classes
Math Methods
Number functions
String Functions
JavaScript Sets
Maps
الدروس
Object Definition
Object Properties
Object Methods
Display Objects
Object Accessors
Object Constructors
Object Prototypes
Object Iterables
Object Sets
Object Maps
الدروس
JS Callbacks
JS Asynchronous
JS Promises
JS Async/Await
الدروس
Web API Intro
Web Forms API
Web Storage API
Web History API
Web Workers API
Web Fetch API
Web Geolocation API
الدروس
AJAX Introduction
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
الدروس
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Object
JSON Array
JSON Server
JSON PHP
JSON HTML
الدروس
Java Script Array Advanced Methods
JS DOM Nodes
JS DOM Nodes
الدروس
Creation Methods
JS DOM Animation
DOM Document
Add elements
Child Elements
Class Elements
Client Properties
has properties
insert Properties
Scroll Properties
IS Methods x
Offset Prosperities
Bootstrap
الدروس
Bootstrap Colors
Bootstrap Buttons
Bootstrap Button Groups
Bootstrap Tables
Bootstrap Images
Bootstrap Alerts
Bootstrap Progress Bars
Bootstrap Spinners
Bootstrap 4 Jumbotron
Bootstrap Badges
Bootstrap Pagination
Bootstrap List Groups
Bootstrap Cards
Bootstrap Forms
Bootstrap Inputs
Bootstrap Utilities
Bootstrap Flex
الدروس
Bootstrap 4 Dropdowns
Bootstrap 4 Collapse
Bootstrap 4 Navs
Bootstrap 4 Tabs
Bootstrap 4 Navigation Bar
Bootstrap 4 Carousel
Bootstrap 4 Modal
Bootstrap 4 Tooltip
Bootstrap 4 Popover
Bootstrap 4 Toast
Bootstrap 4 Scrollspy
Bootstrap 4 Icons
Bootstrap Media Objects
ReactJS
تركز مادة ReactJS على فهم كيفية بناء واجهات المستخدم الديناميكية والتفاعلية بواسطة مكتبة ReactJS، والتي تهدف إلى تسهيل إنشاء وإدارة واجهة المستخدم، حيث يمكن تقسيم التطبيق إلى مكونات صغيرة وقابلة لإعادة الاستخدام، وبفضل هذا التقسيم يصبح بناء تطبيقات الويب سهلًا وأكثر تنظيمًا.
Git
دعنا ننير لك الطريق!
- هل أنهيت معسكر أساسيات علوم الحاسب وقررت البدء في مجال تصميم وبرمجة الواجهة الأمامية لمواقع وتطبيقات الويب؟
- هل أنت حديث التخرج وترغب بالعمل في مجال تصميم وبرمجة الواجهة الأمامية لمواقع وتطبيقات الويب؟
- أم لديك عمل حالي ولكن ترغب في تغيير مجالك الوظيفي إلى مجال تصميم وبرمجة الواجهة الأمامية لمواقع وتطبيقات الويب؟
- وهل ترغب في معرفة ما الذي يتطلبه الأمر حتى تصبح محترف في مجال تصميم وبرمجة الواجهة الأمامية لمواقع وتطبيقات الويب؟
- هل تريد تجربة الدراسة أولًا قبل دفع آلاف الجنيهات وإضاعة وقتك في دورات تدريبية متخصصة لا تجدها مجدية فيما بعد؟
- هل تريد التعرف على سوق العمل عن قرب ومعرفة كيف تسير الأمور داخل الشركات كأنك أحد المبرمجين؟
- ماذا عن العمل بالدول العربية؟ أو حتى العمل بشكل حر من المنزل والوصول لعملائك من أي مكان؟
احصل على إجابات كل تلك الأسئلة وأكثر من خلال هذا المعسكر التدريبي الذي يقدم لك كل ما تحتاج
لمعرفته عن مجال الويب بسوق العمل المصري والعربي
ستتعلم كيفية بناء هيكل صفحة الويب باستخدام عناصر HTML المختلفة.
ستتعلم كيفية استخدام أنماط وتنسيقات CSS المختلفة لتنسيق وتصميم العناصر على صفحات الويب.
ستتعرف على مفاهيم الـResponsive Web Design لتجعل الصفحات تستجيب لأحجام الشاشة المختلفة.
ستتعلم كيفية استخدام JavaScript لإضافة وظائف تفاعلية إلى صفحات الويب.
ستتعلم كيفية بناء وتطوير واجهات المستخدم الديناميكية باستخدام ReactJS.
ستتعلم كيفية استخدام Bootstrap لتسريع عملية تصميم وتنسيق صفحات الويب.
ستتعلم كيفية استخدام Git لتتبع التغييرات في الكود، والتعاون مع الآخرين، وإدارة الإصدارات.
الرغبة في التعلم.
جهاز computer شخصي.
نظام تشغيل، مثل: Macintosh, Linux, Windows.
الاتصال بشبكة انترنت قبل الدخول في هذه الدورة.
إنهاء معسكر أساسيات علوم الحاسب أو اجتياز اختباراته.
مطور مواقع الويب
مصمم مواقع الويب
مطور تطبيقات الويب
مصمم تطبيقات الويب
مطور مواقع الويب باستخدام React JS
مطور الواجهة الأمامية لمواقع وتطبيقات الويب
تعرف على المدربين بهذا المعسكر
Mostafa Hefny
مؤسس المنصة, ومطور تطبيقات الويب
بدأ مصطفى حياته المهنية عام 2009 كإداري في مركز Hero Tec للشبكات والأمن السيبراني واكتسب فيه الكثير من الخبرات في تلك المجالات. ثم أسس أكاديمية 7Dash لتعليم علوم الحاسب في عام 2011، وأسس بعدها شركة Trickces لتصميم وبرمجة تطبيقات الويب ومنصة CloseTag التعليمية. وبفضل جهوده، تم اختيار CloseTag لتكون جزءًا من مبادرة الأمم المتحدة لدعم أهداف التنمية المستدامة ورؤية مصر 2030. يسعى مصطفى لتمكين الطلاب من اكتشاف العبقرية بداخلهم وتحقيق الابتكار في علوم الحاسب؛ فشعارنا هو "هنطلع العبقري اللي جواك". إذا كنت مهتمًا بأن تكون جزءًا من الرحلة، لا تتردد في التواصل عبر منصات التواصل الاجتماعي.
Mohamed Hegazy
مطور تطبيقات الويب
بدأ محمد حياته المهنية عام 2020 كمبرمج تطبيقات ويب في شركات محلية وعربية , واكتسب فيها الكثير من الخبرات في تلك المجالات. في عام 2021 , بدأ في مجال التدريب وعمل كمدرب تصميم وبرمجة تطبيقات الويب في مراكز تدريب مصرية , ومن أشهرها المركز الثقافي الروسي للتدريب والتكنولوجيا , حيث شارك في اعداد مئات الطلاب لسوق العمل.
ساهم محمد في تطوير بعض البرامج التدريبية لمنصة CloseTag لتعلم البرمجة , والتي اصبح جزءا منها للمشاركة في مبادرة الأمم المتحدة لدعم أهداف التنمية المستدامة ورؤية مصر لعام 2030. يسعي محمد لتمكين الطلاب من اكتشاف العبقرية بداخلهم وتحقيق الابتكار في علوم الحاسب , فشعارنا هو "هنطلع العبقري اللي جواك"