→ المدونة
خريطة تتعلم بيها برمجة من الصفر… ببلاش
5 خطوات بالترتيب، ولكل خطوة كورس مجاني ومشروع تعمله بإيدك.
أكبر غلطة في بداية البرمجة إنك تبدأ كورسات كتير مع بعض وماتكملش ولا واحد. الحل خريطة واضحة: تخلص كل خطوة الأول، وبعدين تروح للي بعدها. الكورسات كلها مجانية، وروابطها في الأزرار تحت بنفس الترتيب.
الخطوة 1: HTML و CSS HTML بيبني هيكل الصفحة: العناوين والصور والزراير والفورمز. و CSS بيديها الشكل: الألوان والمسافات والخطوط، وإنها تظبط على الموبايل. الكورس: Responsive Web Design من freeCodeCamp، وفي آخره شهادة مجانية. والمرجع وقت ما تحتاج تدور على حاجة: MDN. مشروع: صفحة شخصية عنك، متظبطة على الموبايل. خلصت الخطوة لو: قدرت تعمل نسخة من صفحة أي موقع بتحبه من غير ما تنقل كود.
الخطوة 2: JavaScript دي اللي بتخلي الموقع يفكر ويتفاعل: زرار يفتح قايمة، فورم يتأكد من البيانات، صفحة تجيب داتا من غير ريفريش. ودي أهم خطوة، ماتعديهاش بسرعة. الكورس: JavaScript من freeCodeCamp. والمرجع: javascript.info، شرح مفصل لكل حاجة في اللغة. مشاريع: آلة حاسبة، لعبة صغيرة، وصفحة طقس بتجيب الجو من API. خلصت الخطوة لو: فهمت الـ functions والـ arrays والـ objects، وعرفت تجيب داتا من API وتعرضها.
الخطوة 3: Git و GitHub Git بيحفظ كل نسخة من شغلك، فلو حاجة باظت ترجع للنسخة اللي قبلها. و GitHub هو البورتفوليو بتاعك، وأول حاجة الشركة بتفتحها قبل ما تكلمك. الكورس: GitHub Skills، تمارين تفاعلية جوه GitHub نفسه. والمرجع: كتاب Pro Git المجاني. مشروع: ارفع كل مشاريعك على GitHub، وانشر صفحتك الشخصية على GitHub Pages.
الخطوة 4: اختار طريقك لو بتحب الشكل والتصميم: Frontend بـ React. لو بتحب المنطق والداتا: Backend بـ Node أو Python. اختار واحد بس وكمّل فيه للآخر. Frontend: كورس Full Stack Open من جامعة هلسنكي، أو الشرح الرسمي على react.dev. Backend: مسار Full Stack JavaScript من The Odin Project لو اخترت Node، أو CS50 Python من Harvard لو اخترت Python. وخريطة مفصلة لكل طريق موجودة على roadmap.sh.
الخطوة 5: مشاريع حقيقية مش To-Do List. حاجة حد يقدر يستخدمها فعلاً: متجر صغير، لوحة تحكم، أو بوت يحل مشكلة. تلات مشاريع زي دول بيفرقوا معاك أكتر من أي شهادة. ولو محتاج أفكار بتصميمات جاهزة، Frontend Mentor فيه تحديات مجانية.
3 غلطات تتجنبها 1. تتفرج على الكورس من غير ما تكتب الكود بإيدك. 2. تنقل الكود من غير ما تفهم كل سطر بيعمل إيه. 3. تستنى لحد ما تبقى "جاهز" عشان تبدأ مشروع. ابدأ بمشروع صغير من أول أسبوع.
01
ابدأ الكورس ↗
freeCodeCamp: Responsive Web Design
الخطوة 1: كورس HTML و CSS، وفي آخره شهادة مجانية