وفـاء | Frontend

اختبر نفسك في CSS بهذه الأسئلة 👏🏻👏🏻 1- ايش الفرق بين inline و internal و external 2- ايش الفرق بين selector و combinator 3- ايش الفرق بين padding و margin 4- ايش الفرق بين border و outline 5- ايش الفرق بين content-box و border-box 6- ايش الفرق بين display:none و visibility:hidden 7- ايش الفرق بين align-items و justify-content 8 - ايش الفرق بين box-shadow و drop-shadow 9- ايش الفرق بين px و em و rem 10- ايش الفرق بين pseudo-elements و pseudo-classes —

5 مواقع لقوالب HTML مجانية ومدفوعة 🔥 تختصر وقتك وجهدك، وممكن تستلهم منها أفكار وتنفذها بنفسك 👏🏻👏🏻 1️⃣ https://freehtml5.co/ 2️⃣ https://www.free-css.com/ 3️⃣ https://graygrids.com/ 4️⃣ https://html5up.net/ 5️⃣ https://templatemo.com/

بمناسبة مباراة الأهلي والاتحاد 😁🤩 تحدّي Frontend رهييب 🔥🔥 • المطلوب: تحويل 2 واجهات على الأقل لكود Frontend، مع إضافة لمساتك الفنانة ❤️‍🔥 • مدّة التنفيذ: 5 أيام • اللغات والتقنيات: مفتوح https://twitter.com/b_wffa/status/1710380692612219099?t=roNQPDYVwThkDlR7zaHWPw&s=19

🪂 خارطة الطريق لتطوير ثيمات متاجر سلة 🪂🔥 تشمــل: - المهارات المطلوبة - خطوات التسجيل وبناء الثيم - مصادر توجيهية وتعليمية [ مقالات وفيديو ] - قروب تجمع مطورين سلة 📍 احصائية بسيطة: - عدد المتاجر النشطة في سلة أكثر من 36 ألف متجر - عدد الثيمات في متجر الثيمات 24 ثيم فقط والله فرصة رهيبة لأي مطور Frontend 🔥🔥 : : أولًا: المهارات المطلوبة إتقان 3 لغات أساسية فقط: HTML و CSS و Javascript ثانيــًا: خطوات التسجيل وبناء الثيم 1️⃣ إنشاء حساب في منصة شركاء سلة ( اضغط هنــا ) 2️⃣ الإطلاع على Figma Template اللي موفرته سلة ( اضغط هنـــا )، وراح يوضح لك: - الصفحات والعناصر اللي لازم تطوّرها بالثيم - الصفحات والعناصر اللي يكون تطويرها اختياري بالإضافة إلى نقاط ثانية تهمك 👏🏻👏🏻 3️⃣ من خلال منصة شركاء سلة، ومن القائمة اختار ثيماتي ثم إنشاء ثيم جديد. حيطلب منك صلاحية الوصول لحسابك Github وبعده حتلاقي السورس كود لثيم رائد واللي راح تعتمد عليه في تطوير الثيم الجديد 🔥 ثالثـــًا: مصادر تهمك في رحلة تطوير الثيم 1️⃣ مدونة سلة فيها مقالات راح تفيدك جدًا في تطوير الثيم ( اضغط هنـــا ) 2️⃣ نظرة عامة عن تصميم الثيم والشروط الواجب توفرها فيه ( اضغط هنـــا ) 3️⃣ قائمة تشغيل كاملــة من سلة يشرحو لك فيها كيف تبني الثيم خطوة بخطوة 👌🏻 ( اضغط هنـــا ) 4️⃣ الـ Twilight Documentation ( اضغط هنـــا ) 5️⃣ قروب تليغرام لمطوري سلة، في حال واجهتك مشكلة أو استفسار معين ( اضغط هنـــا ) وآخر خطوة 🪂 تسعير الثيم وإرسال طلب النشر وراح تتم مراجعته بواسطة فريق سلة ولو كان تمام يُعرض في متجر الثيمات مباشرة 🔥🔥 وفيه كمان شي رهيب جدًا بخصوص الثيمات 😍😍 تقدر تطوّر ثيم خاص لمتجر معين بدون ما ينعرض في متجر الثيمات، وهنا تفاصيل أكثر بهذا الخصوص ( اضغط هنـــا ) : :

موقع عجيييب يحوّل لك أي صورة إلى SVG 😍🔥 https://vectorizer.ai

‏7 أفكار لمشاريع Frontend للمبتدئين، نفذّها وأضفها لملف أعمالك 😍⚡️⚡️ ‏1⃣ صفحة هبوط ( Landing Page ) - فيديوهات تساعدك بتنفيذها 🔥👇🏻 🔗 https://youtu.be/XlxhEy4pAI0?si=xbaGaaH7dgY_1CBR 🔗 https://youtu.be/RaITAxEdTDY?si=GA7TYjBfiLnhSFwc ‏2⃣ آلة حاسبة ( Calculator ) - فيديوهات تساعدك بتنفيذها 🔥 👇🏻 🔗 https://youtu.be/BuZtAqk5LIY?si=A3iVOw1bwcKmaPHU 🔗 https://youtu.be/_npnL4Gyg_o?si=KgeLZHPrerp24vOn ‏3⃣ اختبار قصير ( Quiz ) - فيديوهات تساعدك بتنفيذه 🔥 👇🏻 🔗 https://youtu.be/CqddbIrEM5I?si=IgTwTLP6ZKiMwpuM 🔗 https://youtu.be/WUBhpSRS_fk?si=UjbvprdsbMuGhr70 🔗 https://youtu.be/T5QyLcmcMJ4?si=LDYxXGiOmBiqqCFp ‏4⃣ موقع شخصي ( Portfolio ) - فيديوهات تساعدك بتنفيذه 🔥 👇🏻 🔗 https://youtu.be/0YFrGy_mzjY?si=1RrMVhhXEkZtGAUt 🔗 https://youtu.be/fOSpqwM_ZtQ?si=KPf-UgVrUdb7XF2s ‏5⃣ متجر إلكتروني بسيط - فيديوهات تساعدك بتنفيذه 🔥 👇🏻 🔗 https://youtu.be/MJUssi2c6Ls?si=_PMvAB_olTHGVvUN 🔗 https://youtu.be/cLOT0APQzDs?si=wjy9tFStUn_H27tt ‏6⃣ تطبيق الطقس - فيديوهات تساعدك بتنفيذه 🔥👇🏻 🔗 https://youtu.be/NIrxEz7ifu8?si=HNmz776u-F7fZnCq 🔗 https://youtu.be/w0tEXBeQ2jQ?si=3wEeZ6GX_0yUcqqf ‏7⃣ مولّد أو قارئ QR Code - فيديوهات تساعدك بتنفيذه 🔥 👇🏻 🔗 https://youtu.be/TEGCjBNgL70?si=74ZF7k2aEVvZaD9I 🔗 https://youtu.be/pv5K28zVepE?si=ngNbQsNOB6b15P65

ورينا آخر مشروع Frontend عملته! 🤩❤️‍🔥

عُدنااا 🤩🤩🤩

6 كورسات عربية رهيبــة لتعلّم Git/Github 😍😍 1️⃣ من قناة الزيرو ويب سكول https://www.youtube.com/playlist?list=PLDoPjvoNmBAw4eOj58MZPakHjaO3frVMF 2️⃣ من قناة أحمد محمدي https://www.youtube.com/playlist?list=PLqPejUavRNTXejD5npdmFbe6NU6dTJLhW 3️⃣ من أكاديمية ترميز https://www.youtube.com/playlist?list=PLYyqC4bNbCIeCHLTRtwdLpQvle_zIavZ- 4️⃣ من قناة المهندس محمد السيد https://www.youtube.com/playlist?list=PLXsBti0EwQ6yLQldACw0V5fIpgsyPg539 5️⃣ من قناة غريب الشيخ https://www.youtube.com/watch?v=fDkR0TDR9dI 6️⃣ من قناة سلطان القحطاني https://www.youtube.com/watch?v=VgsMFFheKTs

من المواقع الرهيبة جدًا للأيقونات 😍🔥🔥 - يحتوي أكثر من 4300 أيقونة - مجاني - وتقدر تستخدمها بصيغة png و SVG الرابط: https://tabler-icons.io/

ورينا موقعك الشخصي أو صفحة أعمالك 😍

‏المسـار الثاني: تصميم المواقع والتطبيقات بدون كود 😍🚀🚀 1⃣ تابع حساب صُنع في الرياض، ينشر محتوى مميز بخصوص البرمجة بدون كود ( ‎اضغط هنا ) 🔥 ‌‎2⃣ تعلّم HTML من هنا: https://2u.pw/Z8yBJPT ** خطوة غير إجبارية لكنها تخليك تبدع جدًا في حال تعلمتها * ‌‎3⃣ تعلّم CSS من هنا: https://2u.pw/RnXbhjY ** خطوة غير إجبارية لكنها تخليك تبدع جدًا في حال تعلمتها * ‌‎4⃣ تعلّم Webflow لتصميم المواقع من هنا: https://2u.pw/OxOqvpq أو هنا: https://2u.pw/YRWCYMq ‌‎5⃣ تعلّم Google Appshet لتصميم التطبيقات من هنا: https://2u.pw/eD2vsjE أو هنا: https://2u.pw/9VcvDWq 6⃣ تعلّم ووردبريس من هنا: https://2u.pw/vWQlI89 أو هنا: https://2u.pw/KwTgQlz ‌‎ 7⃣ تعلّم التعامل مع الاستضافات وحجز الدومين من هنا: https://2u.pw/z9KY20F ‌‎8⃣ اعمل تطبيقات ومشاريع على كل ما سبق 😍🚀🚀

خطة لتعلّم الـ Frontend مبسّطة ومختصرة للإجازة 😍🔥 تشمل مسارين: 🚀 بناء الواجهات بكود 🚀 بناء المواقع والتطبيقات بدون كود : : المسـار الأول: تعلّم الـ Frontend بكود 👏🏻🔥 ‏1⃣ تعلّم HTML من هنا: https://2u.pw/V5GW6 أو هنا: https://2u.pw/Z8yBJPT ‏2⃣ تعلّم CSS من هنا: https://2u.pw/7axDh أو هنا: https://2u.pw/RnXbhjY 3⃣ تعلّم Bootstrap من هنا: https://2u.pw/NFyv5sz ‏4⃣ تعلّم Git/Github من هنا: https://2u.pw/SUMiGQr أو هنا: https://2u.pw/ujwtN2O 5⃣ تعلّم أساسيات جافاسكريبت من هنا: https://2u.pw/yPDx4j1 أو هنا: https://2u.pw/al4v2j4 ‏6⃣ تعلّم التعامل مع الاستضافات وحجز الدومين من هنا: https://2u.pw/z9KY20F ‏7⃣ اعمل تطبيقات ومشاريع على كل ما سبق وارفعها لحسابك Github 🔥🔥 ..

صنع في الرياض | Built in Riyadh حساب متخصص في البرمجة بدون كود.. شروحات، مسابقات وتحديات، ومعلومات متجددة 🌟 تابعوه: https://twitter.com/DesignBIR .

4 قنوات لتطبيق مشاريع Frontend رهيبة ومناسبة للمبتدئين 😍🔥 1:: Mr. Web Designer https://www.youtube.com/@MrWebDesignerAnas/playlists 2:: Coding Market https://www.youtube.com/@CodingMarket/videos 3:: Online Tutorials https://www.youtube.com/@OnlineTutorialsYT/videos 4:: EGATOR https://www.youtube.com/@EGATORTUTORIALS/playlists .

خطوات تعلم HTML و CSS بالترتيب: 🔥 1. تعلم HTML وخذ وقتك 2. تعلم أساسيات CSS وخذ وقتك 3. تعلم التصميم المتجاوب Responsive design 4. تعلم Media queries 5. تعلم Grid / Flexbox 6. تعلم واحد من إطارات عمل CSS مثلًا Bootsrap 7. تعلم Sass والباقي راح تتعلمه تدريجيًا بالممارسـة 🚀