Takween Team - فريق تكوين البرمجي
@TkweenTeam
2.4K subscribers
38 photos
29 links
TakweenTeam 💻 | شريكك للحلول البرمجية والتدريب التقني. نقدم مشاريع برمجية، قوالب ويب احترافية، ودورات متقدمة في الأمن السيبراني وتطوير الويب.
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️​ نصنع مستقبلك البرمجي بامتياز ⚡️
Download Telegram
About
Blog
Apps
Platform
Join
Takween Team - فريق تكوين البرمجي
2.4K subscribers
Takween Team - فريق تكوين البرمجي
عن شو حابين ننشر بالأيام الجاي ؟
رح يتم نشر بناء على ارائكم وكل التوفيق للجميع 🤍🤍
Anonymous Poll
44%
مقدمة بسيطة في الأمن السيبراني (30 يوم)
30%
مقدمة بسيطة في البرمجة (60 يوم)
26%
تعلم برمجة بوتات التلجرام مع امثلة تطبيقية (40 يوم)
❤10⚡5👍3🔥3😍3👏2
160 voters10.4K views
Takween Team - فريق تكوين البرمجي
يسعدلي أوقاتكون جميعا
كيفكم ان شاء الله متحمسين لنطلق بالمعسكر
رح نفتتح ​ 'معسكر الـ 30 يوم تقني' 🌐.. شروحات برمجية ، أمثلة عملية (أكواد جاهزة) ، أفضل أقنية يوتيوب للتعلم  ، مواقع تفيد في الفكرة المطروحة( لكل يوم ) ، وأسرار السيكيورتي بأسلوب مبسط.
​كل المحتوى الفخم والمصادر رح تنزل حصرياً على قناة التلجرام لضمان الفائدة. 📱✅
​🔗 انضموا من هون واستفيدوا:
https://t.me/TkweenTeam
وكل الشكر للجميع 🤍
وٱي استفسار يمكنم التواصل بالخاص
#TakweenTeam #فريق_تكوين #برمجة #مشاريع_تخرج #مشاريع_جامعية #تصميم_مواقع #تطوير_تطبيقات #حلول_برمجية #سوريا
#أمن_سيبراني #هندسة_معلوماتية #معسكر_الـ30_يوم  #IUST
⚡️​ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👍6⚡2🏆2🔥1👨‍💻1
9.97K views
Takween Team - فريق تكوين البرمجي
يسعد اوقاتكون جميعا ،
حبيت أعلنكم إنو رح نبدأ معسكر الـ 30 يوم تقني اعتباراً من الأربعاء 1-4-2026.
انضموا من هون واستفيدوا:
https://t.me/TkweenTeam
الهدف إنو نكون ملتزمين كل يوم بشي مفيد:
· شروحات مكثفة
· تطبيقات عملية
· ومشاريع صغيرة نختم فيها كل أسبوع
المسار مجاني بالكامل، ومخصص للمبتدئين وللي حابين يرتبوا تعلمهم بطريقة صحيحة و ايضا للمبرمجين بشكل عام .
راح أنشر المحتوى يومياً عالقناة، ولو في أسئلة أو تعليقات أنا موجود ع الخاص .
خلينا نبلش صح، واللي حابب يشارك المعرفة مع أصحابو فينو يعلق .
منتظرينكن إن شاء الله يوم الأربعاء 1-4-2026 لنكون كلنا مع بعض ونساعد بعض🤝🤍📱
#TakweenTeam #فريق_تكوين #برمجة #مشاريع_تخرج #مشاريع_جامعية #تصميم_مواقع #تطوير_تطبيقات #حلول_برمجية #سوريا
#أمن_سيبراني #هندسة_معلوماتية #معسكر_الـ30_يوم  #IUST
​ ⚡️نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6🔥2🏆2👨‍💻1
294 views
Takween Team - فريق تكوين البرمجي
الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الأول:
ليش الـ HTML هي العمود الفقري لأي موقع؟

يا هلا بالشباب! اليوم أول خطوة بمعسكرنا.
كثير ناس لما بتدخل عالم البرمجة بتفكر إن الـ HTML هي لغة برمجة، بس بالحقيقة هي "لغة هيكلة" (Markup Language). وظيفتها مش إنها تعمل حسابات أو منطق، بل إنها بترتب المحتوى وتحط له إطارات. عشان الفكرة تكون أوضح، تخيل إنك عم تبني عمارة.. الـ HTML هي الأساس، العواميد، والحيطان اللي بتحدد مكان كل غرفة. مستحيل تبدأ بوضع الديكورات والألوان (الـ CSS) أو تحط الأثاث، بدون ما يكون عندك هيكل قوي وصح يمسكهم، يعني هي الهيكل العظمي لأي موقع!
💡 جرب هالكود البسيط عندك (انسخه وافتحه كملف .html):
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>أول موقع لي</title>
</head>
<body style="text-align: center; font-family: Tahoma, sans-serif; margin-top: 50px;">
    <h1>مرحباً بكم في معسكر الـ 30 يوم! 🚀</h1>
    <p>هذا النص مكتوب باستخدام HTML، نحن نبني الأساس الآن.</p>
    <button onclick="alert('عاش يا بطل!')">اضغط هنا</button>
</body>
</html>

🔥🔥🔥🔥🔥🔥🔥🔥

📺 أقوى 3 قنوات يوتيوب لتعلم HTML صح😀:
1- Elzero Web School (أسطورة الويب العربي، شرح مفصل جداً)
أضغط ⬅️ الدروة التدريبية كاملة

2- FreeCodeCamp (بالإنجليزي، كورسات كاملة بتطبيق عملي)
أضغط ⬅️ الدورة التدريبية الكاملة
3- Programming with Mosh (شرح مكثف وسريع لو وقتك ضيق)
أضغط ⬅️ رابط الفيديو التدريبي كامل
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع تقدم دورات و تعطي شهادة إتمام مجانية😀:
1-Cisco Networking Academy (NetAcad):
أضغط ⬅️ الموقع
2- Harmash
أضغط ⬅️ الموقع
3- freeCodeCamp
أضغط ⬅️رابط الدورة
(دورة Responsive Web Design شاملة HTML + CSS، مشاريع عملية، شهادة رسمية مجانية قابلة للمشاركة).
4-Simplilearn
أضغط ⬅️رابط الدورة
(دورة HTML كاملة للمبتدئين، 6 ساعات، شهادة إتمام مجانية).
5-Scrimba
أضغط ⬅️ رابط الدورة
(دورة Learn HTML and CSS تفاعلية، 5.7 ساعات + مشاريع، شهادة إتمام مجانية).
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع خرافية بتساعدك:
1- الموقع الرسمي/المرجع: MDN Web Docs (مكتبة موزيلا، المرجع الأول لأي مطور).
2- موقع مساعد: W3Schools (ممتاز للتجربة المباشرة والأمثلة البسيطة).
🔥🔥🔥🔥🔥🔥🔥🔥
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
👑المالك:@y_f_fa|👑الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍2👨‍💻1
1.78K viewsedited  
Takween Team - فريق تكوين البرمجي
الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الثاني:
سحر الـ CSS.. كيف تحول موقعك من ملل إلى فخامة؟ 🎨

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
أهلاً فيكم باليوم الثاني! مبارح بنينا الحيطان (HTML)، واليوم إجا دور الدهان والديكور (CSS).
الـ CSS هي اللي بتعطي الروح لموقعك. الألوان، الخلفيات، والحركات (Animations) كلها بتخلي المستخدم يحس إنه قاعد يتعامل مع شي حي. كمان هي المسؤولة عن توزيع العناصر بالشاشة (Layout)، سواء باستخدام Flexbox أو Grid، عشان يطلع الموقع منسق ومنظم على كل الشاشات، مو بس على الكمبيوتر.
المطور الشاطر هو اللي بيعرف يكتب CSS نظيف وما يكرر كوده. يعني يستخدم Classes مناسبة، ويستفيد من خاصية Variables عشان لو بدنا نغير لون معين يتغير من مكان واحد بدل ما نعدل على خمسين سطر. بهيك بنقدر نتحكم بمظهر الموقع بسهولة ونخليه سهل التعديل بعدين.
➖خلونا نضبط شكل الزر اللي عملناه مبارح:
/* ضيف هذا الكود داخل وسم <style> في ملف الـ HTML */
button {
    background-color: #2563eb; /* لون أزرق فخم */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px; /* حواف دائرية */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* حركة ناعمة عند اللمس */
}

button:hover {
    background-color: #1d4ed8; /* يغمق اللون شوي لما تحط الماوس عليه */
}

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات لتعلم CSS وإبداعاتها:
1- Elzero Web School (شرح عربي لا يعلى عليه).
أضغط ⬅️ رابط الدورة التدريبية
2- Kevin Powell (ملك الـ CSS على يوتيوب بلا منازع).
أضغط ⬅️ رابط الدورة التدريبية
3- Web Dev Simplified (بيشرح تريكات الـ CSS المعقدة ببساطة).
أضغط ⬅️ رابط الدورة التدريبية
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-Cisco Networking Academy (NetAcad)
أضغط ⬅️ رابط موقع الدورة التدريبية
2- Harmash
أضغط ⬅️ رابط موقع الدورة التدريبية
3- freeCodeCamp
أضغط ⬅️ رابط موقع الدورة التدريبية
(دورة Responsive Web Design شاملة HTML + CSS، مشاريع عملية، شهادة رسمية مجانية قابلة للمشاركة).
4-Scrimba
أضغط ⬅️ رابط موقع الدورة التدريبية 
(دورة Learn HTML and CSS تفاعلية، 5.7 ساعات + مشاريع، شهادة إتمام مجانية).
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1- المرجع: MDN Web Docs - CSS
2- موقع مساعد: CSS-Tricks (كنز للمقالات والخدع البصرية).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

             🚨🚨🚨🚨🚨🚨🚨🚨
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8🏆2⚡1👨‍💻1
6.84K views
Takween Team - فريق تكوين البرمجي
🤍🌷
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7🙏3
181 views
Takween Team - فريق تكوين البرمجي
إعلان هام لمتابعي TakweenTeam

لطالما كان التطوّر والتجديد جزءاً من هويتنا، واليوم نحن على أعتاب نقلة نوعية جديدة
🎨هويّتنا البصرية الجديدة على الأبواب!
بعد عملٍ دؤوب وتفكيرٍ خلّاق، نستعد لكشف القناع عن هوية بصرية تعكس رؤيتنا وطموحنا بشكل أعمق وأكثر احترافية.
⏰انتظروا الإعلان قريباً...
هوية جديدة، ذات النهج نفسه: تكوين، إبداع، وإتقان 😀❤️
رابط القناة الرسمية الخاصة بالفريق : https://t.me/TkweenTeam
#TakweenTeam #فريق_تكوين #برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة  #IUST #هوية_جديدة #قريباً
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🥰1😍1👨‍💻1
150 viewsedited  
Takween Team - فريق تكوين البرمجي
الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الثالث:
الجافاسكربت (JavaScript).. عصب التفاعل في الويب⚡

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
أصدقائي، وصلنا للوحش!
موقع بدون جافاسكربت متل سيارة بدون محرك.. شكلها حلو بس ما بتمشي. الـ JS هي لغة البرمجة اللي بتخلي موقعك يتفاعل مع المستخدم (يجيب بيانات، يرسل فورم، يغير ألوان الشاشة). كمان بتخلي الزر يتحرك، والنص يتغير بدون ما يعيد تحميل الصفحة، وبتقدر تتحقق من إيميل المستخدم قبل الإرسال. بدونها، رح يضل موقعك ثابت وممل.
وهي المدخل لتتعلم تقنيات عملاقة بعدين متل React أو Vue أو Angular، لأنها كلها مبنية على JS. أتقنها صح، وبتصير تسيطر على كل شي بصفحتك.
➖كود JS بسيط لتغيير لون الخلفية بضغطة زر:
<button onclick="changeColor()">غيّر لون الموقع</button>

<script>
    function changeColor() {
        // مصفوفة ألوان
        const colors = ['#f87171', '#fbbf24', '#34d399', '#60a5fa'];
        // اختيار لون عشوائي
        const randomColor = colors[Math.floor(Math.random() * colors.length)];
        // تطبيق اللون على الخلفية
        document.body.style.backgroundColor = randomColor;
    }
</script>

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى قنوات لتبصم الـ JavaScript:
1- Elzero Web School (مسار الـ JS عنده يعتبر مرجع شامل).
أضغط ⬅️ رابط الدورة التدريبية
2- JavaScript Mastery (مشاريع خرافية وعصرية جداً).
أضغط ⬅️ رابط الدورة التدريبية
3- Bro Code (شرح سريع، ممتع، وما بتمل منه).
أضغط ⬅️ رابط الدورة التدريبية
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-Cisco Networking Academy (NetAcad)
أضغط ⬅️ رابط موقع الدورة التدريبية
2- Harmash
أضغط ⬅️ رابط موقع الدورة التدريبية
3- freeCodeCamp
أضغط ⬅️ رابط موقع الدورة التدريبية 
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1- الموقع الرسمي/المرجع الأساسي: JavaScript.info (شرح من الصفر للاحتراف المتقدم).
2- موقع مساعد: Codecademy (للتدريب التفاعلي وكتابة الكود مباشرة).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

             🚨🚨🚨🚨🚨🚨🚨🚨
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6🔥2👨‍💻1
129 views
Takween Team - فريق تكوين البرمجي
الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الرابع:
ليش كل الشركات بتطلب React.js؟ ⚛

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
مساكم ورد! بعد ما فهمنا الأساسيات، لازم نعرف السوق شو طالب.
الـ React هي مكتبة (Library) مبنية على الجافاسكربت من تطوير شركة فيسبوك. فكرتها ببساطة إنها بتقسم موقعك لقطع صغيرة (Components).. يعني زرار التسجيل بتبرمجه مرة وحدة، وبتستخدمه بـ 100 مكان بالموقع بدون ما تعيد كتابة الكود! هذا بيوفر وقت، وبيخلي الموقع سريع جداً. كمان بتعتمد على مفهوم الـ Virtual DOM، يعني لما يتغير شي بالشاشة، React بتحدث بس الجزء اللي تغير، مش كل الصفحة، لهيك المواقع المبنية عليها سريعة وسلسة.
أغلب شركات التقنية اليوم بتطلب React، لأنها سهلة التعلم مقارنة بغيرها وعليها طلب كبير. أتقنها، وحط رجلك بسوق البرمجة بثقة.
➖ شكل كود الـ React (لاحظوا كيف بندمج الـ HTML مع الـ JS):
import React, { useState } from 'react';
function LikeButton() {
  const [likes, setLikes] = useState(0);
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h2>عدد الإعجابات: {likes} 👍</h2>
      <button onClick={() => setLikes(likes + 1)}>
        أعجبني
      </button>
    </div>
  );
}
export default LikeButton;

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أفضل قنوات لتعلم React:
1- Codevolution (أفضل تسلسل منطقي لتعلم ريأكت خطوة بخطوة).
رابط الدورة التدريبية
2- Unique Coderz Academy (قناة عربية ممتازة جداً بشرح المفاهيم المتقدمة).
رابط الدورة التدريبية
3- Net Ninja (شرحه مريح جداً وبيدخلك بالمشاريع فوراً).
رابط الدورة التدريبية
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-freeCodeCamp
رابط موقع الدورة التدريبية
(شهادة Front End Development Libraries الشاملة لـ React + مشاريع حقيقية + شهادة مجانية رسمية).
2- Harmash
رابط موقع الدورة التدريبية
3-Scrimba
رابط موقع الدورة التدريبية
(دورة تفاعلية 15 ساعة + مشاريع عملية + شهادة إتمام مجانية).

4-Simplilearn
رابط موقع الدورة التدريبية
(دورة React JS للمبتدئين + شهادة إتمام مجانية بعد الإكمال).
5-Scaler
رابط الدورة التدريبية 
(دورة React JS كاملة + شهادة Excellence مجانية من Scaler).
6-ScholarHat
رابط موقع الدورة التدريبية
(دورة React JS مجانية مع شهادة ReactJS معتمدة مجانية عند الإنهاء).
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1- المرجع الرسمي: React.dev (الدومكيومنتيشن الجديد تبعهم خرافي).
2- موقع مساعد: React Tutorial by W3Schools (لتجربة الأكواد بسرعة).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👨‍💻1
124 views
Takween Team - فريق تكوين البرمجي
هويّتنا البصرية الجديدة... حكاية تكوين من سهم وحرف 🤎

بكل فخر، نكشف لكم القناع عن هوية TakweenTeam - فريق تكوين البرمجي الجديدة رابط القناة الرسمية @TkweenTeam، التي تحمل في تفاصيلها فلسفتنا ورؤيتنا التي نعمل بها كل يوم.
❓ ماذا يعني شعارنا الجديد؟
🟤 السهم ليس مجرد شكل، بل هو حرف التاء (ت) في ثوبٍ حركي يعبر عن الانطلاق والتوجّه نحو الأفضل.
🟤 السهم يشير إلى الموبايل، رمز التكنولوجيا والعالم الرقمي الذي نبدع فيه، ليؤكد أن "تكوين" تعني بناء الحلول البرمجية التي تصل إلى المستخدم مباشرة.
🟤 السهم في حد ذاته هو "تكوين" بمعناه الأعم: تجميع العناصر، توجيهها، وإخراجها في قالب واحد متكامل ومبتكر.
🖊 أما الخط الذي اخترناه بعناية، فهو ليس مجرد خط، بل انعكاس لهويتنا العصرية والأنيقة التي تمزج بين الأصالة والبرمجيات الحديثة.
🤎 قريباً جداً...
ستلمسون هذه الهوية في كل تفاصيل قناتنا ومنصاتنا، لأن التغيير يبدأ من الشكل ليصل إلى الجوهر.
كونوا بالقرب، فـ تكوين بدأت مشوارها الجديد
#TakweenTeam #فريق_تكوين #برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة  #IUST #هوية_جديدة #قريباً #هوية_تكوين_الجديدة #برمجة_بإتقان
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍7😍3🥰2💯2🔥1🍓1👨‍💻1
153 views
Takween Team - فريق تكوين البرمجي
Channel photo updated
Takween Team - فريق تكوين البرمجي
الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الخامس:
ستايل موقعك بدقائق مع Tailwind CSS

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، لو بتكرهوا تكتبوا ملفات CSS طويلة وتضيعوا بأسماء الكلاسات، هذا اليوم لكم!
الـ Tailwind هو إطار عمل (Framework) بيعطيك كلاسات جاهزة.. يعني بدال ما تروح لملف الـ CSS وتكتب margin-top: 10px;، ببساطة بتكتب جوة الـ HTML كلاس اسمه mt-2 وهو بيعمل الشغل. بيسرّع الشغل بشكل خيالي ومطلوب جداً بالسوق حالياً. كمان بتقدر تعدل التصميم وأنت قاعد في نفس ملف المكون، بدون ما تتنقل بين ملفات HTML وCSS. وكل الكلاسات موحدة ومعروفة، يعني لو اشتغلت مع فريق، أي مطور بيفهم شغلك بسرعة. اللي بيجرب Tailwind بيصعب عليه يرجع للـ CSS العادي، جربوا وما بتندموا!
➖شوفوا كيف بنصمم زر احترافي بـ Tailwind بسطر واحد:
<button class="bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow-lg hover:bg-blue-800 transition duration-300">
  زر احترافي بـ Tailwind
</button>

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أفضل قنوات لتعلم Tailwind:
1- Tailwind Labs (القناة الرسمية لصنّاع التقنية، الفيديوهات قصيرة ومفيدة).
رابط الدورة التدريبية
2- Traversy Media (عنده كراش كورس بيلخص لك الدنيا كلها).
رابط الدورة التدريبية
3- Nour Homsi (شرح عربي رايق وممتاز للتطبيقات العملية).
رابط الدورة التدريبية
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-freeCodeCamp
رابط موقع الدورة التدريبية
(دورة عملية لبناء مشروع Product Card + تعلم مجاني كامل، ويمكن إضافتها إلى شهادات freeCodeCamp الأخرى).
2-Scrimba
رابط موقع الدورة التدريبية
(دورة تفاعلية كاملة + 5 مشاريع حقيقية + شهادة إتمام مجانية).
3-MindLuster
رابط موقع الدورة التدريبية
(دورة أساسيات Tailwind CSS + شهادة مجانية 100% بعد مشاهدة الدروس).
4-MindLuster (دورة تخصيص متقدمة)
رابط موقع الدورة التدريبية
(دورة Tailwind CSS Config + شهادة مجانية 100%).
5-Cursa
رابط موقع الدورة التدريبية
(عدة دورات مجانية مثل "Tailwind CSS for Beginners" + شهادة رقمية مجانية مع QR code).
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1- المرجع الرسمي: Tailwindcss.com (أفضل توثيق ممكن تقرأه بحياتك).
2- موقع مساعد: Tailwind Play (ملعب لتجربة كلاسات تيلويند مباشرة بالمتصفح).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🕊2👍2🔥2🥰1💯1🍓1👨‍💻1
149 views
Takween Team - فريق تكوين البرمجي
يسعد مساكون جميعا ،حابين نوفر عليكون تعب وجهد البحث في القناة فرح نقدم بعد كل اسبوع مننشر فيو ⬇️
فهرس الاسبوع الأول – أول 5 أيام في معسكر ال 30 يوم تقني

تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
قائمة بالمنشورات الخاصة بالأسبوع الأول بالمعسكر،تحوي:
1-HTMLرابط المنشور(1/4/2026)
2-CSSرابط المنشور(2/4/2026)
3-JavaScriptرابط المنشور(4/4/2026)
4-Reactرابط المنشور(5/4/2026)
5-Tailwind Cssرابط المنشور(6/4/2026)
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
🔥3👍2🥰2❤1👌1💯1🍓1👨‍💻1
124 viewsedited  
Takween Team - فريق تكوين البرمجي
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم السادس:
كيف تسافر بياناتك في الإنترنت؟ (نموذج OSI) 🌐

يا هلا بالمهندسين! اليوم رح نتكلم عن شيء مستحيل تكون متخصص بالـ IT وما تعرفه: نموذج الـ OSI.
تخيل إنك بتبعت رسالة لصديقك على واتساب، هاي الرسالة ما بتطير بالهواء فجأة! بتمر بـ 7 طبقات (Layers) داخل جهازك، من وقت ما تكتبها (Application Layer) لحد ما تتحول لإشارات كهربائية أو ضوئية بالأسلاك (Physical Layer). كل طبقة مسؤولة عن شي معين: وحدة بتتأكد إن البيانات وصلت سليمة (Transport)، ووحدة بتعرف الطريق (Network)، ووحدة بتشفر البيانات عشان الأمان (Presentation). فهمك لهالطبقات بيخليك تعرف بالضبط وين المشكلة لما ينقطع النت أو يصير اختراق. مثلاً: إذا الموقع شغال بس الصور ما تظهر، غالباً مشكلة بالطبقة السادسة أو السادسة؟ لا، بالأولى! المهم، متى تحفظ الطبقات السبع؟ قبل ما يصير فيك شي اسمك مهندس شبكات.
➖تجربة عملية (بدون كود هالمرة، استخدم موجه الأوامر CMD):
عشان تشوف مسار بياناتك وكيف بتمر عبر السيرفرات (الراوترات) لحد ما توصل لموقع جوجل، افتح الـ CMD واكتب:
tracert google.com
رح تشوف كل "قفزة" (Hop) بتعملها بياناتك بالشبكة!
🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 2 قنوات لفهم الشبكات:
1- NetworkChuck (أسطورة، بيشرح الشبكات وكأنها فيلم أكشن ومعه قهوة ☕).
اضغط⬅️ رابط الدورة التدريبية
2- FreeCodeCamp (عندهم كورس كامل للشبكات للمبتدئين).
اضغط ⬅️ رابط الدورة التدريبية
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-Cisco Networking Academy (NetAcad)
اضغط⬅️ رابط موقع الدورة التدريبية 
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1- المرجع الرسمي: Cisco Networking Academy (سيسكو هي الأساس بهالمجال).
اضغط ⬅️ رابط الموقع التدريبي
2- موقع مساعد: GeeksforGeeks - OSI Model (للقراءة السريعة والمقالات).
اضغط ⬅️ رابط الموقع التدريبي
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3💯2🍓2❤1🔥1🥰1👨‍💻1💘1😘1
151 views
Takween Team - فريق تكوين البرمجي
Takween Team - فريق تكوين البرمجي
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني اليوم السادس: كيف تسافر بياناتك في الإنترنت؟ (نموذج OSI) 🌐 يا هلا بالمهندسين! اليوم رح نتكلم عن شيء مستحيل تكون متخصص بالـ IT وما تعرفه: نموذج الـ OSI. تخيل إنك بتبعت رسالة لصديقك على واتساب، هاي الرسالة ما بتطير…
اليوم السادس
خلاصة استراتيجية دفاع متعددة الطبقات ✅🩸
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2🔥2🥰2👌2💯1🍓1👨‍💻1
137 views
Takween Team - فريق تكوين البرمجي
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم السابع:
فن التشفير (Cryptography) - كيف نحمي أسرارنا؟ 🔐

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
مساكم آمن يا شباب! اليوم رح نفتح باب التشفير.
من أيام الرومان والناس بتحاول تخفي رسائلها. التشفير ببساطة هو إنك تحول نص مقروء لنص غير مفهوم، وما يقدر يقرأه إلا اللي معه "المفتاح". اليوم رح نحكي عن خوارزمية تاريخية اسمها (Vigenère Cipher).. فكرتها إنها بتشفر الحروف بناءً على كلمة سر، مو بس إزاحة عادية (زي Caesar Cipher اللي كان كل حرف يتحرك عدد ثابت من الخطوات). وهالشي كان يعتبر ثورة بوقتها! ليه؟ لأن نفس الحرف بالكلمة الوحدة ممكن يتشفر بأشكال مختلفة حسب موقعه مقابل كلمة السر. فمثلاً حرف "A" أول مرة يصير "D"، ومرة ثانية يصير "K". هالشي خلى كسر الشيفرة صعب جداً لقرون، لحد ما جاء العالم كاسيسكي وكسرها بتحليل تكرار الأحرف. أتقن هالمبدأ، ورح تفهم كيف التشفير الحديث (زي HTTPS و Wi-Fi) بيحمي بياناتك اليوم.
➖كيف بيصير التشفير برمجياً؟ (كود بايثون بسيط لتشفير رسالة):
# تشفير بسيط باستخدام طريقة الإزاحة (Caesar) كبداية للفهم
def encrypt_message(text, shift):
    encrypted = ""
    for char in text:
        if char.isalpha():
            shifted = chr(ord(char) + shift)
            encrypted += shifted
        else:
            encrypted += char
    return encrypted

message = "HELLO"
print("الرسالة الأصلية:", message)
print("الرسالة المشفرة:", encrypt_message(message, 3)) # النتيجة: KHOOR
  
🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات لتعلم التشفير والأمن:
1-Computerphile (بيشرحوا التشفير والخوارزميات برسمات وأسلوب عبقري).
رابط القناة اليوتيوب
رابط الدورة التدريبية
2-Neso Academy (شرح أكاديمي عميق جداً للخوارزميات).
رابط الدورة التدريبية
3-Elzero Web School (عنده فيديوهات رائعة عن مفاهيم الحماية بالويب).
رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-المرجع: Wikipedia - Vigenère cipher (فيها تاريخ الخوارزمية وطريقة عملها الرياضية).
رابط موقع المرجع
2-موقع مساعد: CryptoHack (موقع خرافي لتتدرب على فك التشفير كأنك بلعبة).
رابط موقع التدريبي
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤3🥰3🔥2🕊1👌1😍1💯1🍓1👨‍💻1😘1
156 views
Takween Team - فريق تكوين البرمجي
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم الثامن:
التشفير المتقدم (S-DES) ولغة الآلة 🤖

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
أهلاً بالوحوش! مبارح حكينا عن التشفير القديم، اليوم رح نحكي كيف الكمبيوترات بتشفر البيانات.
الكمبيوتر ما بيفهم حروف، بيفهم (0 و 1). خوارزمية مثل S-DES (النسخة المبسطة من خوارزمية DES) (Simplified - Data Encryption Standard) بتشتغل على مبدأ إنها تمسك هالأصفار والوحدات، وتقسمهم، وتبدل أماكنهم، وتعمل بينهم عمليات منطقية (مثل XOR) وتدمجهم مع مفتاح التشفير عشان تطلع بنتيجة مستحيل تنفك بدون المفتاح. مع أن S-DES صغيرة وقديمة وما بتستخدم بالواقع، تعلمها ممتاز عشان تفهم قلب التشفير الحديث. نفس الفكرة بالضبط بتشتغل في تقنيات الـ Wi-Fi (WPA2/WPA3) والمواقع المشفرة (HTTPS).. الفرق إنهم يستخدموا خوارزميات أعقد بمراحل وأرقام أضخم. أتقن هالمبدأ، وتكون فهمت ليش بياناتك آمنة (أو مش آمنة) حول العالم.
✅مثال برمجي على عملية الـ XOR بالبايثون (قلب التشفير الحديث):
# عملية XOR المنطقية: إذا اختلفوا النتيجة 1، إذا تشابهوا النتيجة 0
bit_1 = 0b1010  # الرقم الأول بالثنائي
bit_2 = 0b1100  # الرقم الثاني بالثنائي
result = bit_1 ^ bit_2
print("نتيجة XOR هي:", bin(result)) # النتيجة: 0b0110

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات للتعمق بالخوارزميات:
1-Gate Smashers (بيشرحوا الخوارزميات المعقدة مثل DES و AES ببساطة رهيبة).
رابط قناة اليوتيوب
2-Professor Messer (ممتاز جداً لشهادات السيكيوريتي).
رابط قناة اليوتيوب
3-Neso Academy (نرجع لهم لأن شرحهم للـ S-DES يعتبر مرجع).
رابط قناة اليوتيوب 
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-موقع مساعد: GeeksforGeeks - S-DES (شرح نصي مع أمثلة لكل خطوة بخوارزمية S-DES).
رابط موقع المرجع
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍3❤2🍓2🕊1🥰1👌1😍1💯1👨‍💻1
233 views
Takween Team - فريق تكوين البرمجي
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم التاسع:
من وين أبدأ بالأمن السيبراني؟ (مسار وشهادات) 🎓

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، كثير بتجيني أسئلة: "حابب أدخل أمن سيبراني بس ضايع!".
المجال هذا ممتع جداً بس بيحتاج تأسيس صح. قبل ما تفكر بأي شهادة، لازم تكون فاهم الشبكات (IP، DNS، والبروتوكولات)، وأنظمة التشغيل (خصوصاً Linux)، وأساسيات البرمجة (زي Python و SQL). المهارات هذي هي سلاحك الأساسي.
ولأن السوق كل يوم بصير أوسع، ما في أحسن من إنك تبدأ بشهادات معتمدة تعطيك الأساسيات وتخلي الـ CV تبعك قوي. فيه شهادات ممتازة للمبتدئين، وكل وحدة بتفتحلك باب معين:
1-CompTIA Security+: من أشهر الشهادات وأكثرها طلباً، وبتغطي أساسيات الأمن مثل الشبكات وإدارة المخاطر.
2-ISC2 Certified in Cybersecurity (CC): شهادة جديدة نوعاً ما من الجهة المانحة لشهادة CISSP، ومصممة خصيصاً للذين لا يمتلكون خبرة سابقة، كبداية ممتازة لطريق احترافي طويل.
3-Google Cybersecurity Certificate: شهادة تطبيقية على منصة Coursera، بتغطي مواضيع عملية وتعتبر خطوة أولى ممتازة لمن بدايته مطلقة.
4-Certified Ethical Hacker (CEH): لمن بدو يتخصص بالاختراق الأخلاقي، رح تتعلم كيف تفكر مثل الهاكر وتبني دفاعات أقوى.
أبداً بواحدة تناسب مستواك، وطبق اللي بتتعلمه على أرض الواقع. العالم بحاجة لأمنه، ويمكن تكون أنت الشخص الصح للمهمة.
➖أقوى كورسين لتبدأ فيهم فوراً (مجانية وتعتبر كنز):
1-مسار Introduction to Cyber Security من منصة  Cisco Networking Academy (NetAcad): ممتاز جداً لتبني ثقافة أمنية وتفهم المصطلحات باللغة العربية و الانجليزية.
رابط موقع الدورة
2-مسار Introduction to Cyber Security من منصة إدراك (Edraak): ممتاز جداً لتبني ثقافة أمنية وتفهم المصطلحات باللغة العربية.
رابط موقع الدورة
3-كورس Cybersecurity Fundamentals من منصة IBM SkillsBuild: هذا الكورس رح ينقلك لمستوى احترافي ويعطيك شهادة قوية جداً من شركة عملاقة مثل IBM.
رابط موقع الدورة
🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات باليوتيوب لتوجيهك بالسيكيوريتي:
1-سيف مخارزة (Cyber In Arabic) (أفضل موجه عربي بمجال الهاكينج الأخلاقي).
رابط قناة اليوتيوب
2-David Bombal (مقابلات وشروحات وخطط دراسية مع أقوى الهاكرز بالعالم).
رابط قناة اليوتيوب
3-NetworkChuck (عنده سلسلة كاملة لبداية الهاكينج الأخلاقي).
رابط قناة اليوتيوب
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤3🔥3🥰2👌2🕊1💯1🍓1
122 views
Takween Team - فريق تكوين البرمجي
يسعد مساكون جميعا ،حابين نوفر عليكون تعب وجهد البحث في القناة فرح نقدم بعد كل اسبوع مننشر فيو ⬇️
فهرس الاسبوع الثاني – من اليوم 6 وحتى 9  في معسكر ال 30 يوم تقني

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
قائمة بالمنشورات الخاصة بالأسبوع الأول بالمعسكر،تحوي:
6-Network-OSI(7/4/2026)
🟤رابط المنشور
خلاصة استراتيجية لليوم السادس(7/4/2026)
🟤رابط المنشور
7-Cryptography-Vigenère Cipher (8/4/2026)
🟤رابط المنشور
8-Cryptography-S-DES(9/4/2026)
🟤رابط المنشور
9-Cybersecurity(11/4/2026)
🟤رابط المنشور
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤3👍3🍓2🕊1🥰1👌1😍1💯1
100 views
Takween Team - فريق تكوين البرمجي
الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم العاشر:
الفخامة بالتصميم (UI/UX) - خط "Cairo" وسر الجمال   

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
أهلاً بالفنانين! اليوم رح نطلع من الأكواد المعقدة وندخل بعالم الجمال.
كثير مبرمجين بيعملوا مواقع شغالة 100% بس شكلها "ميت". سر التصميم الاحترافي (Luxurious Design) بيعتمد على 3 أشياء: المساحات البيضاء (لا تلزق العناصر ببعض)، التباين بالألوان، واختيار الخط المناسب. خط مثل "Cairo" بيعطي طابع فخم واحترافي ورسمي جداً للمواقع العربية.
بس هاد مش كله! العين البشرية بتحكم على التصميم خلال ثواني معدودة. لهيك لازم تهتم بـ 3 أمور إضافية:
1-التسلسل الهرمي البصري (Visual Hierarchy): خلي العناصر الأهم (مثل عنوان رئيسي أو زر شراء) تكون أكبر أو بلون مختلف عشان تلفت النظر أولاً.
2-الظلال والزوايا الناعمة: إضافة ظل خفيف (box-shadow) أو زوايا مدورة (border-radius) للأزرار والبطاقات تخلي التصميم يطلع "حديث" و"نظيف".
3-الاستجابة (Responsiveness): التصميم الفخم لازم يضل فخم على الموبايل كمان. اختبر موقعك على كل الشاشات قبل ما تنشره.
تذكر: المحتوى هو الملك، لكن التصميم الجيد هو اللي يخلّي الزائر يثق في محتواك ويقرأه.
➖كيف تضيف خط Cairo وتعمل تأثير فخم بالـ CSS؟
/* استيراد الخط من جوجل */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
body {
    font-family: 'Cairo', sans-serif;
    background-color: #0f172a; /* خلفية داكنة فخمة */
    color: #f8fafc;
}
.luxury-card {
    background: rgba(255, 255, 255, 0.05); /* تأثير زجاجي شفاف */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات لتتعلم أسرار الـ UI/UX:
1-Gary Simon (DesignCourse) (بيحول التصاميم البشعة لتحف فنية).
رابط قناة اليوتيوب
2-UI/UX Ali (قناة عربية رائعة لشرح قواعد التصميم).
رابط قناة اليوتيوب
3-Flux Academy (احترافية عالية بتصميم المواقع الحديثة).
رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-المرجع للخطوط: Google Fonts (ابحث عن Cairo وجربه).
رابط الموقع
2-موقع للإلهام: Dribbble (تغذية بصرية لأفخم التصاميم بالعالم).
رابط الموقع
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
🕊4👍3🔥3❤2🥰2💯1🍓1
124 views
Takween Team - فريق تكوين البرمجي
الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم الحادي عشر:
ضيف الحياة لموقعك مع (Framer Motion) ✨

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
مساكم حركات!
بما إننا تكلمنا عن الفخامة، مستحيل موقعك يكون احترافي بعام 2026 بدون ما يكون فيه (Animations) ناعمة. إذا كنت بتستخدم React، في مكتبة عظيمة اسمها Framer Motion بتخليك تعمل حركات خرافية بأسطر قليلة جداً وبأداء عالي ما بيعلق المتصفح.
فكرتها إنك بتضيف motion. قدام أي عنصر HTML عادي، وبتحدد ببساطة animate شو يصير فيه. مثلاً:
<motion.div animate={{x:100}}/>                 
رح يحرك العنصر 100 بكسل.
1-whileHover و whileTap يضيفون حركات تفاعلية عند المرور أو الضغط، وبتقدر تستخدم spring physics عشان تكون الحركة طبيعية أكثر.
· خاصية layout بتخلي العناصر تغير حجمها أو مكانها بحركة سلسة أوتوماتيكية.
2-AnimatePresence بتدير حركات الخروج، ضروري لمن العنصر يختفي من الشاشة عشان ما يختفي فجأة.
بس نصيحة، عشان ما يعلق عندك: خلي حركاتك بس على خواص مثل x، y، scale و opacity عشان المتصفح يشتغلها على كرت الشاشة (GPU) بسلاسة، وتجنب width و height و top و left لأنها تثقل المتصفح.
ومعلومة جديدة، الاسم تغير لـ Motion بس هي هي نفس المكتبة، ومتاحة على NPM. جربها، رح تغير نظرتك للحركات بالكامل.
➖كود React يخلي العنصر يظهر بنعومة (Fade In) باستخدام Framer Motion:
import { motion } from 'framer-motion';
function AnimatedBox() {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 50 }} // البداية: شفاف ونازل لتحت
      animate={{ opacity: 1, y: 0 }}  // النهاية: ظاهر ومكانه الطبيعي
      transition={{ duration: 0.8 }}   // مدة الحركة
      style={{ background: '#3b82f6', padding: '20px', borderRadius: '10px' }}
    >
      مرحباً بكم في عالم الـ Animation الفخم! 🚀
    </motion.div>
  );
}

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أفضل 3 قنوات لاحتراف Framer Motion:
1-Net Ninja (عنده بلاي ليست كاملة لـ Framer Motion خطوة بخطوة).
رابط قناة اليوتيوب
2-PedroTech (شرح عملي ومباشر على مشاريع حقيقية).
رابط قناة اليوتيوب
3-Web Dev Simplified (فيديو واحد بيلخصلك أقوى الحركات).
رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-المرجع الرسمي: Framer Motion Docs (الدومكيومنتيشن تبعهم قطعة فنية).
رابط الموقع
2-موقع مساعد: CodeSandbox (ممتاز لتجربة أكواد الريأكت مباشرة).
رابط الموقع
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
Please open Telegram to view this post
VIEW IN TELEGRAM
💯4👍3❤2😍2🕊1🔥1🥰1👌1🍓1
253 views