از سری مقالات نقشه گنج، در قسمت قبل به بررسی حوزه های برنامه نویسی پرداختیم. در مقاله نقشه راه یادگیری فرانت اند فرض را بر این گذاشته‌ایم که شما با کمک مطالعه‌های گذشته به این نتیجه رسیده‌اید که حوزه front-end برای شما مناسب تر است.

فرانت اند چیست 

فرانت-اند یا توسعه سمت کاربر، شامل ساخت رابط کاربری (UI) یک وبسایت یا برنامه وب است. که تعیین می‌کند چگونه هر قسمت از یک وبسایت نمایش داده شده و کار خواهد کرد. رابط کاربری شامل بخش دیداری برنامه و تعاملات کاربران است. هر آنچه را که هنگام بازدید از یک وبسایت مشاهده می‌کنید مانند انواع مختلف دکمه‌ها و سایر اجزای رابط کاربری، رسانه‌ها، متن‌ها، فرم‌ها، انیمیشن‌ها و غیره – به عنوان بخشی از فرانت-اند توسعه داده می‌شوند.

توسعه دهنده فرانت اند کیست

توسعه دهنده فرانت اند مهندس نرم افزاری است که نه تنها مسئول توسعه رابط کاربری می باشد. بلکه همچنین تضمین موازنه بین طراحی و عملکرد و سرعت و قابلیت مقیاس‌پذیری را دارند. آن‌ها همچنین اطمینان حاصل می‌کنند که وبسایت در تمام مرورگرها (cross-browser). در سیستم‌عامل‌های مختلف (cross-platform) و در دستگاه‌های مختلف مانند تلفن‌همراه، تبلت و صفحات کامپیوتر (cross-device) به درستی بارگیری می‌شود.

چرا نقشه راه یادگیری فرانت اند ؟

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

راستی تا فراموش نکردم بگم، توجه داشته باشید که نقشه راه یادگیری فرانت اند ارائه شده در این مقاله تنها یک راه برای تبدیل شدن به توسعه دهنده فرانت-اند نیست. می تونم بگم این یک راهنمایی برای کسانی است که قصد شروع یادگیری فرانت-اند را دارند.

مبانی فرانت اند

برای شروع به توسعه فرانت-اند، مهارت‌های بسیار اساسی که باید داشته باشید شامل HTML، CSS و جاوااسکریپت است. توجه داشته باشید که توسعه وب فرانت-اند نه تنها به این سه مهارت محدود نمی‌شود، بلکه برای موفقیت به عنوان یک توسعه‌دهنده فرانت-اند در سال 2023 باید بسیاری از فناوری‌های دیگر را نیز یاد بگیرید.

در ادامه این مهارت های اساسی را با کمی جزئیات بررسی می کنیم.

1. HTML – HyperText Markup Language

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

این زبان (پیش برنامه نویس های حرفه ای نگید زبان برنامه نویسی از من گفتن بود 😐 )از تگ‌ها تشکیل شده است که محتوای مورد نظر را برچسب گذاری و نمایش می‌دهند.

2. CSS – Cascading Style Sheets

CSS به معنای برگه‌های پویا است و با استفاده از آن می‌توانید به صفحات وب خود سبک‌هایی مانند رنگ‌ها، فونت‌ها، طرح‌ها و انیمیشن‌ها اضافه کنید. با استفاده از CSS، می‌توانید وب‌سایت‌های واکنش گرا (responsive) بسازید که بتوانند طرح و سبک را بر اساس وضوح و جهت دستگاه تغییر دهند تا کاربران در هر اندازه دستگاهی به راحتی از وب‌سایت شما استفاده کنند. CSS به شما امکان می‌دهد چندین عنصر را به طور همزمان استایل کنید. از انتخاب‌کننده‌های برچسب، کلاس و آی‌دی استفاده می‌کند تا به عناصر HTML که می‌خواهیم آن‌ها را استایل کنیم، دسترسی داشته باشد. سپس می‌توانیم از این انتخاب‌کننده‌ها برای نوشتن قوانین استایل استفاده کنیم که حاوی نام ویژگی مانند “اندازه فونت”، “رنگ پس‌زمینه”، “فاصله‌ی چپ” و غیره و مقادیری برای این ویژگی‌ها هستند.

دوستان عزیزمی تونید از طریق : لینک دوره جامع و رایگان html-css مطالب این دو قسمت رو به صورت کاملا رایگان و حرفه ای شروع به یادگیری کنید.

3. JavaScript

اکنون که طرح وب‌سایت خود را با استفاده از HTML ساختیم و با CSS استایل دادیم، مرحله بعد اضافه کردن “یک سری عمل” به وب‌سایت است. این کار با استفاده از زبان برنامه‌نویسی جاوااسکریپت انجام می‌شود. جاوااسکریپت تعامل و امکانات وب‌سایت شما را بهبود می‌بخشد. با استفاده از جاوااسکریپت می‌توانید اجزای UI پویا ایجاد کنید. جاوااسکریپت عملکرد وب‌سایت شما را بهبود می‌بخشد. به عنوان مثال، با کلیک کردن بر روی یک دکمه، باز کردن یک منو، بروزرسانی پیشرفت در نوار پیشرفت، ارسال یک درخواست شامل نام کاربری و رمز عبور به سرویس احراز هویت پس از کلیک کردن بر روی دکمه “ورود” برای بررسی اینکه آیا کاربر مجاز است یا خیر و غیره. با کمک جاوااسکریپت، وب‌سایت شما می‌تواند به فعالیت‌های کاربران در صفحه واکنش نشان دهد.

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

حال که سه اصل اول توسعه جلویی را دیدیم، بیایید به چند مهارت اساسی دیگری که برای یک توسعه دهنده جلویی نیاز است، نگاه کنیم. اما درباره مواردی از قبیل DOM یا ساختار شبکه در این مقاله صحبت نمیکنیم و جزییات بیشتر را برای وقت دیگری می گذاریم.

4. یادگیری یکی از فریمورک های CSS

در ادامه مسیر باید به یادگیری یکی از فریمورک های موجود در حوزه css بپردازید. علت این موضوع هم اینه که از سال 2020 به بعد شرکت ها حرفه ای دیگه کسی رو استخدام نمیکنن که با مبانی توسعه فرانت اند کار کنه.

وقتی با مبانی – HTML، CSS و JavaScript – آشنا شدید، زمان آن می رسد که به مرحله بعدی در نقشه راه توسعه فرانت اند بروید که آموزش هر یک از چارچوب‌های CSS است. این چارچوب‌ها فرآیند توسعه را برای شما تسریع خواهند کرد. یکی از چالش‌هایی که توسعه دهندگان فرانت اند با آن روبرو هستند، حفظ هماهنگی استایل در صفحات وب آن‌هاست. چارچوب‌های CSS مانند Bootstrap، Materialize، Tailwind، Semantic UI، Bulma و غیره، توسعه یک وب‌سایت هماهنگ را آسان‌تر می‌کنند. این چارچوب‌ها شامل چندین برگه استایل CSS هستند که آماده استفاده هستند و به توسعه دهندگان امکان می‌دهند تا زمانی که در استایل دهی یک وب‌سایت صرف می‌شود را صرف کدنویسی کنند. این برگه‌های استایل کاربرپسند و جذاب هستند و کلاس‌های داخلی برای عناصر وب متداول مانند نوبارها، سربرگ‌ها، پاورقی‌ها، منوها و غیره دارند.

5 . یادگیری یک پردازش گر برای css

در فایل‌های CSS به سرعت حجم کد ها افزایش می یابد ونگهداری سخت می شوند. علاوه بر این، CSS برخی از قابلیت‌های قدرتمند برنامه‌نویسی مانند متغیرها و توابع را پشتیبانی نمی‌کند. به همین دلیل، از پیش پردازنده‌های CSS که زبان‌های اسکریپتی هستند و قابلیت‌های پیش‌فرض CSS را گسترش می‌دهند، استفاده می‌کنیم. کد CSS گسترده شده کامپایل می‌شود و خروجی فایل CSS معمولی است. با کمک پیش پردازنده‌های CSS، می‌توانیم در فایل‌های اسکریپت خود منطق مانند متغیرها، توابع، میکسین‌ها، ارث‌بری، ارث‌بری تو در تو و محاسبات ریاضی را استفاده کنیم. این کار به اتوماتیک شدن کارهای تکراری، کاهش تعداد خطاها و ایجاد کد قابل استفاده کمک می‌کند. SASS/SCSS، Stylus و Less، چندین پیش‌پردازنده محبوب هستند.

شما می توانید دوره SASS را به صورت جامع و کاملا رایگان نیز در سایت ما آموزش ببینید.

6. یادگیری فریمورک (framework) برای javascript

فریمورک جاوااسکریپت، کد پیش‌نویس شده است که ویژگی‌ها و مزایایی را فراتر از جاوااسکریپت ساده یا وانیلی فراهم می‌کند. با توجه به اینکه این فریمورک ها بر اساس جاوااسکریپت ساخته شده‌اند، امکان دارد تمام ویژگی‌های یک فریمورک را با جاوااسکریپت معمولی نیز به دست آورد. با این حال، این چارچوب‌ها(فریمورک) قابلیت‌های پیشرفته‌تری را بدون نوشتن کد از ابتدا ارائه می‌دهند. به همین دلیل، توسعه‌دهندگان فرانت اند معمولاً ترجیح می‌دهند از یک چارچوب به جای جاوااسکریپت ساده استفاده کنند. Angular، React، Vue.js، Meteor، چندین چارچوب محبوب جاوااسکریپت برای توسعه جلویی هستند. همچنین می‌توانید نقش‌های ویژه‌ای را در React، Angular یا Vue.js پیدا کنید.

جمع بندی

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