راه كار طراحي خوب با html css

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

مرحله اول :

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

مرحله دوم :

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

مرحله سوم :

پروژه ای که انتخاب کردی سعی کن زیاد بزرگ نباشه که وقتی ۱ هفته شروع کردی خسته بشی و بزاری کنار - نمیگم خیلی آسون باشه فقط خیلی سخت نباشه.

مرحله چهارم :

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

مرحله پنجم :

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

مرحله ششم :

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

مرحله هفتم :

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

فکر کنم تونستم بهت کمک کنم - (مهم نیست مسیرت چقدر سخت باشه مهم اینه که از مسیری که داری میری لذت ببری)

تشکر از اینکه متنم رو خوندی امیدوارم راضی باشی .
@iliafaramarzpour

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

@arminbeik

@iliafaramarzpour
@arianh
ممنون از راهنماييتون
ببينيد براي اينكه كد html css يك سايت موفق رو بخوام تحليل كنم در مرورگر بايد inspect بگيرم كه اينكار براي من كه تگ ها تودرتو هستن باعث ميشه درست متوجه نشم چه كار كرده.
راهي وجود داره كه كد هاي html css يك سايت رو به صورت يكجا و درون فايل هاي خودش خروجي به من بده و بعد اونو دو اديتورم قرار بدم و تحليل كنم؟

به جای inspect روی view page source بزنید.
البته این فقط کد های html رو نمایش میده ، برای کد های css باید در تب source ( قبلش باید inspect رو بزنید و بعد وارد تب سورس بشید) فایل css سایت رو پیدا کنید و اون رو باز کنید یا اینکه در همون فایل Html دنبال لینک فایل css بگردید و اون رو باز کنید.

@arminbeik

@arminbeik
خواهش میکنم دوست خوبم .
ببینید برای تحلیل کردن میتونید از خوندن سورس های سایت های مختلف شروع کنی (نه فقط سایت های بزرگ هر سایتی رو که میبینی بررسی کن) و هر چقدر بررسی کنی شاید اوایل گنگ به نظر برسه ولی همیشه تحلیل کارتو حل نمیکنه هر چقدر بیشتر کد بزنید بیشتر متوجه میشید و تحلیل براتون آسون تر میشه - به جرات میتونم بهتون بگم 1 هفته کد نزنید باید از اول شروع کنید چون فرار هستن کد ها. همین دیگه نیاز به توضیح نداره - امیدوارم در این مسیر موفق باشید

اصولش رو بلد نیستین. قبل از طراحی html css ، باید یک تصویر اولیه داشته باشید. به مرور که حرفه ای شدین، میتونین رابط کاربری ( تصویری از پروژه ) رو در فتوشاپ یا ایلوستریتور یا xd پیاده کنین و یا بخرین و از روی اون طراحی تون رو انجام بدین. بله. افرادی هستن که رابط کاربری ( تصویر پروژه ) رو با مدرن ترین استایل ها و نمونه های موجود در بازار طراحی میکنن و به صورت لایه باز در اختیار تون میزارن که باهاش میتونین از بخش های مختلف طراحی شده، به صورت svg خروجی بگیرین و در پروژه تون ازش استفاده کنین.