دسته‌ها
شغل پردرآمد با سرمایه کم

چگونه توسعه دهندگان در واقع از CSS استفاده می کنند

شما CSS را می شناسید ، درست است؟ این کد همچنین برای ایجاد صفحات وب با HTML (Hypertext Markup Language) با HTML (Hypertext Markup Language) همگام شده است.

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

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

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

"90٪ CSS چیدمان است. مکانهایی که در یک صفحه قرار دارند و نحوه تغییر آنها بر اساس اندازه صفحه نمایش ، بیشترین کاری است که شما به عنوان یک توسعه دهنده جلویی در CSS انجام می دهید. بله ، استایل ، اندازه و اندازه دکمه ها وجود دارد ، اما هنوز هم باید به آنها بگویید که در کدام صفحه قرار دارند. بنابراین ، Flexbox و CSS Grid همه چیز هستند. آنها ابزارهای مدرنی هستند که انتظار می رود از طراحی روز افزون بالاتر در توسعه وب مدرن انتظارات بیشتری را در نظر بگیرند. "

اکنون که ویل به ما اجازه داده است تا دو مهمترین ابزار پیشرفته CSS را در اختیار داشته باشیم ، بیایید کمی عمیق تر کار کنیم. Flexbox

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

با Flexbox ، می توانید صفحات وب ایجاد کنید که اندازه و حتی ترتیب عناصر تغییر کند تا دقیقاً متناسب با صفحه نمایش باشد ، بدون اینکه همپوشانی داشته باشید. یا فضای خالی. به عنوان مثال ، این سایت Etsy با استفاده از Flexbox بر روی لپ تاپ 13 اینچی است:

و همین سایت در تلفن 6 اینچی:

همانطور که می بینید ، به جای خرد کردن چهار مورد در بالای یکدیگر بر روی دستگاه کوچکتر و یا جای خالی پس از دو مورد روی دستگاه بزرگتر ، Flexbox سایز را تغییر می دهد از عناصر برای کار کامل در فضای موجود.

CSS Grid

در حالی که Flexbox برای طرح انعطاف پذیر مطالب در ستون ها یا ردیف ها ایده آل است ، CSS Grid این امکان را می دهد که همزمان با هر یک از ستون ها و ردیف ها چیدمان کنید. و دقیقاً محتوا را در جایی که می خواهید قرار دهید.

این ویژگی های CSS Grid می تواند به شما در ساخت پوسته های پیچیده تر و غیر معمول کمک کند. شما حتی می توانید Flexbox و CSS Grid را برای به دست آوردن بهترین ها در هر دو دنیا ، مانند این شرکت ها از چند شرکت مشهور ، ترکیب کنید:

سایت سفر Airbnb از Flexbox در صفحه اصلی خود به همراه CSS Grid در بخش های خاص ، مانند ماجراهای Airbnb ، به عنوان مثال:

سایت مواد غذایی Allrecipes دارای CSS Grid برای نمایش نتایج جستجو:

و غول فناوری اپل محصولات خود را با طرح جسورانه CSS Grid نشان می دهد:

چگونه می توانید از CSS پیشرفته

استفاده کنید ] از این نمونه ها ، به راحتی می توان فهمید که توسعه دهندگان حرفه ای چگونه از ابزاری مانند Flexbox و CSS Grid برای ساختن برخی از وب سایت های معروف دنیا استفاده می کنند. اما اگر تازه وارد دنیای فناوری شوید ، چه می کنید؟ آیا باید CSS پیشرفته را نیز بیاموزید؟

طرف مقابل ما (و به هر حال خود مهارت مهارت) ، ویل ، می گوید:

"[With advanced CSS] ، هنگام مواجهه با شما درک بیشتری خواهید داشت. طرحی از نحوه ایجاد چیزی. بسیاری از اوقات ، به خصوص وقتی که برای اولین بار به دنیای جلوی غواصی می روید ، به چیزی نگاه می کنید و از شروع آن شک می کنید زیرا مطمئن نیستید که برای دستیابی به طراحی مشخص از چه چیزی استفاده کنید یا چگونه از آن استفاده کنید. یادگیری مفاهیم و ابزارهای پیشرفته تر طرح ، ترس را فتح می کند. اینگونه نیست که شما [will then] می دانید که چگونه می توانید چیزی بسازید ، [but] می توانید سریعتر بسازید. که هم به عنوان کارمند و هم به عنوان یک فریلنسر بسیار زیاد است. " به دنبال آنچه در سایت های الهام / طراحی مانند Pinterest و Dribbble محبوب است ، باشید. آنچه در اینجا محبوب است نیز یک سبک محبوب برای اثبات ساختن شما خواهد بود. سپس فقط تمرین کنید ، تمرین کنید ، تمرین کنید. طرح بندی های پیچیده و طرح بندی های مختلف بسازید. هرچه تجربه بیشتری در تلاش برای ساختن آنها داشته باشید ، ترس کمتر و اعتماد به نفس بیشتری برای مقابله با هر طرحی خواهید داشت. "

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

و ، برای یادگیری CSS پیشرفته مورد نیاز کار رویایی خود را زمین کنید ، دوره CSS پیشرفته را که به زودی به Skillcrush می آید ، بررسی کنید!