وفـاء | Frontend

📮 | من الخاص ‏احتاج مبرمج رياكت بالرياض (بارت تايم) ويكون خبره ومتمكن بالعمل مع باك اند ديفلوبر على مشروع فيه تعقيدات مالية. لو مهتم أضف تعليق للتغريدة 👇🏻 https://twitter.com/b_wffa/status/1626851986623561730?t=P72TlGLSN3gqMNn79GoquQ&s=19

التحدي هذه المرة بسييـــط 🤏🏻🥹 وبالتعاون مع المبدعة رغد 🤩🤍🤍 • المطلوب: تحويل الصورة لكود Frontend مع إضافة لمساتك الفنانة على التصميم أو الأنيميشن 😍⚡️ • مدة التنفيذ: 5 أيام • اللغات والتقنيات: مفتوح الصور المستخدمة في التصميم: https://dribbble.com/shots/20666330-foundation-day [ التحدي في تويتر ] 🔥 https://twitter.com/b_wffa

10 مشاريع Frontend رهيبة للتدريب وتطوير مهارتك.. باستخدام HTML و CSS فقط 👏🏻⚡️ 1:: بناء موقع بخلفية فيديو https://www.youtube.com/watch?v=8MgpE2DTTKA 2:: بناء صفحة هبوط احترافية https://www.youtube.com/watch?v=X1dz0xRbSJc 3:: بناء صفحة دخول وتسجيل احترافية https://www.youtube.com/watch?v=cxm5bCCa9OA&t=6s 4:: صفحة هبوط بصورة خلفية بكامل الشاشة https://www.youtube.com/watch?v=hVdTQWASliE 5:: متجر إلكتروني https://www.youtube.com/watch?v=yQimoqo0-7g 6:: بناء موقع وكالة إبداعية https://www.youtube.com/watch?v=lvYnfMOUOJY 7:: بناء موقع زجاجي https://www.youtube.com/watch?v=O7WbVj5apxU 8:: بناء سكشن فريق العمل بطريقة إبداعية https://www.youtube.com/watch?v=Q22Tli-D4mw 9:: صفحة هبوط لمنتج واحد https://www.youtube.com/watch?v=61R5kn_kYwY 10:: صفحة الأسعار أو الباقات https://www.youtube.com/watch?v=SWyuQMCTxCQ

خطة تعلّم لكل لغة من لغات الـ Frontend من أكاديمية الزيرو.. رهيبة جدًا 🥹👇🏻 1️⃣ خطة دراسة لغة HTML https://elzero.org/study/html-2021-study-plan/ 2️⃣ خطة دراسة لغة CSS https://elzero.org/study/css-2021-study-plan/ 3️⃣ خطة دراسة لغة جافاسكريبت https://elzero.org/study/javascript-bootcamp-2021-study-plan/ 4️⃣ خطة دراسة لغة تايب سكريبت https://elzero.org/study/typescript-study-plan/ 5️⃣ خطة دراسة Sass https://elzero.org/study/sass-2021-study-plan/

15 فكرة إبداعية للعناوين باستخدام HTML و CSS فقط ( مع الكود ) 🤩🤩 1:: 🔗 https://codepen.io/maicodes/pen/XXjWwx 2:: 🔗 https://codepen.io/yemon/pen/pWoROm 3:: 🔗 https://codepen.io/dperuo/pen/XWdeoW 4:: 🔗 https://codepen.io/mvaneijgen/pen/LpjQYZ 5:: 🔗 https://codepen.io/aniketx27/pen/RmbNwo 6:: 🔗 https://codepen.io/sgamble/pen/xaRyMo 7:: 🔗 https://codepen.io/Chokcoco/pen/jOwEqvR 8:: 🔗 https://codepen.io/vainsan/pen/NWRaPXG 9:: 🔗 https://codepen.io/CityRay/pen/dvqLWe 10:: 🔗 https://codepen.io/RobinTreur/pen/QKjgPX 11:: 🔗 https://codepen.io/dylanjharris/pen/pjLJQa 12:: 🔗 https://codepen.io/tuckermassad/pen/ZgOGgy 13:: 🔗 https://codepen.io/pierrinho/pen/NEYmLO 14:: 🔗 https://codepen.io/sato2000/pen/KKpPXNg 15:: 🔗 https://codepen.io/Esso99/pen/XGgBGE

50 مشروع لـ 50 يوم، باستخدام HTML, CSS وجافاسكريبت 👏🏻🔥 🔗 https://github.com/bradtraversy/50projects50days

أفضل كورسات عربية لتعلّم JavaScript للمبتدئين: 🔥 1️⃣ كورس جافاسكريبت للمهندس أسامة الزيرو https://www.youtube.com/playlist?list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv 2️⃣ كورس جافاسكريبت من أكاديمية ترميز https://www.youtube.com/playlist?list=PLYyqC4bNbCIeLEjcSPO61bsGPKEvYceb0 3️⃣ كورس جافاسكريبت من قناة أتعلم في ساعة https://www.youtube.com/playlist?list=PLeWmXrh00479AIgmrP7dG0-IM8NlaHgnR 4️⃣ كورس جافاسكريبت من قناة عبدالرحمن جمال https://www.youtube.com/playlist?list=PLknwEmKsW8OuTqUDaFRBiAViDZ5uI3VcE 5️⃣ كورسات جافاسكريبت من منصة سطر المستوى الأول: https://satr.codes/courses/MxhtosVATL/view المستوى الثاني: https://satr.codes/courses/lnCDammOOq/view المستوى الثالث: https://satr.codes/courses/cKCPvecdYe/view

ألعاب رهيبة تساعدك على فهم Grid و Flexbox في CSS بشكل بسييط وممتع 🤩⚡️ 🧩 Flexbox froggy https://flexboxfroggy.com/ 🧩 Flexbox defense http://www.flexboxdefense.com/ 🧩 Knights of the Flexbox Table https://knightsoftheflexboxtable.com/ 🧩 Flex Box adventure https://codingfantasy.com/games/flexboxadventure/play 🧩 Grid garden https://cssgridgarden.com/ 🧩 Grid attack https://codingfantasy.com/games/css-grid-attack/play

موقع رهيب لفيديوهات MP4 مجانية وبدون حقوق، ممكن تستخدمها بمشاريعك 😍🔥 https://coverr.co/

5 مواقع رهيبــة لخلفيات Pattern.. والحلو إنك ممكن تنسخها كـ SVG أو كود CSS 😍😍 1️⃣ https://pattern.monster/ 2️⃣ https://superdesigner.co/tools/svg-backgrounds 3️⃣ https://doodad.dev/pattern-generator/ 4️⃣ https://10015.io/tools/css-background-pattern-generator 5️⃣ https://www.magicpattern.design/tools/css-backgrounds

6 مواقع رهيبة لمطورين الـ Frontend.. توفر لك صور بدون خلفية 😍🔥 1️⃣ http://stickpng.com 2️⃣ https://freepngimg.com/ 3️⃣ https://favpng.com/ 4️⃣ pngfind.com 5️⃣ https://subpng.com 6️⃣ https://www.pngmart.com/ ولو عندك صورة محددة تبغى تزيل الخلفية منها.. استخدم هذه الأداة الرهيبة 👇🏻👇🏻 https://www.remove.bg/

7 أفكار لمشاريع Frontend للمبتدئين، نفذّها وطوّر ملف أعمالك 😍🔥 1️⃣ صفحة هبوط ( Landing Page ) - فيديوهات تساعدك بتنفيذها 🤩👇🏻 🔗 https://youtube.com/watch?v=XlxhEy4pAI0&t=92s 🔗 https://youtube.com/watch?v=RaITAxEdTDY 2️⃣ آلة حاسبة ( Calculator ) - فيديوهات تساعدك بتنفيذها 🤩👇🏻 🔗 https://youtube.com/watch?v=_npnL4Gyg_o&t=77s 🔗 https://www.youtube.com/watch?v=BuZtAqk5LIY&t=44s 3️⃣ اختبار قصير ( Quiz ) - فيديوهات تساعدك بتنفيذه 🤩👇🏻 🔗 https://youtube.com/watch?v=T5QyLcmcMJ4&t=4892s 🔗 https://youtube.com/watch?v=WUBhpSRS_fk&t=63s 🔗 https://www.youtube.com/watch?v=CqddbIrEM5I&t=18s 4️⃣ موقع شخصي ( Portfolio ) - فيديوهات تساعدك بتنفيذه 🤩👇🏻 🔗 https://youtube.com/watch?v=fOSpqwM_ZtQ&t=114s 🔗 https://www.youtube.com/watch?v=0YFrGy_mzjY&t=9s ⭐️ بالردود أسفل هذه التغريدة مواقع شخصية رهيبة، ممكن تستلهم منها أفكار جديدة 😍😍 https://twitter.com/b_wffa/status/1561004665684332544?s=20&t=RSEdNN3ugLsxOBllVq55Lg ⭐️ هذا الثريد كمان كان فيه أفكار جميلة ومختلفة 🔥 https://twitter.com/b_wffa/status/1561395816459296769?s=20&t=RSEdNN3ugLsxOBllVq55Lg 5️⃣ متجر إلكتروني بسيط - فيديوهات تساعدك بتنفيذه 🤩👇🏻 🔗 https://youtube.com/watch?v=cLOT0APQzDs&t=40s 🔗 https://www.youtube.com/watch?v=MJUssi2c6Ls&t=66s 6️⃣ تطبيق الطقس - فيديوهات تساعدك بتنفيذه 🤩👇🏻 🔗 https://youtube.com/watch?v=w0tEXBeQ2jQ&t=109s 🔗 https://www.youtube.com/watch?v=NIrxEz7ifu8&t=84s 7️⃣ مولّد أو قارئ QR Code - فيديوهات تساعدك بتنفيذه 🤩👇🏻 🔗 https://youtube.com/watch?v=pv5K28zVepE&t=69s 🔗 https://youtube.com/watch?v=TEGCjBNgL70&t=56s

( من الردود في تويتر ) ✨ ⭐️ بناء واجهة موقع فيسبوك https://www.youtube.com/watch?v=_DDGDTCQCc4 ⭐️ بناء واجهة موقع يودمي https://www.youtube.com/watch?v=ja3l6-ikzR4

من أكثر التمارين اللي تقوّي مهاراتك بالـ Frontend هو عمل نسخ (Clone) لواجهات المواقع ✨ هنا 9 فيديوهات لتقليد المواقع المشهورة باستخدام HTML / CSS/ JS فقط 😍🔥 1️⃣ بناء واجهة موقع تويتر https://www.youtube.com/watch?v=hQPXvGgXoqQ&t=5793s 2️⃣ بناء واجهة موقع نتفليكس https://www.youtube.com/watch?v=FdvlJikksdA&t=1s 3️⃣ بناء واجهة موقع خمسات https://www.youtube.com/watch?v=wGscd_NZM4s 4️⃣ بناء واجهة موقع أنغامي https://www.youtube.com/watch?v=MPcZ4Ojo3I8&t=3055s 5️⃣ بناء واجهة موقع مايكروسوفت https://www.youtube.com/watch?v=uKgn-To1C4Q 6️⃣ بناء واجهة تطبيق واتساب https://www.youtube.com/watch?v=1HQ_OtZvuak&t=1133s 7️⃣ بناء واجهة موقع يوتيوب https://www.youtube.com/watch?v=Hnm3BP-tjD8 8️⃣ بناء واجهة موقع بنترست https://www.youtube.com/watch?v=ASORsZgr4aw 9️⃣ بناء واجهة موقع تسلا https://www.youtube.com/watch?v=afaqr875gUE

فيه أكثر من طريقة لاستخدام الألوان في CSS، مثلًا: - استخدام اسم اللون Color Name - طريقة HEX - طريقة RGB و RGBA - طريقة HSL و HSLA بس ايش الفرق بينهم؟ 👇🏻👇🏻👇🏻 1️⃣ استخدام اسم اللون Color Name مثال: color:red فيه حوالي 140 لون تقدر تستخدمهم في هذه الطريقة، لكن عادةً لا نستخدم هذه الطريقة في المشاريع الفعلية لأننا نحتاج تدرجات لونية أكثر من الـ 140 لون المتاحة. تعتبر طريقة سريعة لتحديد اللون.. وتفيدك لو بتشرح شي أو اكتشاف المشاكل وغيره. 2️⃣ استخدام نظام HEX مثال: color:#FFFFFF أو color:#FFF من أكثر الطرق الشائعة لاستخدام الألوان، وممكن تستخدم بعد # عدد 3 أو 6 حروف، تشمل أرقام من 0-9 وحروف من A-F تعتمد هذه الطريقة على نظام الألوان Red Green Blue لو استخدمت بعد # عدد 3 حروف يكون معناها: - الحرف الأول درجة اللون الأحمر - الثاني اللون الأخضر - الثالث اللون الأزرق أما لو استخدمت 6 حروف راح تكون أول حرفين تمثل اللون الأحمر، وثاني حرفين للون الأخضر، وثالث حرفين للون الأزرق 3️⃣ استخدام نظام RGB مثال: rgb(204, 204, 204) تشترك مع الطريقة السابقة باعتمادها على نظام الألوان Red Green Blue بحيث تمثل القيمة الأولى درجة اللون الأحمر، والثانية درجة اللون الأخضر، والثالثة درجة اللون الأزرق. طريقة RGBA هي نفسها نظام RGB مع إضافة قيمة رابعة تمثّل درجة الشفافية، وتاخذ قيمة من 0-1 مثلًا: rgba(255, 0, 0, 0.5) 4️⃣ استخدام طريقة HSL و HSLA مثال: hsl(360, 0%, 100%) هذه الطريقة تعتمد على تحديد اللون الأساسي Hue، ونسبة تشبّع اللون Saturation، والإضاءة للون Lightness طريقة HSLA هي نفسها HSL مع إضافة قيمة رابعة تمثل درجة الشفافية وتكون بين 0-1، مثلًا: hsla(240, 100%, 50%, 0.6)

25 فكرة للنماذج ( Forms ) مع الكود باستخدام HTML, CSS, JS فقط 😍🔥 1:: https://codepen.io/FlorinPop17/pen/vPKWjd 2:: https://codepen.io/suez/pen/RpNXOR 3:: https://codepen.io/danielarlert/pen/LYNVyPL 4:: https://codepen.io/ig_design/pen/KKVQpVP 5:: https://codepen.io/joshsorosky/pen/gaaBoB 6:: https://codepen.io/designify-me/pen/qrJWpG 7:: https://codepen.io/nedev/pen/EVaGqW 8:: https://codepen.io/Mohuth/pen/QWgrPvp 9:: https://codepen.io/onlyveen/pen/QvWjeY 10:: https://codepen.io/lordgamer2354/pen/NEroLg 11:: https://codepen.io/frontendmax/pen/RazXVb 12:: https://codepen.io/chintuyadav/pen/mBaBqW 13:: https://codepen.io/chantallexandra/pen/VRmgYE 14:: https://codepen.io/hurick/pen/Kyrvrj 15:: https://codepen.io/m2creates/pen/EEvGgW 16:: https://codepen.io/vineethtrv/pen/NxqKoY 17:: https://codepen.io/THEORLAN2/pen/mPLPwj 18:: https://codepen.io/dicson/pen/eJzoEX 19:: https://codepen.io/brianmontanaweb/pen/ZQojEd 20:: https://codepen.io/inupurnomo/pen/MWWRmQr 21:: https://codepen.io/IbnShaalan/pen/rzMRgE 22:: https://codepen.io/dpinnick/pen/LjdLmo 23:: https://codepen.io/juliepark/pen/WzpRLw 24:: https://codepen.io/dasshounak/pen/QWKKYdj 25:: https://codepen.io/krisantuswanandi/pen/KxrgeZ

5 مواقع للأيقونات المتحركة، رهيبـــة لمطوّرين الـ Frontend 😍😍 1️⃣ Lordicon https://lordicon.com/ 2️⃣ Icons8 https://icons8.com/animated-icons 3️⃣ Loading https://loading.io/icon/ 4️⃣ Lottieflow https://www.finsweet.com/lottieflow/ 5️⃣ UseAnimation https://useanimations.com/#explore

6 مواقع للإلهام والتغذية البصرية، تهمّك جدًا لو أنت مطوّر Frontend 😍😍 1️⃣ موقع Dribbble من أهم وأجمل مواقع التغذية البصرية، الموقع غني بالأفكار الإبداعية.. ومعظم UI التحديات أخذها منه 😍 🔗 الرابط: https://dribbble.com 2️⃣ موقع Uplabs الحلو في هذا الموقع إنك تقدر تبحث من خلال المجال، أو من خلال التقنيات المستخدمة بالأعمال سواء فوتوشوب أو HTML أو فيغما وغيره 🔗 الرابط: https://uplabs.com 3️⃣ موقع DesignSpiration موقع مُصَمَّم للتغذية البصرية والإلهام! مو لعرض الأعمال.. أكثر شي جميل إنه يعرض لك أكواد الألوان المستخدمة في العمل، وكمان تقدر تبحث عن أعمال بلون معيّن! 🔗 الرابط: https://designspiration.com 4️⃣ موقع Pinterest الموقع غني عن التعريف.. ولو دخلته أضمن لك ما راح تقدر تخرج منه.. جدًا ضخم، وتلاقي فيه كل المجالات اللي تخطر وما تخطر على بالك ومن ضمنها الويب طبعًا 🔗 الرابط: https://pinterest.com 5️⃣ موقع SiteInspire موقع خاص لمصممي المواقع.. حتلاقي فيه أفكار كثير وممكن تبحث عن طريق تحديد الاستايل أو مجال موقعك وغيره.. 🔗 الرابط: https://siteinspire.com 6️⃣ موقع Behance غالب المصممين ( ومن ضمنهم مصممين الواجهات ) يستخدموا موقع بيهانس لرفع ومشاركة أعمالهم، ميزة الموقع إنه مقسم التصماميم في فئات وبالتالي يسهل عليك البحث، وكمان واجهة الموقع بسيطة وواضحة 🔗 الرابط: https://behance.net

-- كم أحتاج وقت عشان أتعلم الـ Frontend؟ 😵‍💫 من أكثر الأسئلة اللي توصلني، والإجابة هي: 👇🏻👇🏻 لا يوجد مدة محدّدة، إنما تختلف من شخص لآخر وتعتمد على عوامل كثير، من ضمنها: 1- كم ساعة تتعلم يوميًا؟ 2- ما مدى جودة تعلّمك؟ ( تركيزك واستيعابك للمعلومة ) 3- معلوماتك السابقة ( هل أنت جديد كليًا على البرمجة أو سبق لك تعلم لغات أخرى )... 4- تطبيقك للي تتعلمه، وكذلك نوعية تطبيقك ( هل تطبق باستمرار؟ طيب تطبق اللي تعلمته فقط أو تجرب أشياء أصعب تجبرك على البحث ) 5- جودة المحتوى اللي تتعلم منه وعمقه. 6- قدراتك وسرعة فهمك ( الفروقات الفردية ) لذلك.. أنسى هذا السؤال ولا تشغل بالك بالبحث عن إجابته؛ لأن ما فيه أحد يقدر يجاوبك عليه بشكل دقيق وصحيح 100٪ كل شخص يجاوبك عليه ويحدد لك مدّة معينة، راح تكون الإجابة من منظوره وقياسًا على نفسه وقدراته وتجربته، أو إنه يحدّد لك مدّة تقريبية مو اكيده فقط واصل التعلم والتطور والتطبيق المستمر، وتأكد كل ما زاد اجتهادك وحماسك راح توصل للاحتراف بشكل أسرع 🌟