✨ [ للمبتدئين جدًا ] ✨
هنا خارطة الطريق لمسار مطور Front-End المبتدئ، مع:
⚡️ مصادر تعلم عربية وانجليزية
🏆 مواقع تمارين وتحديات لتطوير مهاراتك
🔗 قنوات ومواقع مفيدة
🧵 ثريدات مميزة في هذا المجال
رحلة ممتعة 🤩🚀
كلنا نحتاج الإلهام! 💡
أو توقّف أفكارنا أحيانًا ونحتاج لتغذية بصرية لأعمال في نفس مجالنا، تنعش وتجدّد إبداعنا!
في هذا الـ #ثريد جمعت لك أهم 6 موقع حتساعدك جدًا في تجديد أفكارك كـ #مصمم_مواقع 🤹🏻♀️👇
🛠️ الأدوات اللي ما استغني عنهم بأي مشروع Front-End ماله UI خاص:
- المحرر Visual Studio
- تغذية بصرية وأفكار من Dribbble
- إضافة Color Picker
- الخطوط من Google Fonts
- الأيقونات من icons8 و Font Awesome
- صور من Freepik
- الـ Documentation
- مولدات CSS لاختصار الوقت
وأنت؟ 👀
مراحل تعلّم أساسيات الـ Frontend 🧗🏻♀️:
1- لغة HTML/CSS
2- إطار عمل CSS: مثلًا Bootstrap
3- معالجات CSS: مثلًا Sass
4- لغة جافاسكربت
5- تعلم Git/Github
6- إطار عمل جافاسكربت: React أو Vue
أنت في أي مرحلة حاليًا؟ 👀
من أكثر التمارين اللي تقوّي مهاراتك بالـ Frontend هو عمل نسخ (Clone) لواجهات المواقع ✨
هنا 5 فيديوهات لتقليد المواقع المشهورة باستخدام HTML / CSS/ JS فقط 🔥
أكثر إضافات لـ Chrome ما أستغني عنهم ابدًا:
- معرفة الألوان: Color Picker
- تصوير كامل الشاشة: GoFullPage
- عرض CSS العناصر: CSSViewer
- تحميل كل الصور بالصفحة: Image Downloader
- تحميل كل الـ SVGs بالصفحة: svg-grabber
- مكتبتي للمواقع المهمة: Toby
وأنت ايش إضافاتك المفضلة؟ 🧐
لاحظت كثير ينتهي من دراسة أساسيات الـ Front-End ويكون عنده معلومات كثير..
بس ما يعرف كيف يوظّفها في مشاريع حقيقية! ولا متى ووين يستخدم كل جزئية تعلّمها! 😵💫
لو أنت عالق بهذه المرحلة راح أقولك خطوتين تخرّجك منها:
من أكثر التمارين اللي تقوّي مهاراتك بالـ Frontend هو عمل نسخ (Clone) لواجهات المواقع ✨
هنا 9 فيديوهات لتقليد المواقع المشهورة باستخدام HTML / CSS/ JS فقط 😍🔥
لو باتعلم الـ Front-End من جديد حيكون بالشكل:
المرحلة الأولى: تأسيس
1- كيف يعمل الويب
2- تعلم HTML/CSS بتعمق
3- تعلم التصميم المتجاوب Responsive Design
4- تعلم Javascript
المرحلة الثانية: تطوير
1- تعلم Bootstrap و TailwindCSS
2- تعلم Git/Github
3- تعلم Sass
4- تعلم React
أكثر إضافات لـ Chrome ما استغني عنهم ابدًا:
- معرفة اللون: Color Picker
- تصوير الشاشة: GoFullPage
- عرض CSS العناصر: CSSViewer
- معرفة الخط: WhatFont
- تحميل كل الصور: Image Downloader
- تحميل كل الـ SVGs بالصفحة: svg-grabber
- مكتبتي للمواقع: Toby
وأنت ايش إضافاتك المفضلة؟ 🧐
الرسومات هي أكثر شيء يضيف لموقعك بهجة وحياة! 🤩🪄
لذلك جمعت لك هنا 5 مواقع مجانية ومميّزة للرسومات، متأكدة ما راح تستغني عنهم ابدًا!
لايك + رتويت وتابع الـ #ثريد اللطيف ⬇️
خطوات تعلم HTML و CSS بالترتيب: 🔥
1. تعلم HTML وخذ وقتك
2. تعلم أساسيات CSS وخذ وقتك
3. تعلم التصميم المتجاوب Responsive design
4. تعلم Media queries
5. تعلم Grid / Flexbox
6. تعلم واحد من إطارات عمل CSS مثلًا Bootsrap
7. تعلم Sass
والباقي راح تتعلمه تدريجيًا بالممارسـة 🚀
الـ Position من أهم خواص لغة CSS وتاخذ أكثر من قيمة:
[Static, Relative, Absolute, Fixed, Sticky]
- ايش معنى كل وحدة فيهم؟
- وايش الفرق بينهم؟
- وأهم استخداماتهم؟
هنا الإجابة 👇🏻💛
مراحل تعلّم أساسيات الـ Frontend 🧗🏻♀️:
1- لغة HTML/CSS
2- إطار عمل CSS: مثلًا Bootstrap
3- معالجات CSS: مثلًا Sass
4- لغة جافاسكربت
5- تعلم Git/Github
6- إطار عمل جافاسكربت: React أو Vue
أنت في أي مرحلة حاليًا؟ 👀
ايش الفرق بين box-shadow و drop-shadow في CSS؟ 🤔
✅ الـ box-shadow يضيف الظل للبوكس كامل.
✅ الـ drop-shadow عبارة عن CSS Filter يضيف الظل للمحتوى نفسه (رهيب في إضافة الظل لصور png).
تحدّي Frontend خفيييف 😍🤏🏻
• المطلوب: تحويل الواجهة في الصورة لكود Frontend، مع إضافة لمساتك الفنانة 🤩🔥
• مدّة التنفيذ: 3 أيام
• اللغات والتقنيات: مفتوح
الصورة بجودة أفضل:
مين مستعدّ؟ 💪🏻🔥
من أهم المهارات لمطوّر الـ Frontend:
- لغة HTML/CSS
- لغة جافاسكربت
- إطارات عمل CSS، أهمها Bootstrap و TailwindCSS
- معالجات CSS، مثلًا Sass
- إطارات عمل جافاسكربت، مثلًا React
- التعامل مع Git/Github
- الـ Testing / Debging
ايش كمان؟ 🤔
الـ Flexbox أو الـ Flexible Box
من أروع مزايا CSS3 واللي تعطيك مرونة خيالية، وتسهّل كثيير تنسيقات مرهق تنفيذها باستخدام الـ floating والـ positioning 🥴
وهنا أهم خواص الـ Flexbox وبالتفصيل 🤩👇🏻
كيف تتيح للمستخدم تحميل ملف باستخدام HTML فقط؟ 🤩👇🏻
🟡 لاحظ أن قيمة Download هي الاسم الجديد اللي تبغا تعطيه للملف لما يتحمّل، ولو ما حددت قيمة راح يتحمل الملف بنفس اسمه الأساسي.
3 لغات أساسية ولازم تتعلمهم للـ Frontend:
1. لغة HTML
2. لغة CSS
3. لغة Javascript
ولو أتقنتها راح يسهل عليك تعلّم كل التقنيات والمكتبات وإطارات العمل؛ لأنها تندرج تحتها ومشتقة منها 🚀
حتى تكون مطوّر Front-End محترف، تحتاج تتمكّن من 3 لغات أساسية:
الأولى: HTML
الثانية: CSS
الثالثة: JavaScript
والباقي كلّه راح يكون مكتبات وإطارات عمل للغات السابقة.
من أهم العناصر اللي لازم يتضمنها ملف أعمالك (Portfolio):
- تخصصك أو مجالك
- نماذج لأعمالك كصور أو روابط
- وسائل التواصل معاك، مثلًا ايميل وواتساب
- مهاراتك التقنية
- حساب Github
- حسابات السوشيال ميديا ( لو كنت تصنع محتوى متخصص فيها )
ايش كمان؟ 🧐
أفكار مشاريع تقوّي مهاراتك في الـ Frontend:
- لوحة تحكم ( Dashboard )
- متجر إلكتروني بميزات حسب مستواك
- تطبيق الطقس
- لعبة X-O
- اختبارات قصيرة
ايش تضيف؟ 🤔
أفكار مشاريع تقوّي مهاراتك في الـ Frontend:
- قائمة مهام
- لوحة تحكم ( Dashboard )
- آلة حاسبة 🏃🏻♀️
- أداة لتوليد الباسورد
- ألعاب الذاكرة
- الاختبارات القصيرة
ايش كمان؟ 🤔
مراحل تعلّم أساسيات الـ Frontend: 🧗🏻♀️
1- لغة HTML/CSS
2- إطار عمل CSS: مثلًا Bootstrap
3- معالجات CSS: مثلًا Sass
4- لغة جافاسكربت
5- تعلم Git/Github
6- إطار عمل جافاسكربت: React أو Vue
أنت في أي مرحلة حاليًا؟ 👀
تحدّي Frontend رهييب😍⚽️
• المطلوب: تحويل 2 واجهات على الأقل لكود Frontend، مع إضافة لمساتك الفنانة 🤩🔥
• مدّة التنفيذ: 10 أيام
• اللغات والتقنيات: مفتوح
المشروع كامل كملف فيغما:
مين مستعدّ؟ 💪🏻🔥
إضافات Chrome رهيبة ومهمة لمطوّر الـ Frontend:
- معرفة الألوان: ColorZilla
- تصوير كامل الشاشة: GoFullPage
- عرض تنسيق CSS للعنصر: CSSViewer
- تحميل كل الصور بالصفحة: Image Downloader
- تحميل كل الـ SVGs بالصفحة: svg-grabber
- معرفة التقنيات المستخدمة بالموقع: BuiltWith
ايش
التحـــدّي هذه المرة مُختلــف! ❤️🔥
حيكون بالتعاون مع
@YarHmm
وأكاديمية ترميز 😍
[ المطلوب ]
عمل واجهة Frontend لعرض مواقيت الصلاة
• مدة التحدي: 10 أيام
• التقنيات واللغات: مفتوح
• مرفق صور UI للإلهام، خذ منها أفكار لكن لا تتقيـد فيها ابدًا
• عناصر مهم وجودها في التصميم: 👇🏻