در این نوشته درباره نقشه راه برنامه نویسی فرانت اند وب سایت صحبت می‌کنیم. اما قبل از هر چیز باید جواب چند سوال را بدهیم:

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

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

فرانت اند وب سایت چیست؟

وقتی یک صفحه وب را باز می‌کنید، همه آنچه که می‌بینید، از تصاویر، دکمه‌ها، لیست‌ها، فرم‌ها و در واقع همه آنچه که به عنوان کاربر با آن مواجه هستید و در مرورگر خود می‌بینید فرانت‌اند (Frontend) به حساب می‌آید. در مقابل، مفهومی به نام بک‌اند (Backend)‌ داریم که مربوط به چیزهایی‌ست که کاربر به طور مستقیم با آن تعامل ندارد و در سرور و مربوط به کدهای آنجا و پایگاه‌داده‌هاست.

بهترین و کامل‌ترین نقشه راه برنامه نویسی فرانت اند وب سایت

در ادامه مسیر بهینه و حرفه‌ای برای تبدیل شدن به یک برنامه‌نویس فرانت‌اند را معرفی می‌کنیم. البته اوایل این مسیر، با مسیری که یک برنامه‌نویس بک‌اند می‌پیماید مشترک است چون آشنایی به کلیات و نیز چکیده‌ای از زبان‌های HTML و CSS برای همه توسعه‌دهندگان وب ضروریست.

یادگیری زبان HTML

HTML یک زبان نشانه‌گذاری (و نه برنامه‌نویسی) برای مشخص کردن ساختار متنی ما و پایه و اساس هر صفحه یک سایت است. در مسیر یادگیری برنامه نویسی وب، اولین قدم اصلی، یادگیری زبان HTML است. در مورد این زبان مفاهیم زیر مهم‌ترین بخش‌ها جهت یادگیری هستند:

-Best Practices

یا همان بهترین روش کدنویسی HTML. زیرا با تگ‌ها و روش‌های مختلفی امکان ساخت یک صفحه وب هست اما قطعاً‌ هر روشی، بهینه، استاندارد یا حرفه‌ای نیست.

-Semantic HTML

یا کدهای معنایی. بعضی از تگ‌های HTML معنا و مفهوم مشخصی ندارند؛ مثل div یا span. اما تگ‌هایی مثل section یا article یا header دارای مفهوم مشخصی هستند. باید سعی کنید تا جای ممکن از تگ‌های معنایی استفاده کنید.

-Form و Validation

بخش مهم دیگر در زبان HTML فرم‌ها و اعتبارسنجی اولیه آن‌ها توسط خود HTML و پیش‌فرض مرورگر است.

-Accessibility

بخش مهم دیگر این است که بخش‌های مختلف وب‌سایتی که نوشته می‌شود، دسترسی پذیری مناسبی داشته باشد.

-SEO یا Search Engine Optimization

بحث مهم بعدی استفاده از کدهای استاندارد و تگ‌های مرتبط با SEO یا بهینه‌سازی موتورهای جستجو نظیر گوگل است.

یادگیری زبان CSS

گام مهم بعدی، یادگیری زبان CSS است که وظیفه استایل‌دهی و رنگ و لعاب دادن به کدهای خام HTML را دارد. اگر CSS نبود، همه سایت‌ها شمایلی مثل متن‌های داخل Notepad را داشتند و نه بیشتر. آنچه باید در زبان CSS یاد بگیریم:

• -مبانی
• -فلکس‌باکس
• -گرید
• -tarnsition و animation
• -طراحی واکنش‌گرا یا ریسپانسیو
• -پیش‌پردازنده‌های CSS نظیر SASS
• - سی‌اس‌اس مدرن مثل Styled Components
• -فریم‌ورک‌های CSS نظیر Tailwind CSS و Bootstrap

فراموش نکنید که بخش‌های پیشرفته‌تر که در بالا گفته شد در ابتدای راه ضروری نیستند.

یادگیری زبان برنامه‌نویسی JavaScript

در قدم مهم و کلیدی بعدی باید سراغ یادگیری زبان برنامه‌نویسی جاوااسکریپت بروید. وظیفه جاوااسکریپت، دمیدن روح به جسم خشک و ساختار HTML و CSS است. چیزی که کمک می‌کند کاربر با سرور تعامل داشته باشد، در صفحه تغییراتی ایجاد کند و بسیاری از امکانات دیگر.

• - یادگیری سینتکس (نحو و دستورات) پایه‌ای
• -دستکاری DOM یا همان Document Object Model
• -Fetch API و ارسال و دریافت غیرهم‌زمان اطلاعات از سرور
• -JSON فرمت مورد علاقه برنامه‌نویسان در تبادل اطلاعات
• -ES۶ یا ECMAScript 2015 که قابلیت‌های جدیدی به جاوااسکریپت اضافه کرد
• -یادگیری تایپ‌اسکریپت (این مرحله را می‌توانید بعدتر هم انجام بدهید.)

یادگیری گیت (تکنولوژی Git و سرویس GitHub)

با این که این مرحله می‌تواند کمی پس و پیش شود اما حذف شدنی نیست! پس حتماً در برنامه خود یادگیری‌اش را بگنجانید. این که گیت چیست و چه کار می‌کند نیاز به توضیح مفصلی دارد که در این مقاله نمی‌گنجد ولی به صورت خلاصه، وظیفه کنترل ورژن کد ما را دارد و می‌توان به وسیله Git نسخه‌های مختلف کد را مدیریت کرد. همچنین برای انجام کار گروهی (چه به صورت حضوری چه به صورت کار تیمی ریموت و دورکاری) کاربرد دارد.