برای اطلاع از آپدیت دوره ها و تخفیف ها عضو کانال اطلاع رسانی ما بشید ما شوید !
02128428905
0

مراحل یادگیری طراحی سایت : قدم به قدم

نقشه راه یادگیری طراحی سایت، مسیر حرفه ای ها

ما در این مقاله سعی داریم تا شما را با مراحل یادگیری طراحی سایت به صورت قدم به قدم آشنا کنیم.

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

امروز در دنیای تکنولوژی تمام کارهای روزمره انسان با اپلیکیشن ها و وب سایتهای معتبر قابل انجام است ؛

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

از همین رو طراحی وب سایت یا برنامه نویسی اپلیکیشن یکی از پردرآمدترین شغل های حال حاضر دنیا به شمار می آید .

اما خوب راجع به یک مسئله باید ابتدای کار صحبت کنیم  و مرحله به مرحله بدونیم در طراحی سایت باید چه چیزهایی یاد بگیریم،

و اونم اینه که اصلاً طراحی وب از کجا شروع میشه به کجا ختم میشه

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

 

طراحی وب سایت چیست؟

به فرایند طراحی ، پیاده سازی و برنامه نویسی یک صفحه بر بستر وب رو طراحی وب سایت می گویند ،

که بر عهده طراح وب قرار دارد و طراح وب موظفه تا تمام خواسته‌های کارفرمایی خودش رو بر اساس برنامه‌های تحت وب نوشته و آن را پیاده سازی و ارائه بکنه،

در ادامه با سبز لرن همراه باشید تا به صورت دقیق مراحل یادگیری طراحی سایت را بررسی کنیم و تبدیل به یک متخصص طراحی سایت شویم!

 

فول استک چیست؟

قبل از اینکه بریم سراغ مراحل یادگیری طراحی سایت ،ابتدا در مورد فول استک صحبت کنیم،

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

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

حتی راه های فرعی را هم بلد باشه بهش برنامه نویس فول استک میگن برنامه نویسی بیشتر از ۷ الی ۸ زبان بلدند

و کارهای خودشون رو همیشه با استفاده از راحت ترین زبان پیاده سازی می کنند .

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

اما برنامه نویس فول است یه سری قابلیت های دیگه هم داره و اونم اینه که همیشه وقتی میخواد پروژه ای رو شروع بکنه

تمام ابعاد این پروژه را در نظر میپگیره و بهترین و راحت ترین و منعطف ترین زبانو برای این پروژه انتخاب میکنه .

 

 

 

مراحل تبدیل شدن به یک طراح سایت

 

گام اول : آشنایی با مفاهیم مقدماتی طراحی سایت

خوب شما توی گام اول از مراحل یادگیری طراحی سایت ،

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

به طور مثال شما باید با دامنه و هاست آشنا باشید ؛

همچنین باید بدونید اینکه چطوری پروژه هاتون رو روی هاست پیاده‌سازی کنید

و صد البته شما باید با مباحثی مثل نرم‌افزارها و کلاً ساختمان وب سایت ها آشنا باشید که وب سایت ها از چه بخش هایی تشکیل میشن و تو چه دسته هایی تقسیم می شوند .

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

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

 

گام دوم : یادگیری html

توی مقاله سیر تا پیاز html بهتون توضیح دادیم که اچ تی ام ال چقدر زبان مهمی در طراحی وب است.

html چیست؟ 

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

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

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

زمان یادگیری html

خیلی مختصر بخوام بگم اگر خیلی باهوش باشید یادگیری اچ تی ام ال برای شما کلاً یک هفته زمان میبره اما

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

 

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

 

و اما میزان درآمد ؛ عملا شما با یادگیری html به هیچ عنوان نمی توانید درآمدی داشته باشید و باید گامهای مکملش یعنی گام دوم و سوم را حتماً یاد بگیرید تا به یک درآمد معقول و متناسب برسید .

آموزش رایگان و مقدماتی HTML با طعمی متفاوت + مینی پروژه های جذاب

گام سوم: یادگیری Css

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

شما در گام دوم با html اومدید و اسکلت وبسایت خودتون رو کدنویسی کردید ؛

ساختمان وب سایت خودتون رو به طور کامل طراحی کردید و حالا با استفاده از css شما باید بیاید و این اسکلت ساختمانتون رو نما بدید و اون رو زیباتر بکنید

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

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

 

زمان یادگیری css

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

اما اگر بخواید حرفه ای تر شید یه کم مفاهیم براتون سخته که جا بیفته شما حداقل به ۴ هفته برای یادگیری css نیاز دارید ،

مباحث Css زیاد هستند و انتظار میره شما بعد از هر مبحث اون رو با html ترکیب کنید

و یک مینی پروژه تحویل بدید تا هم بتونید بر روی کدهامسلط بشید هم بتونید پروژه های خودتون رزومه تون رو قوی‌تر کنید

 

توی دوره css سبزلرن ما به طور کامل تلفیق html و Css را برای شما آوردیم و تقریباً هر دو قسمت یک مینی پروژه طراحی میکنیم.

آموزش رایگان و مقدماتی CSS + مینی پروژه های کاربردی

 

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

 

درجه سختی css

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

در رابطه با درآمد  css هم بهتون بگم که تلفیقی از html و css میتونه درآمد برای شما داشته باشه ولی نه زیاد و چشم به امید درآمد میلیونی در ماه فقط با html و css نباشید .

 

گام چهارم : فریمورک بوت استرپ

۱۰۰% بهتون بر خورده که با گوشی یا تلویزیون یا لپ تاپ یا کامپیوتر خودتون به وب سایت‌هایی مراجعه کنید

و متوجه این بشید که این وب سایت در گوشی به یک شکل ، در تلویزیون به یک شکل و حتی در  لپ تاپ هم به یک شکل دیده میشه

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

 

بوت استرپ به زبان ساده!

ما با استفاده از bootstrap می‌آیم و تمام کدهامون رو برای سایزهای مختلف و دیوایس های متفاوت به طور مختلف برنامه نویسی و کد نویسی می‌کنیم

به طوری که می‌گویم اگر وب سایت ما در کامپیوتر باز شد خوب طبیعتاً بزرگتر نشون داده بشه باکسهای ما ؛ امکان و فضای بیشتری دارند

اما اگر در گوشی نشان داده شد باکس های ما فضای کمتری دارند و طبیعتا ظیر هم قرار خواهند گرفت،

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

 

بحث اینکه چرا بهشون میگیم فریمورک بوت استرپ؟

به شدت طولانی و مفصله ولی شما در همین حد بدونید  که بوت استرپ بر پایه css کاملاً ساخته شده از Css است

و ما فقط دستوراتی که با استفاده از Css بهینه و توسط افراد با دانش بالاتر ساخته شدن را در پروژه خودمون استفاده میکنیم .

 

به زودی یک دوره آموزش بوت استرپ در وبسایت سبز لرن منتشر میشه که به شدت توصیه می کنم در این آموزش شرکت کنید.

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

در رابطه با درجه سختی باید بگم که باز هم بوده بوت استرپ در درجه آسون قرار میگیره .

 

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

هم برای افراد باهوش و مشتاق به کار حدوداً یک هفته و برای افرادی که نیاز به تمرین بیشتر دارند ۹ الی ۱۰ روز .

 

اما بحث شیرین درآمد از بوت استرپ

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

و ممکنه در یک ماه چهار پروژه بگیرید و مثلاً درآمدتون از ۵ میلیون هم بیشتر بشه در ماه .

 

گام پنجم : یادگیری زبان برنامه نویسی جاوا اسکریپت (js)

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

زبان برنامه نویسی جاوا اسکریپت از این روز سخت است که شما وارد دنیای برنامه نویسی میشید،

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

و نحوه نوشتار و به اصطلاح سینتکس برنامه نویسی کاملاً با کدنویسی مجزاست

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

 

قدرتمند ترین زبان تا کنون!

تا به الان در دنیای طراحی وب جاوا اسکریپت قدرتمند ترین زبان برنامه نویسی است.

زیرا تمام جوانب یک زبان برنامه نویسی کامل رو داره و قدرتمند ترین زبان سمت کاربر و حتی جدیداً سمت سرور دنیای وب است که هیچگونه رقیبی ندارد.

و البته دارای هزاران کتابخانه و فریم ورک قدرتمند و به روزه .

 

منابع جاوا اسکریپت

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

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

 

مثالی از زبان قدرتمند طراحی سایت وب، جاوا اسکریپت

زبان برنامه نویسی جاوا اسکریپت کاملاً به ظاهر و تعامل با کاربر بستگی دارد.

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

به طور مثال یک فرم توسط کاربر پر میشه با نام امیر و فامیلی دینی حالا وقتی کاربرد دکمه ثبت رو میزنه پیامی مبنی بر اینکه ممنونیم امیر دینی به کاربر نشون داده میشه

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

 

فریم ورک و کتابخانه های java script

زبان جاوا اسکریپت دارای هزاران فریم ورک و کتابخانه هست ؛

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

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

که یادگیری اون امروزه به شدت نیاز و خطا خیلی‌ها به جای یادگیری جاوا اسکریپت به طور کامل روی به یادگیری جی کوئری (jq) میارن .

 

تفاوت جاوا اسکریپت و جی کوئری

در یک مثال خیلی عملی اگر قرار باشه بهتون تفاوت جاوا اسکریپت و جی کوئری رو در پیاده کردن یک پروژه بگم اونم اینه که:

با جاوا اسکریپت ممکن ما ۵۰ خط بنویسیم تا به خروجی مد نظر برسیم اما در جای دیگری میتونیم با نوشتن تنها پنج خط کد به همون خروجی برسیم .

 

این نکته را هم در نظر داشته باشید که کتابخانه ها و یا فریم ورک ها هیچ وقت به قدرتمندی خود جاوا اسکریپت نیستند

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

 

درجه سختی js

راجع به درجه سختی بخوام صحبت بکنم زبان جاوا اسکریپت سخت ترین گام در کل طراحی وب است

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

 

مدت زمان یادگیری js

مدت زمان یادگیری جاوا اسکریپت به نوعی تا ۳ الی ۴ ماه هم برای افرادی که مداوم و به طور متوالی تمرین می کنند

زمان خوبی است اما برای دوستانی که وقت کمتری دارند و قصد دارند بیشتر در این زمینه وقت بزارن ۶ ماه زمانی مناسبی است .

 

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

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

اما اگر شما با فریم ورک های معروف و یا کتابخانه های معروف جاوا اسکریپت آشنا باشید

مانند جی کوئری و انگولار یا node.js ؛ شما به راحتی می توانید درآمد ۱۵ ملیون یا بیشتر در ماه داشته باشید .

 

گام ششم :  یادگیری زبان برنامه نویسی Php

 

php چیست؟

زبان برنامه نویسی php یک زبان back-end محسوب میشه:

ینی کاری به ظاهر نداره و شما میتونید با استفاده از این زبان کارهایی که پشت وب سایتتون میوفته رو مدیریت بکنید

و به طورکلی کاربرد این زبان در بخش داده ها و سیستم دیتابیس شما هست ،

 

مثال از زبان php

مثلا در بخش ورود و ثبت نام به وب سایت ، کاربری وقتی میخاد فرم ورود رو وارد بکنه و نام کاربری و پسوردش رو میزنه

شما با استفاده از php و دیتابیس متصل بهش که sql server نام داره ، کاری رو طرح ریزی میکنید که بره و در بخش داده های وب سایت و بررسی بکنه،

ببینه همچین کاربری با همچین مشخصات ای وجود داره یا خیر اگر وجود داشت اجازه ورود بهش داده میشه اما

اگر کاربری با مشخصات وارد شده پیدا نشده باشه باید یک ارور به اون بده و با استفاده از ارور کاربر را به ثبت نام راهنمایی بکند،

وقتی کاربر به بخش ثبت نام وارد میشه یک سری اطلاعات وارد میکنه این اطلاعات توسط php در دیتابیس ذخیره میشه

و بعد اگر کاربر بخواهد وارد بشه و همان اطلاعات را وارد بکنه در php بررسی میشه و بعد از تایید کاربر به سایت وارد .

 

کاربرد های زبان php

کاربرد های زبان php بیشتر پشت پرده وب سایت هستند و کارهای پشت پرده رو انجام میدن

اما در زبان های قبلی و گام های پیشین به شما گفتیم که ممکنه هیچ جایگزینی برای گام‌های قبل وجود نداشته باشه

اما در زبان php و گام پنجم ما یک رقیبی به نام asp.net داریم که با قدرت هم راه php می رود

و قدرت هر دو به یکسان است اما با توجه به نیاز پروژه از php یا asp استفاده می‌شود .

 

میزان سختی زبان طراحی وب، php

اما در رابطه با میزان سختی زبان php هم باید خدمتتون بگم که چیزی مثه جاوا اسکریپت منتظر شماست

و میزان سختی آن به همان صورت و در درجه سختی قرار دارد .

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

و طبیعتاً اگر ۵ وبسایت در ماه هم سفارش بگیرید درآمدتان ۲۰ میلیون به بالا خواهد بود .

و اما تمام این بخش درآمدها به یادگیری زیرکانه و ظریفانه شما در هر گام بستگی داره شما هر چقدر هرکدام از این گام‌ها که نام برده شد

قوی تر باشید درآمد بیشتری هم دارید .

در رابطه با زمان یادگیری php شش ماه کافیست .

 

جمع بندی

خب ۶ بخش از مراحل یادگیری طراحی سایت که نام برده شد ؛ شش گام اساسی برای یادگیری طراحی وب بود ؛

موارد فرعی مانند یادگیری گرافیک مباحث ui و ux و غیره می توانند درآمد شما را در دنیای وب بیشتر و بیشتر بکند.

پس در این راه های فرعی هم زمان کمی نگذارید و آنها را هم یاد بگیرید تا به یک درآمد ایده‌آل و حرفه‌ای برسید.

 

امیدوارم که از این مقاله راضی بوده باشید

تا مقاله ای دیگر از من ، امیر دینی ، خدا یار و نگهدارتان

موفق باشید

دیدگاه کاربران
  • Zerohour 5 آگوست 2020

    سلام بر سایت سبزلرن عزیز
    ببخشید میخاستم بدونم دوره ی php رو ازکجا یادبگیریم خوبه؟ پیشنهادی اگر دارید خیلی ممنونتون میشم

    • sasan 5 آگوست 2020

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *