7 Core CSS Skills
طراحی سایت

تسلط بر این 7 مهارت اصلی CSS شما را به یک جادوگر فرانت اند تبدیل می کند

تسلط بر این 7 مهارت اصلی CSS شما را به یک جادوگر فرانت اند تبدیل می کند

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

به قول معروف:

استاد کسی نیست که 10000 حرکت مختلف را تمرین کرده باشد، بلکه کسی است که 1 حرکت را 10000 بار تمرین کرده باشد.

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

انجام پروژه در فریلنس پروژه

چیدمان با استفاده از Flexbox & Grid

Flexbox و Grid دو تا از موثرترین ابزارهای CSS هستند که می‌توانید برای ایجاد طرح‌بندی از آنها استفاده کنید، اما ممکن است در ابتدا کمی سخت باشند. اما به محض اینکه به آن دست پیدا کردید، آنها ابزار اصلی شما خواهند بود.

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

شما هرگز نمی دانید که کاربران شما از چه دستگاهی برای دسترسی به وب سایت شما استفاده می کنند. بنابراین بسیار مهم است که مطمئن شوید که وب سایت شما در دستگاه هایی با هر شکل و اندازه ای واکنش گرا به نظر می رسد.

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

از شبه کلاس ها و شبه عناصر استفاده کنید

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

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

انیمیشن های Eye-candy ایجاد کنید

آیا می خواهید سایت خود را متمایز کنید؟ انیمیشن ها ابزاری عالی برای رسیدن به این هدف هستند!

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

با افزودن Shadows به Dark Side بپیوندید

Shadow یک راه عالی برای عمق بخشیدن به وب سایت شما است. CSS به شما اجازه می دهد تا انواع مختلفی از سایه ها را اضافه کنید، یعنی box-shadow، text-shadow و drop-shadow. دانستن اینکه چه زمانی از آن استفاده کنید شما را به مسیر طولانی می رساند.

توجه: سایه ها لزوماً نباید تاریک باشند.

MATLAB به زبان C++(در تب جدید مرورگر باز می شود )

عناصر موقعیت

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

  • لبه های دندانه دار را صاف کنید
  • فلکس در مقابل گرید
  • کلاس های شبه CSS
  • شبه عناصر CSS
  • CSS رمزگشایی :: قبل و :: بعد
  • لودر پویا با استفاده از CSS
  • چگونه به یک توسعه دهنده UI و UX باورنکردنی تبدیل شویم
  • 5 ترفند UX که باید در سال 2022 بدانید

ویژگی border-radius به توسعه دهنده اجازه می دهد تا یک رابط کاربری صیقلی ایجاد کند. اگر قصد توسعه UX بسیار حرفه ای را دارید، این یک ابزار عالی برای در اختیار داشتن زرادخانه است.

راهنمای توسعه دهنده برای طراحی وب برای غیر طراحان(در تب جدید مرورگر باز می شود )

تحقیقات نشان می دهد، نوشتن اهداف خود بر روی قلم و کاغذ باعث می شود 21 تا 39 درصد بیشتر به آنها دست پیدا کنید. این نوت بوک ها و ژورنال ها را بررسی کنید

من را برای نکات جدید هفتگی در حوزه فناوری دنبال کنید!

به یک فریلنسر فرانت‌اند توسعه با رتبه برتر نیاز دارید تا مشکلات توسعه شما را برطرف کند؟ با من تماس بگیرید

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

می خواهید وصل شوید؟ در لینکدین با من تماس بگیرید

نظرات

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