مسیر راه برنامه نویسی فرانت اند با ری اکت، آموزش برنامه نویسی: شناخت مسیر

برای انکه یک برنامه نویس فرانت اند خوب شویم: باید مسیر را بشناسیم. مسیر یادگیری در زیر با استفاده از سرفصلهای بوت کمپ کوئرا تنظیم شده است.

*************************************************
اگر با ری اکت آشنا هستید و میخواهید به صورت عمیق در ری اکت حرفه ای شوید روی لینک زیر کلیک کنید:
آموزش ری اکت پیشرفته
*********************

مسیر توسعه فرانت اند با ری اکت Front-End with React شامل چه مواردی است؟

HTML
CSS
JavaScript
React
Git
Redux
Next.js
Typescript

شما باید به مباحث بالا مسلط شوید.

اگر میخواهید موفق نشوید:

سرفصل ها را به صورت سطحی بیاموزید

بدون کدنویسی و هزاران خط تمرین پیشرفت کنید

فقط ویدیوهای آموزشی را تماشا میکنید و چندین بار تمرین نکنید

نمایش مسیر برنامه نویسی فرانت اند با ری اکت در 10 هفته

برای خودتان برنامه ریزی کنید تا در ده هفته بیاموزید و تمرین کنید. هر هفته حداقل 20 ساعت بیاموزید.

راهنمایی: اگر شما تازه کار هستید و نتوانستید در طول یک هفته مباحثی مانند html, CSS و جاوا اسکریپت را بیاموزید، نا امید نشوید. این مسیر بر اساس یک بوت کمپ ایرانی تهیه شده است و برای کسانی مناسب است که در مباحث زیر آموزش دیده اند. یا حداقل 50 درصد مباحث زیر را درک کرده اند.

هدف از ارائه این سرفصلها برای مسیر فرانت اند با ری اکت، آشنایی شما است. اگر علاقه به شرکت در این بوت کمپ دارید روی این لینک کلیک کنید. ولی یادتان باشد شما با پول خرج کردن برنامه نویس نمیشوید، بلکه با تمرین کردن و شرکت در گروه ها و دنبال کردن آموزشها و در نهایت با صرف دو سه ساعت زمان در طول روز به تدریج یک برنامه نویس حرفه ای میشوید.

سرفصلهای مسیر برنامه نویسی فرانت اند Front-End with React

هفته اول آموزش، تسلط بر:

HTML
CSS
Basic JavaScript

هفته دوم آموزش، تسلط بر:

Js Dom
Soft Skills
Git

هفته سوم آموزش، تسلط بر:

Npm and Yarn
Web API
Modular Programming JS
Introduction to Es6 JavaScript

هفته چهارم آموزش، تسلط بر:

CSS frameworks:
1-Tailwind
2-material
Introducing in React

هفته پنجم آموزش، تسلط بر:

Starting React
useState
React Hooks

هفته ششم آموزش، تسلط بر:

StateManagment:
----Redux
----Context
Git
Softskills

هفته هفتم آموزش، تسلط بر:

how spa works in React:
----What is React Router Dom
Authentication and jwt token
Design Patterns

هفته هشتم آموزش، تسلط بر:

introducing into Node.js
What is Next.js:
----Why Next.js
----difference between Next.js and React.js
SEO Problem in React

هفته نهم آموزش، تسلط بر:

Introducing into TypeScript:
----What is TypeScript
----different between TypeScript and JavaScript
----installing it
----simple concept
Design Pattern

هفته دهم آموزش، تسلط بر:

Best Practices
Soft Skills

سوال: آیا بدون شرکت در بوت کمپ میتوانم مسیر بالا را، رایگان بیاموزم؟

بله، شما میتوانید از منابع رایگان به زبان فارسی یا حتی انگلیسی استفاده کنید.

سوال: آیا برای یادگیری برنامه نویسی، مهارت پیشرفته زبان انگلیسی لازم است؟

خیر، تنها مهارت پایه ای زبان برنامه نویسی برای یادگیری کافیست.

راهنمایی: شما چه بخواهید برنامه نویس حرفه ای شوید و چه در هر حوزه ای از دانش بخواهید پیشرفت کنید، بایستی زبان انگلیسی را بیاموزید. بهتر است از همین امروز مهارت زبان انگلیسی خودتان به ویژه گوش دادن و نوشتن را تمرین کنید. گوش دادن برای بهره مندی از آموزشهای ارائه شده به زبان انگلیسی و نوشتن برای مکاتبه، البته مکالمه در صورتی که بخواهید در خارج از کشور (حضوری یا دورکاری) فعالیت کنید لازم است.

لیستی از آموزشهای رایگان در اینترنت:

ابتدا این پست ها را در وبلاگ خودم بخوانید:

برنامه نویس فرانت اند کیست و چه مسیری پیش رو دارد؟

https://vrgl.ir/aSJ8N

چگونه ری اکت را یاد بگیریم؟ راهنمای آموزش ری اکت با جاوا اسکریپت React js

https://vrgl.ir/r1JGm

آیا در دوره های برنامه نویسی سون لرن و ... پولی شرکت کنم؟

https://vrgl.ir/m8Bxr

در پستهای بالا، حرفهایی زدم که میدونم به دردت میخوره، مثل اینکه چرا اول یادگیری برنامه نویسی خسته میشیم و ...! یا اینکه اگر در مسیر برنامه نویسی گم شدیم و یه مدتی نتونستیم ادامه بدیم چی میشه؟... و موضوعات حاشیه ای دیگه ای که میتونه به تو کمک کنه.

لیست دوره های آموزشی رایگان برنامه نویسی به زبان فارسی در سایتها

آموزش Visual Studio Code : این یک محیط توسعه کد است که حتما باید ازش استفاده کنی و کار باهاش رو بدونی.

آموزش HTML : در بالا جزء اولین سرفصلهاست.

آموزش CSS: پس از html باید یاد بگیری تا کدها رو استایل دهی کنی.

آموزش رایگان از مقدماتی تا پیشرفته HTML و CSS : معرفی جهت افزایش منابع رایگان

آموزش کامل Flexbox: ادامه مباحث استایل دهی است که برای استخدام و دورکاری باید یاد بگیری.

آموزش رایگان FlexBox - صفر تا 100 فلکس باکس: معرفی جهت افزایش منبع

آموزش جامع و رایگان css grid: بحث تکمیلی استایل دهی

آموزش Sass ، نحوه یادگیری و معرفی مراجع رایگان پس از یادگیری CSS میتوانید بیاموزید

آموزش جامع طراحی ux به همراه فیگما: برای استخدام و دورکاری لازمه

آموزشهای رایگان جاوا اسکریپت:

(توجه: من برخی از این آموزشها رو قبلا دیدم و برخی رو اصلا ندیدم)

آموزش جامع جاوا اسکریپت (JavaScript) رایگان

آموزش جامع جاوااسکریپت (پروژه محور) رایگان

آموزش مقدماتی تا پیشرفته جاوا اسکریپت رایگان

آموزشهای پروژه محور رایگان:

دوره پروژه محور تمرین فرانت اند

آموزش الگوریتم رایگان:

آموزش رایگان الگوریتم و فلوچارت - پیشنیاز ورود به دنیای برنامه نویسی رایگان

آموزش برنامه نویسی فرانت اند با ری اکت به زبان انگلیسی:

Meta Front-End Developer Professional Certificate : این آموزش توسط شرکت متا (شرکت مادر فیس بوک) ارائه میگردد.

ترجمه توضیحات دوره: حرفه خود را به عنوان یک توسعه دهنده فرانت اند راه اندازی کنید. مهارت های آماده برای شغل را برای یک شغل مورد تقاضا ایجاد کنید و از متا اعتبار کسب کنید. برای شروع نیازی به مدرک یا تجربه قبلی نیست.

چیزهایی که یاد خواهید گرفت

یک وب سایت ریسپانسیو با استفاده از HTML برای ساختار محتوا، CSS برای مدیریت سبک بصری visual style و جاوا اسکریپت برای توسعه تجربیات تعاملی interactive ایجاد کنید.
یاد میگیرید که از React در رابطه با کتابخانه ها و چارچوب های جاوا اسکریپت استفاده کنید.
برای ایجاد صفحات وب و کار با repositories یا مخازن GitHub و کنترل نسخه version control، Bootstrap CSS Framework را می اموزید.
برای یک مصاحبه کدنویسی آماده شوید، بهترین رویکردها برای حل مسئله را بیاموزید، و پروژه های آماده نمونه کار میسازید که می توانید در طول مصاحبه های شغلی به اشتراک بگذارید.

چگونه دوره معرفی شده در کوسرا را رایگان بیاموزم؟

ابتدا روی Financial aid available در کنار دکمه آبی شرکت در دوره کلیک میکنید.

سپس روی لینک Continue to the application کلیک میکنید.

سپس تیک گزینه ها در صفحه بعد رو بزنید و عبارت خواسته شده را در کادر تایپ کنید:

I agree to the terms above

سپس زمینه ی تحصیلی، درآمد سالانه تون به دلار، وضعیت شغلتون رو مشخص میکنید.

سپس در قسمت How much can you afford to pay مینویسید: 0 dollar.

سپس پاسخ سوال زیر رو به انگلیسی مینویسید:

Why are you applying for financial aid ?

توضیح کوتاه درباره اینکه کی هستید، چند سالتون هست، رشتتون چیه و ...
دلیل اصلی اینکه چرا نمی‌تونید پرداخت کنید(پول کم ارزش، درآمد کم)
بگید چرا این دوره براتون مهمه (خلاصه بگید، توی سوال بعدی توضیح بیشتر خواهید داد)
بیان کنید چرا به مدرک این دوره نیاز دارید

سپس به سوال زیر پاسخ دهید:

How will taking this course help you achieve you career goals?

ترجمه: این کورس چگونه میتواند به اهداف شغلی شما کمک نماید؟

یک پیش زمینه از این زمینه ی شغلی بگید، چرا توی این زمینه هستید و چرا میخواین این چیز ها رو در بارش یاد بگیرید.
چه شغلی برای آینده مد نظرتون هست و این کورس چطور به اون مرتبط عه.
آیا این کورس به درد محیط آکادمیک شما میخوره؟ اگه آره، به چه شکل؟
می تونید یه مقدار از سیلابس کورس بگید و نشون بدین که چه کاربرد هایی براتون داره
میتونید اشاره کنید که داشتن مدرک این کورس چطور به رزومه ی شما کمک میکنه.

راهنمای تصویری ثبت نام دوره به صورت رایگان در کورسرا برای دوره فرانت اند از متا

همانطور که در تصویر بالا میبینید، از مترجم گوگل در مرورگر گوگل کروم برای ترجمه صفحه به زبان فارسی استفاده کنید. البته فیلم ها همچنان به زبان انگلیسی پخش میشوند. در صفحه پخش فیلم، زیرنویس صفحه به صورت متنی (تمام متن صحبت شده توسط مدرس) نوشته شده است. شما میتوانید این متنها را در مترجم گوگل به فارسی برگردانید.

توجه: اگر شما نتوانید در این وب سایت ثبت نام کنید، چیز خاصی را از دست نمیدهید زیرا:

1- شما باید توانایی شنیداری انگلیسی خوبی داشته باشید

2- هنوز هم خیلی از دوره های آموزشی رایگان خیلی بهتر از این دوره هستند

3- فرایند یادگیری برنامه نویسی وابسته به یک دوره خاص نیست

معرفی دوره های فارسی رایگان آموزش فرانت اند با ری اکت در سایت یوتیوب

فعلا دسترسی به سایت یوتیوب برای قرار دادن لینکهای آموزشها ندارم اما شما میتوانید در کادر جستجوی یوتیوب بنویسید:

آموزش html، آموزش CSS، آموزش جاوا اسکریپت، آموزش ری اکت

یکی از مدرسینی که توصیه میکنم آموزشهای او را در یوتیوب بینید: سالار حقیقت نیا است که دارای کانال و گروه تلگرامی هم است.

در یوتیوب، به تعداد زیادی کلاس رایگان ضبط شده در مباحث بالا دسترسی دارید. یکی از مزیتهای آموزشهای موجود در یوتیوب این است که به جز رایگان بودن، شما میتوانید لحن مدرس را در همه دروس ببینید. زیرا در وب سایتهای آموزشی تجاری و پولی معمولا قسمتهایی که مدرس در آنها خوب توضیح داده شده قرار میگیرد.

همچنین یکی دیگر از مزیتهای آموزشهای یوتیوب تعداد زیاد مدرس برنامه نویسی در حوزه فرانت اند است. تصور کنید نوع آموزش یک مدرس مطابق سلیقه شما نباشد و عادت به آن نوع تدریس نداشته باشید. بدون ضرر و بدون اینکه لازم باشد در وب سایتی ثبت نام کنید و وقت تلف کنید میروید سراغ مدرس دیگر.

همچنین تصور کنید، موضوعی را که آموختید دارای پیچیدگیهایی است که باید در آن عمیقتر شوید. به خوبی میتوانید از مدرسهای دیگر در آن موضوع خاص بهره ببرید. یا اگر دوره آموزش فارسی را گذارنده باشید و با کلیات مباحث اشنا شده باشید ولی نیاز به درک عمیقی داشته باشید، در مرورگر کامپیوتر میتوانید به سراغ آموزشهای پرطرفدار یا عمیق به زبان انگلیسی بروید و از زیرنویس فارسی در یوتیوب استفاده کنید.

در زمان یادگیری، یگانه منبع من برای درک کلیات: آموزشهای فارسی یوتیوب و آموزش های سالار حقیقت نیا بود. سپس به سراغ داکیومنتهای ارائه شده در W3school و MDN و وب سایت ری اکت جی اس رفتم. سپس به آموزشهای زبان اصلی (با زیرنویس یا بدون زیر نویس) پرداختم.

امیدوارم بتوانم به زودی لینکهای مفید را قرار دهم.

معرفی وب سایتهای ارائه دهنده آموزشهای اودمی (یودمی Udemy) برای زبان های برنامه نویسی

یکی از وب سایتهایی که اموزشهای ارائه شده در وب سایت Udemy.com : وب سایت اودمی ایران است:

https://udemyiran.com/

در این وب سایت با آی پی ایران وارد شوید و دوره های مختلف که در حوزه برنامه نویسی یا حوزه های دیگر قرار داده شده است را دانلود و تماشا کنید.

The HTML &amp;amp;amp; CSS Bootcamp 2023 Edition | بوتکمپ HTML و CSS برای مبتدیان از Colt Steele

HTML and CSS for Beginners – Build a Website &amp;amp;amp; Launch ONLINE

REACT: INTERMEDIATE TOPICS | آموزش پیشرفته REACT از سری CODEWITHMOSH

Hands-On React. Build advanced React JS Frontend with expert

یکی دیگر از وب سایت های ارائه دهنده آموزشهای اودمی و وب سایتهای دیگر، گیت دات آی آر است:

https://git.ir/

آموزش HTML ،CSS، جاوا اسکریپت، ری اکت

ادامه جستجو را به عهده خودتان میگذارم.

چه آموزشی را برای پیروی از مسیر آموزش فرانت اند با ری اکت بهتر است انتخاب کنم؟

اولا به مسیر پایبند باشید، شما هیچگاه بدون یادگیری html و جاوا اسکریپت نباید به سراغ ری اکت بروید.
دوما قبل از دانلود آموزش از سایتهای ایرانی، اگر فیلم نمونه دارد حتما آن را ببینید، ممکن است توانایی شنیداری خوبی داشته باشید، اما نه برای اینکه صحبتهای انگلیسی با لهجه هندی را بشنوید. من به شدت متنفر از لهجه هندی هستم، اگرچه برنامه نویسان هندی را دوست دارم.
سوما دانلود کردن و خریدن آموزشها برای شما ارزش آفرین نیست. اینکه شما دو ساعت روزانه وقت بگذارید یاد بگیرید و تمرین کنید، ارزش است.
چهارما، اگرچه در بالا گفتم به مسیر پایبند باشید اما شما میتوانید همانطور که در آموزشهای سالار حقیقت نیا، به بررسی HTML و CSS و JavaScript پرداخته شده است بسنده کنید. یعنی نباید برای شروع تمام المانها و خصوصیات این سه زبان را به صورت عمقی بیاموزید. میتوانید طبق طرح درس مدرس پیش بروید. پس از درک مفاهیم کلی و توانایی ساخت صفحه با آموخته ها شروع به یادگیری عمیق نمایید.
پنجما به سرفصلهای ارائه شده در آن دوره توجه کنید، اگر در وب سایتهای فارسی بالا یا سایتهای دانلود دیگر، سرفصل ها نیامده بود، به لینک منبع در اودمی یا کورسرا یا لیندا بروید و سرفصل ها را بررسی کنید.
حتما از روشهای مطالعه هدفمند و تندخوانی استفاده کنید. لازم نیست شما یک متخصص مطالعه باشید یا یک تندخوان حرفه ای، بلکه کافیست شما با شمای روش مطالعه و پیشرفت آشنا باشید.

چگونه در مسیر برنامه نویس فرانت اند شدن موفق باشم؟

من در پستهای اخیرم درباره مطالعه و مدیریت زمان صحبت کرده ام ، لطفا پستهای زیر را بخوانید.

چگونه در تعطیلات عید نوروز 1402 برنامه نویسی یاد بگیریم؟

در پست بالا درباره تکنیکهای مطالعه از جمله تکنیک پومودورو گفته ام و اپلیکیشن ویندوز برای تمرکز و استفاده از تکنیک پومودورو را نیز معرفی کردم. لطفا از همین پست استفاده کنید و نظر و لایک فراموش نشود.

خلاصه

در نقطه شروع یادگیری حساس نباشید، بالاخره باید از جایی شروع کرد. ممکن است یک سال بعد شما یک برنامه نویس گو Go باشید یا در همان مسیر توسعه فرانت اند با ری اکت بمانید. حتی ممکن است شما سال بعد یک برنامه نویس ری اکت نیتیو React Native باشید.

به مطالعه روزانه حداقل 2 ساعته طبق سرفصلها متعهد باشید. اگر به زمان مناسب نیاز دارید: پیشنهاد میکنم زمانی که همه خوابند شما بیدار باشید: منظورم شب نیست بلکه منظورم صبح زود است. اما اگر به هر ترتیبی نتوانستید صبح زود یک ساعت قبل از طلوع افتاب بیدار شوید، قدر هر ساعتی که خلوت است و تمرکز دارید را بدانید.

مکان مناسبی را انتخاب کنید. ممکن است شما بتوانید در کتابخانه بهتر مطالعه کنید، یا شاید در یک پارک در الاچیق یا حیاط خانه خودتان، یا انباری ، پشت بام، خرپشته، یا اصلا اتاق شخصی خودتان. حتی میتوانم تصور کنم شما در بین جمع و زمانی که همه در حال فعالیت هستند بهتر مطالعه کنید. من همه اینها را امتحان کردم. در واقع بسته به وضعیت و مزاج بدن شما ممکن است برخی از اینها را امتحان کنید ولی بعدا شرایط را تغییر دهید.

پس زمان و مکان مطالعه و تمرین خودتان را پیدا کنید. خود همین مساله ممکن است یک هفته تا یک ماه زمان ببرد. ممکن است نیاز به مداخله پزشکی و دارویی داشته باشید. بدن خودتان را بسنجید و کمبود یا بیشبود ممکن را پیدا کنید تا عامل عدم تمرکز را از بین ببرید. مثلا برخی باید دو سه لیوان نوشیدنی داغ بخورند تا بتوانند کار خود را شروع کنند.

به خوراک و نوشیدنی خودتان دقت کنید. هیچ نوشیدنی داغ غلیظی خوب نیست. من قبلا عاشق نسکافه و قهوه بودم اما وقتی فهمیدم بهره وری من با مصرف کافئین کاهش پیدا میکند، خودم را از آن دور کردم. از دستورات طبیبان سنتی غافل نشوید: همراه غذای سرد، یک اصلاح کننده مصرف کنید. قسمت بیشتر وعده غذایی خودتان را مزاج گرم قرار دهید. شاید لازم باشد به پزشک دارای تخصص طب سنتی مراجعه کنید.

اگر بیشتر بخواهم حرف بزنم، تکرار گفته های پستهای دیگر است. پس شما را به همان پستهایی که در این نوشتار آوردم ارجاع میدهم.

برخی از پستهای مفید:

دانلود فیلم آموزش برنامه نویسی ری اکت از مجموعه دوره های اسکریمبا : این یک دوره رایگان انلاین و تعاملی است که اگر زبان انگلیسی شما خوب است میتوانید از این دوره اموزش ری اکت و اموزشهای رایگان با ثبت نام و با آی پی ایران استفاده کنید. در این دوره مدرس به زبان انگلیسی آموزش میدهد و سپس از شما میخواهد کدها را کامل کنید و سپس شما میتوانید روش حل را ببینید.