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

مبانی اولیه یادگیری طراحی سایت

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

• HTML
• CSS
• JavaSCript

این سه تایی که بالا گفتم بهتون به ترتیب مبانی اولیه یادگیری طراحی سایت هستن.

اما بریم کمی این سه تا موضوعی که گفتم رو بیشتر راجبشون توضیح بدم.

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

دومین موضوعی که مطرح کردم CSS بود. این CSS چیکار میکنه؟ میاد این صفحاتی که با HTML ساختیم رو استایل دهی میکنه. یعنی چی؟ یعنی میاد شکل وشمایل و ظاهر صفحه مارو خوشگل میکنه. برای اینکه با CSS بیشتر آشنا بشید بیاید اینجا کلیک کنید تا به صفحه مربوطه خودش برید و اختصاصی تر راجب اطلاعات کسب کنید.

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

ابزارها و فریم‌ورک‌ها

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

• Git
• CSS Framework
• JS Framework

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

مورد بعدی هم که براتون لیست کردم فریم ورک CSS هستش که گفتیم برای استایل دهی به صفحه وبمون هستش حالا برای سریعتر کردن و حرفه ای تر کردن این استایل دهی میایم و فریم ورک های مخصوصی استفاده میکنیم.مثل :Bootstrap و Tailwind CSS .که طبق روال مباحث قبلی این مبحث رو هم ایجا کلیک کنید تا بیشتر راجب این فریم ورک بخونید.

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

طراحی و تجربه کاربری (UI/UX)

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

• طراحی رابط کاربری(UI)
• تجربه کاربری(UX)

اما این دوتا چی هستن و چرا مهم هستن. ببینید هرآنچه که شما توی یک وبسایت میبینید مربوط میشه به User Interface یا رابط کاربری. مثل دکمه ها، منوها، بنرها، ساختار لیست شدن محتوا و… پس هرچی که شما به عنوان یک کاربر میبینید میشه رابط کاربری. حالا باید بتونیم این رابط کاربری رو طراحی کنیم. اما بریم ببینیم که تجربه کاربری چیه که خیلی ها این دوتا رو باهم اشتباه میگیرن و حتی فکر میکنند که این ها یکی هستند ولی اینجور نیست و باهم تفاوت دارند. تجربه کاربری که بهش User Experience میگن میاد تجربه کلی کاربر رو توی تعامل با سایت نشون میده.شامل جنبه هایی مثل سهولت استفاده، دسترسی به اطلاعات و رضایت کلی کاربر از سایت رو نشون میده هدفشم اینه تجربه ای ساده و دلپذیر و کارآمد برای کاربر ایجاد بکنه. به طور خلاصه UI بیشتر به ظاهر و حس بصری سایت میپردازه اما UX به تجربه کلی و احساس کاربر در استفاده از سایت میپردازه. بازم اگر میخواید بیشتر راجب این دوتا موضوع بخونید اینجا کلیک کنید تا مقاله این دوتا رو کاملتر بخونید.

 برنامه‌نویسی سمت سرور (Back-End)

بعد از طراحی رابط کاربری باید بریم سراغ اینکه وقتی روی گزینه ها و دکمه و نوشته هایی که طراحی کردیم توی رابط کاربری کارهای خاصی رو انجام بدن باید بریم سراغ برنامه نویسی سمت سرور که اصطلاحا بهش میگن بک اند یا Back-End که بخوایم حالا سایتی رو که کاربر داره میبینتش بخواد کار کنه و عملیاتی رو انجام بده. ما این بخش برنامه نویسی بک اند رو به دو قسمت تقسیم میکنیم.

• زبان های برنامه نویسی
• پایگاه داده ها

ما توی زبان های برنامه نویسی باید بیایم زبان مورد نیاز یا مورد علاقه خودمون رو انتخاب بکنیم و شروع کنیم به یادگیریش. پس این مرحله مرحله خیلی مهمی هستش که ما باید یک انتخابی رو داشته باشیم تا بخوایم دیگه از این به بعد توی اون راستایی که انتخاب کردیم حرکت کنیم. انواع زبان های برنامه نویسی سمت سرور هم میشن مثل PHP و Node.js و Python و Ruby و…. که باید انتخابتون رو بین اینها انجام بدید. برای اینکه با این زبان ها بیشتر آشنا بشید و اونها رو بیشتر بشناسید تا انتخابتون آسون تر باشه پیشنهاد میکنم این مقاله من رو بخونید.

اما مبحث بعدی ما پایگاه های داده هستند که باید ما اطلاعاتی که نیاز داریم رو جایی ذخیره بکنیم پس باید سایتمون رو به یک پایگاه داده متصل بکنیم. پس باید ارتباط با یک پایگاه داده روهم بلد باشیم تا اطلاعاتمون رو نگهداری بکنیم. SQL و Nosql و mysql از انواع پایگاه های داده هستند که کار باهاشون رو باید یادبگیرید.

ابزارهای توسعه و استقرار

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

• Web Server
• DevOps

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

اما بریم سراف Devops که از ترکیب دوتا کلمه Development و Operations که همون میشن عملیات و توسعه تشکیل شده. این مفهوم به همکاری نزدیک بین تیم‌های توسعه نرم‌افزار و تیم‌های عملیاتی اشاره داره. هدف DevOps اینه که فرآیند توسعه و استقرار نرم‌افزار سریع‌تر و کارآمدتر بشه. به زبان ساده تر میاد به تیم ها کمک میکنه تا با همکاری بیشتر و استفاده از ابزارهای خودگارسازی، سایت ها رو سریعتر و با کیفیت تر به کاربرا ارائه بدن. Docker و Kubernetes هم دو نوع Devops هستند.

برای اینکه بیشتر با این موضوع آشنا بشید این مقاله من رو بخونید.

پروژه های عملی

بعد از اینکه تمام مراحل بالا رو رفتید و گذروندید باید دیگه برید سراغ کارهای عملی و به صورت عملی و پروژه ای کار کنید تا تجربه کافی رو کسب کنید.

اول از همه باید برید سراغ پروژه های کوچیک و ساده تا سریعتر بخش به بخش این کار هارو یادبگیرید حالا که پروژه های کوچیک رو به اندازه کافی گذروندید باید برید سراغ پروژه های بزرگ تر و پیچیده تر و اونجا دیگه بعد از کسب تجربه کافی عیار خودتون رو بسجنید.

به روز ماندن

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

• مطالعه مستمر
• شرکت در انجمن ها

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

توی بحث شرکت توی انجمن ها هم باید عرض کنم که باید به صورت مستمر توی انجمن های برنامه نویسان و طراحان وب سایت شرکت کنید و مشارکت داشته باشید.

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

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

ومن الله توفیق…