همیشه یه رویا داشتم اونم این بوده که قالب سایت یا وبلاگ خودم رو خودم طراحی کنم و هر بلایی دوست دارم سرش بیارم 🙂 حدود 7 سال من به این رویا توجه لازم رو نکردم ولی الان 1 ساله که واقعا دارم تلاش میکنم تو این زمینه و دوست دارم امروز تجربه کوچیک خودم به همراه تجربه دوستان حرفه ای خودم رو در قالب یک مقاله به اسم مراحل کامل طراح فرانت اند شدن! در اختیار شما دوستان قرار بدم.

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

مراحل کامل طراح فرانت اند شدن!

 

یادگیری زبان های نشانه گذازی

مهم نیست میخاین فرانت کار کنین یا نه یادگیری زبان های ساده HTML و CSS پیش نیاز دنیای طراحی وب محسوب میشه خیلی از دوستان زبان نشانه گذازی رو دسته کم میگیرن ولی من دیدم خیلی از قابلیت های CSS بسیار کاربردی و جالب هستن و شما رو بی نیاز از جاوا اسکریپت میکنن ولی متاسفانه چون خیلی ها سروکله نمیزنن با کدهای CSS خیلی زود میرن سراغ زبان های برنامه نویسی پس پیشنهاد من به شما برای یادگیری این دو زبان استفاده از سایت W3 School و یا سایت فارسی که کامل توضیح میده هستش مثل بیاموز. ناگفته نماند که HTML5 و CSS3 رو نباید فراموش کنین شاید یادگیری قواعد هر دو کمتر از 1 روز از شما وقت بگیره.

 

یادگیری کتابخانه CSS و ریسپانسیو

کتابخانه ها اومدن تا کار ما رو تو کدنویسی ساده تر کنن یکی از معروف ترین کتابخانه های CSS بوت استرپ نام داره اصلا بوت استرپ چیه؟

Bootstrap یک چارچوب نرم افزاری یا Framework است که شامل توابع و کتابخانه های از پیش آماده شده به زبان HTML و CSS و JavaScript می باشد که به ما این امکان را می دهد تا در صفحات وب خود، با استفاده از کتابخانه های از پیش آماده، المان هایی نظیر: فرم ها، دکمه ها، تب ها و … را ایجاد کرده و رابط کاربری وب سایت خود را توسعه دهیم.

احتمالا شما هم این توضیح رو زیاد شنیدین ولی بزارین کمی براتون ساده تر توضیح بدم ببنید بوت استرپ دارای صد ها کدهای آماده هستش مثالا کدهای آماده دکمه و فرم و … که از قبل برای راحتی شما طراحی شدن و فقط شما کافیه اونو فراخوانی کنین برای مثال شما وقتی تو HTNL کلاس های زیر رو وارد میکنید با تصویر زیر رو به رو میشید :

بوت استرپ

به همین سادگی و زیبایی ده ها کد رنگ صدها طراحی های از پیش طراحی شده و غیره فقط منتظر فراخوانی شما هستن 🙂

بحث ریسپانسیو بسیار مهم و کاربردی هستش جوری که گوگل یکی از عوامل رتبه بندی سایت را ریسپانسیو بودن اعلام کرد. به سایت هایی رسپانسیو میگن که تو هر سایزی مانند لپ تاپ و موبایل و تبلت و.. به خوبی نمایش داده بشن. بوت استرپ از نسخه 2 به بعد ریسپانسیو رو اضافه کرده و شما میتونین بدون نگرانی از اون استفاده کنین ولی کتاب خونه های دیگه هم برای اینکار هستن مانند w3 responsive که همونطور که فهمیدین ماله سایت معروف w3 school هستش.

 

یادگیری زبان جاوا اسکریپت

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

  • امکان تغییر در متون نمایش داده شده در مرورگر
  • تغییر در مشخصه های المانها و CSS آنها
  • متحرک سازی، انیمیشن و پویا نمایی
  • تعامل با کاربر و از طریق المانهای ورودی نظیر Textbox ها، RadioButton ها، TextArea و غیره
  • عکس العمل نشان دادن به واکنش های کاربران نظیر تغییر عکسها با حرکت موس روی آنها
  • نمایش اخطار و یا پیام به کاربران
  • انجام محاسبات ریاضی
  • ساخت و تولید کد HTML بصورت پویا و برحسب شرایط مورد نیاز

بهترین کتابخانه های جاوا اسکریپت

اکما اسکریپت

بعد این که شما جاوا اسکریپت رو فرا گرفتین باید به یادگیری قواعد و استانداردهای جدید جاوااسکریپت که اکما اسکریپت نام دارن بپردازید. نسخه های مختلفی از اکما اسکریپت منتشر شده ولی معمولا اکما اسکریپت 6 با پشتیبانی طولانی مدت بهترین گزینه برای یادگیری هستش البته یادگیری 7 و 8 هم خالی از لطف نیست و بهتره یاد بگیرین.

 

یادگیری کتابخانه های جاوا اسکریپت

کتابخانه های زیادی وجود دارن ولی واقعا کدوم بهترینه؟ بزارین همون اول بهتون بگم بهترین وجود نداره شما باید بستگی به نیازتون و علاقه خودتون یکی از اونها رو انتخاب کنین ولی برای اینکه کار شما راحت تر بشه من 2 تا از محبوب ترین فریمورک ها و کتابخانه ها از نظر کاربران رو بهتون معرفی میکنم :

 

کتابخانه React

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

 

چهارچوب Vue.js

Vue.js یک چارچوب جاوا اسکریپت پیشرفته و متن‌باز است. در ابتدا توسط ایوان یو (Evan You) در سال 2014 زمانی که برای Google کار می‌کرد، ایجاد شد. از آن زمان، Vue.js خیلی تغییر کرده است بازنویسی و به یک SPA عالی تبدیل‌شده است.

 

نکته:

البته ناگفته نماند هر کدوم از کتابخانه یا فریمورک های بالا در کنار خودشون کتابخانه ها و ابزارهای مرتبط با خود رو دارن که باید یاد بگیرین مثل Vuex برای Vue و یا Redux و MobX برای React خب تقریبا بحث جاوا اسکریپت تمام شد آسون بود نه؟ :))

 

 

یاگیری کمی بک اند !

تو این پست یعنی مراحل کامل طراح فرانت اند شدن! شاید پیش خودتون فکر کنین چرا بک اند؟ مگه ما فرانت اند کار نیستیم؟ همونطور که دوستانی بک اند کار باید کمی از فرانت اطلاع داشته باشن شما هم باید کمی اطلاع داشته باشین از نحوه کار اونها تا بتونین راحت باهم تعامل داشته باشین زبان های زیادی برای آشنایی وجود داره البته این نکته رو فراموش نکنین که نیاز نیست 100 درصد یاد بگیرین بک اند رو.

شما میتونین حتی node.js که یک رانتایم قدرتمند جاوااسکریپت برای بک اند هستش رو هم یاد بگیرین.

 

رعایت SEO در کدنویسی

شاید به عنوان مبتدی اصلا فکر نمیکردین SEO تو کدنویسی ضروری باشه ولی شما باید نکاتی رو یاد بگیرین مثل متاهای لازم برای کدنویسی یا استفاده از تگ های مفهومی در HTML و… که همه باید رعایت بشن آموزش های رایگان زیادی برای این موضوع میتونین تو وب پیدا کنین و پیشنهاد من به شما دست کم نگرفتن این موضوع مهم هستش.

 

رنگ شناسی رو فرا بگیرید

اصلا میدونستین برای طراحی وب باید بدونین از چه رنگ هایی باید استفاده کنین؟ مثالا رنگ سبز و یا آبی و… چه معنایی دارن؟ و کجاها باید ازشون استفاده کنین و چه جاهایی نباید استفاده کنین؟ یک مثال کوچیک زیر براتون میزنم :

مراحل کامل طراح فرانت اند شدن!

روانشناسی رنگ قرمز

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

– چه زمانی از قرمز استفاده کنیم؟

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

– چه زمانی از قرمز استفاده نکنیم؟

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

 

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

 

نکات تکمیلی

  • کد بزنید کد بزنید و باز هم کد بزنید شاید این حرف رو زیاد شنیده باشین چون حرفه ای ها همه با این روش حرفه ای شدن.
  • کد دیگران رو ببینید بله درسته برین به سایت های معروف و کد اونها رو بررسی کنین و یاد بگیرین.
  • هرگز موقع یادگیری وقفه زیادی نندازین چون شما رو دلسرد و از ادامه کار منصرف میکنه.
  • از ادیتور ساده در شروع یادگیری برنامه نویسی استفاده کنین تا کدها رو به شما پیشنهاد ندن تا بتونین کامل خودتون کد بزنین شاید در شروع کار عذاب آور باشه ولی در آینده به نفع شما خواهد بود.
  • بهترین ادیتور برای طراحی وب از نظر خیلی از دوستان Vs Code و Sublime و Atom هستن.
  • برای یادگیری آموزش اگه انگلیسی خوبی دارین حتما از سایت های خارجی استفاده کنین در غیر اینصورت حداقل از آموزش های کیفیت پایین سایت هایی مثل فرادرس و فرانش استفاده نکنین.

 

معرفی چندین سایت جالب

  • در سایت codepen و Dribbble شما میتونین ایده های جالب که توسط کاربرا اجرا شدن رو ببینید و حتی استفاده کنین.
  • در سایت flatcolorsui هم میتوانید انواع رنگ ها رو مشاهده کنید و تو طراحی هاتون استفاده کنین.
  • وقتتون رو برای ساخت انیمیشن نزارین بهتره از سایت animista و ده ها انیمیشن جذاب اون استفاده کنین.
  • احتمالا شما هم به دنیال آیکون های رایگان برای سایت خودتون هستین میتونین از flaticon استفاده کنین.
  • احتمالا خیلی شده تو کدنویسی خودتون مشکل دارین و میخاین کدهای خودتون رو به یکی نشون بدین سایت jsbin برای همین کار طراحی شده.
  • و در آخر از این سایت که استاد جادی عزیز زحمت ترجمه اون رو کشیدین دیدن کنید.

 

مراحل کامل طراح فرانت اند شدن!

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

 

این داستان ادامه دارد متوقف نشوید ….