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

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

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

بخش اول - به یک برنامه نویس فرانت اند مبتدی یا Junior تبدیل شوید.

اگر ابتدای راه هستید و هیچ پیش زمینه‌ای از طراحی سایت ندارید، یادگیری مباحث زیر به عنوان پیش نیاز های ورود به این حوزه الزامی هست. برای ورود به دنیای طراحی سایت، مباحث زیر رو گام به گام دنبال کنید و با صبر، حوصله و تمرین مستمر، به یادگیری این مباحث بپردازید.

گام اول – زبان نشانه گذاری HTML را یاد بگیرید

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

گام دوم – با صفحه سبک ها یا CSS آشنا شوید و بر آن مسلط شوید

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

گام سوم – زبان جاوا اسکریپت و در ادامه jQuery را یاد بگیرید

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

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

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

گام چهارم – با سایت های واکنش گرا آشنا شوید و یک فریم‌ورک مناسب را یاد بگیرید

با افزایش بازدید کاربران از سایت ها توسط موبایل و دستگاه های مختلف، امروزه پیاده سازی سایت های غیر واکنش گرا کاری بی ارزش به حساب میاد. بنابراین یادگیری پیاده سازی صفحات واکنش‌گرا یا ریسپانسیو از الزامات طراحی سایت به حساب میاد. ساده ترین راه برای پیاده سازی سایت های واکنش‌گرا استفاده از فریم ورک های CSS هست. من یادگیری فریم‌ورک Bootstrap رو به شما پیشنهاد میدم. با این حال یادگیری فریم ورک هایی همچون Foundation، Bulma، UIkit و Semantic UI هم خالی از لطف نیست.

گام پنجم – کار با نرم افزار های گرافیکی مرتبط را تا حد نیاز یاد بگیرید

شاید کمتر برنامه نویسی به این مورد اشاره کنه! اما اهمیت یادگیری کار با نرم افزار های گرافیکی به قدری زیاد هست که میشه گفت این مورد میتونست گام اول هم باشه 😉

بعد از یادگیری چهار گام قبلی، شما قادر به پیاده سازی صفحات وب هستید. اما اصولی ترین راه برای این کار، تبدیل طرح های گرافیکی به صفحات وب هست. من یادگیری نرم افزارهایی همچون Adobe Photoshop، Adobe Illustrator و Adobe XD رو به شما توصیه می‌کنم. برای شروع، یادگیری نرم افزار فتوشاپ رو به شما پیشنهاد میدم.

بخش دوم – به یک برنامه نویس فرانت اند ارشد یا Senior تبدیل شوید.

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

گام اول – یک فریم ورک جاوا اسکریپت انتخاب کرده و یاد بگیرید.

یادگیری حداقل یکی از فریم‌ورک های جاوا اسکریپت میتونه شما رو نسبت به سایر برنامه نویسان متمایز کنه. استفاده از فریم‌ورک های جاوا اسکریپت، سرعت و سطح کیفیت عملکرد شما رو تا حد چشم‌گیری افزایش میده. برترین فریم ورک های جاوا اسکریپت که یادگیری اون ها رو به شما توصیه می‌کنم عبارتند از: React، Angular، Vue، Ember و Backbone

گام دوم – SCSS، SASS یا LESS را یاد بگیرید.

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

البته فراموش نکنید شما قادر به استفاده از این فایل ها بصورت مستقیم در وب سایت نیستید و در نهایت برای استفاده، باید خروجی این ها رو به CSS تبدیل کنید.

گام سوم – استفاده از Version Control را یاد بگیرید.

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

برترین سیستم ورژن کنترل که اکثر برنامه نویسان و طراحان سایت از اون استفاده میکنن، Git هست.

گام چهارم – با Browser Developer Tools آشنا شوید.

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

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

بنابراین همین حالا یادگیری رو شروع کنید و زمان رو از دست ندین! در ضمن، از ابتدا تا انتهای این مسیر میتونید روی من حساب کنید و هر سوالی داشتید در قسمت نظرات از من بپرسید.