وفـاء | Frontend

لو أنت طالب ومهتم بالتدريب التعاوني لا تفووتك منصة إنطلاق.. يجمعوا لك الجهات المتاح عندهم التدريب بمكان واحد وتتحدّث بشكل مستمر 😍😍

https://intelaq.net/home

—

كل عاام وأنتم بخير 🥳🤍🤍

5 ميزات في CSS رهييبــــه ولازم تعرفهم 😍😍

https://www.youtube.com/watch?v=oDDcZhKqUxQ

—

‏كويز سريييع 🔥

ايش هو inset في CSS؟ ومتى نستخدمه؟
__

أكثر من 4900 أيقونة 😍😍

- مجانـــاً
- وتقدر تحملها بصيغة PNG و SVG

https://tabler.io/icons

—

الموقع هذا رهيب للـ Loaders: 😍🔥
- يتيح لك تعديلها وتخصيصها
- يتيح لك تحميلها على شكل: SVG, Gif, PNG أو كود CSS

https://loading.io/spinner/

( الموقع مجاني ومدفوع )

—

https://twitter.com/b_wffa/status/1741525526303416448?t=cSKHWNBKZh7rsYtix0shIA&s=19

من الشغلات الرهيبـــة في CSS:
:has()
:not()

ولو أول مره تسمع عنهم تابع الشروحات هذه 😍👇🏻👇🏻


1️⃣ شرح :has بالأمثلــة:

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

https://youtube.com/watch?v=L0AniuYrgKY


2️⃣ شرح :not بالأمثلــة:

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

https://youtube.com/watch?v=QaGtjayXviQ

—

4 مصادر عربية رهيبـة لتعلّم Tailwind CSS 👏🏻🔥


1️⃣ https://www.youtube.com/watch?v=Pk3hhCJG2Dk&t=240s


2️⃣ https://www.youtube.com/playlist?list=PLxbVBWjVdAEjmn2KbE1886vVkPv1Iu67J


3️⃣ https://www.youtube.com/playlist?list=PLXgJ7cArk9uTx9GXay5yOcOhs-Ys_WygZ


4️⃣ https://www.youtube.com/playlist?list=PLfDx4cQoUNOY1nRXPd3o03lVQzpppY9xe

—

100 مشروع باستخدام HTML, CSS, JS 😍😍

- مجانًا
- مناسب للمبتدئين
- متاح السورس كود

https://100jsprojects.com

—

أكثر 3 أماكن جاتني منها فرص وظيفية أو تعاون أو عمل حر:

1- لينكد ان
2- حسابي تويتر
3- علاقات العمل

👇🏻👇🏻👇🏻

1️⃣ لينكد ان

رغم إني ما كنت متفاعلة كثير لكن كنت مكملة البروفايل صح، كمان كنت أحاول أرد على منشورات الناس وأتفاعل معاهم خاصة اللي عند اسمهم HR 😂

ما كنت مهتمة فيه بدرجة كبيرة مع ذلك ما كان يمر أسبوع بدون رسائل عروض العمل وبعضها من جهات معروفة.

شرح لينكد ان وكيف تعمل حساب احترافي:

🔗 https://youtube.com/watch?v=7JysIkTyccs&t=6s

🔗 https://youtube.com/watch?v=FiGKmTy9m4o


بعض الأسباب اللي تمنع حصولك على فرص في لينكد ان:

https://www.youtube.com/watch?v=N3MFfweKwdk&t=3s


قائمة تشغيل كاملة لفيديوهات مفيدة من مستشار التوظيف عبدالعزيز التويجري عن لينكد ان:

https://www.youtube.com/playlist?list=PL_1ycA3vKm01swF-pU4w_IlbvdsSacsdl

:
:

2️⃣ حسابي تويتر

هدفي من إنشاء الحساب ( بالبداية ) كان الحصول على فرص عملية، وركزت على محتوى يخدم هذا الهدف، فلا تخلط بين حسابك الشخصي وحسابك الرسمي ابدًا خاصة بالبداية عشان ما تفوت على نفسك فرص.

نقاط مهمة لازم تراعيها بحسابك:

- يكون باسمك الصريح
- لخص بالبايو مهاراتك وأفضل لو كان بالعربي ولا تنسى تذكر فيه طريقة التواصل مثلًا خاص أو واتساب
- بالرابط أضف صفحة linktree تشمل رابط التواصل واتساب، ملف أعمالك، وأي رابط مفيد
- تابع ناس بمجالك وخلي تغريداتك وردودك مفيدة
- خليك موجود ومتفاعل دائمًا

وتجنب الكلام عن 3 أشياء في حسابك الرسمي:
- الأديان
- السياسة
- الكورة
لأن الكلام عنها راح يسحبك لنقاشات طويلة تغير مسار حسابك تمامًا

:
:

3️⃣ علاقات العمل

خليك مرن ولا تكون شخص صعب التعامل في أي مكان تعمل فيه، حتى لو قررت تمشي امشي بسمعة طيبة وأنت مؤدي عملك على أكمل وجه

الشي هذا خلى بعض الأشخاص اللي سبق اني اشتغلت معاهم يرشحوني أو يرسلو لي فرص جديدة مهتمة فيها.

إضافات Chrome رهيبة ومهمة لمطوّر الـ Frontend:

- معرفة الألوان: ColorZilla
- تصوير كامل الشاشة: GoFullPage
- عرض تنسيق CSS للعنصر: CSSViewer
- تحميل كل الصور بالصفحة: Image Downloader
- تحميل كل الـ SVGs بالصفحة: svg-grabber
- معرفة التقنيات المستخدمة بالموقع: BuiltWith

ايش كمان؟ 🤔

تحدّي Frontend بسيييط 🇸🇦🇵🇸

- المطلوب: تحويل الواجهات في الصورة ( أو واحدة منها ) لكود Frontend، مع إضافة لمساتك الفنانة 🔥
- مدّة التنفيذ: 3 أيام
- اللغات والتقنيات: مفتوح، سواء ويب أو موبايل


https://twitter.com/b_wffa/status/1727742456957985104?t=Q_QpzEiDZWoTd58M-jM2vQ&s=19

__

من أمتع وأكثر المشاريع اللي تقوي مهاراتك بالـ Frontend هي الداشبورد 🔥🔥

وهنا فيديوهات تساعدك بتنفيذها 😍👇🏻


⭐️ قائمة تشغيل كاملة من مهندس أسامة الزيرو 😍😍

https://www.youtube.com/playlist?list=PLDoPjvoNmBAyGaRGzPVZCkYx5L7Mo9Tbh



⭐️ باستخدام HTML و CSS فقط 😍😍

https://www.youtube.com/watch?v=CgCPP2KO5ds&t=288s



⭐️ باستخدام HTML / CSS / JS بنظام Dark & Light 🔥

https://www.youtube.com/watch?v=BOF79TAIkYQ



⭐️ بدون استخدام أي CSS frameworks للي حابين يتقنوا الـ Grid 😍🔥

https://www.youtube.com/watch?v=UALn3klXFBM&t=4132s


—

📩 من الخاص

شركة تبحث عن مطور Frontend سعودي بخبرة 3 سنوات فأكثر، بالرياض ومتاح العمل عن بعد

المهارات:
جافا سكربت/تايب سكربت، ومتمكن من رياكت بشكل جيد
+ يُفضل يعرف ux research / design

لو مهتم أضف أعمالك تحت التغريدة 👏🏻👏🏻

https://x.com/b_wffa/status/1723187538200813676?s=20

—

أفكار رهيبة واحترافية للحدود باستخدام HTML / CSS / JS 😍😍

+ الكود 🔥

https://x.com/b_wffa/status/1721218872878014690?s=20

—

50 مشروع لـ 50 يوم..
باستخدام HTML / CSS / JS 🚀🔥🔥

https://github.com/bradtraversy/50projects50days

—

من أكثر التمارين اللي تقوّي مهاراتك بالـ Frontend هو عمل نسخ (Clone) لواجهات المواقع ✨

هنا 5 فيديوهات لتقليد المواقع المشهورة باستخدام HTML / CSS/ JS فقط 🔥🔥


1️⃣ بناء واجهة موقع تويتر باستخدام HTML/ CSS
https://www.youtube.com/watch?v=hQPXvGgXoqQ&t=5798s

2️⃣ بناء واجهة موقع نتفليكس باستخدام HTML/ CSS
https://www.youtube.com/watch?v=FdvlJikksdA


3️⃣ بناء واجهة موقع مايكروسوفت باستخدام HTML/ CSS
https://www.youtube.com/watch?v=uKgn-To1C4Q


4️⃣ بناء واجهة موقع يوتيوب باستخدام HTML/ CSS
https://www.youtube.com/watch?v=Hnm3BP-tjD8


5️⃣ بناء واجهة موقع تسلا باستخدام HTML/ CSS/ JS
https://www.youtube.com/watch?v=afaqr875gUE&t=1s

—

لو مهتم بـ CSS لا تفوتك هذه القناة
ومتأكدة راح تنقلك لمستوى رهيب ما تتخيله 🔥🚀

https://www.youtube.com/@KevinPowell

—

موقع عجيييب 🤯
ترسم رسم عشوائي لأي أيقونة تحتاجها ويقترح لك أيقونات مشابهة للي رسمته تحملها بثواني 🔥🔥

https://www.autodraw.com/

—