طراحی واکنش‌گرا با سی اس اس 3 - ایجاد صفحات وب سازگار با موبایل

آنچه یاد خواهید گرفت:

• سی اس اس 3 چیست؟
• تکامل سی اس اس: از سی اس اس 1 تا سی اس اس 3
• لینک‌دهی سی اس اس با به اچ تی ام ال: استایل‌شیت‌های خارجی، داخلی و درون‌خطی
• سینتکس و ساختار اولیه
• پشتیبانی مرورگر و سازگاری
• سلکتورهای کلاس، عنصر و ID
• ویژگی‌های فونت: font-family ،font-size ،font-weight و font-style
• ویژگی‌های متن: رنگ، text-align ،text-decoration و text-transform
• Text Overflow و Ellipsis
• طرح‌بندی متن چند ستونی
• درک مبانی مدل جعبه‌ای: مارجین، بوردر، پدینگ و محتوا
• Box Sizing: بررسی content-box در مقابل border-box
• ویژگی‌های نمایش: block ،inline ،inline-block و none
• رویت‌پذیری و شفافیت
• Floats و Clearfix
• موقعیت‌یابی: استاتیک، نسبی، مطلق، فیکس و چسبان
• و غیره

پیش‌نیازهای دوره

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

توضیحات دوره

آیا وب‌سایت شما برای عصر موبایل فرست آماده است؟

این دوره‌ی عملی، طراحی واکنش‌گرا با سی اس اس 3 ، راهنمای کامل شما برای ساخت وب‌سایت‌های شگفت‌انگیز، انعطاف‌پذیر و سازگار با موبایل از ابتدا است. ما ابهام را کنار می‌زنیم و به شما تکنیک‌های مدرن سی اس اس که متخصصان روزانه از آن‌ها استفاده می‌کنند را آموزش می‌دهیم.

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

در پایان این دوره، شما فقط وب‌سایت‌هایی که در موبایل کار می‌کنند را نمی‌سازید، بلکه با ذهنیت موبایل فرست آن‌ها را می‌سازید و تجربه کاربری استثنائی در هر دستگاهی که فکرش را کنید، ایجاد می‌کنید.

آنچه یاد خواهید گرفت:

• درک گریدهای سیال، تصاویر انعطاف‌پذیر و Media Queries - سه رکن اصلی طراحی واکنش‌گرا
• یاد بگیرید چگونه طرح‌بندی‌های یک‌بعدی برای کامپوننت‌هایی مانند نوارهای ناوبری، گالری‌های تصویر و بخش‌های کارت با ترازبندی و توزیع کامل ایجاد کنید.
• از قدرت طرح‌بندی‌های دو بعدی برای طراحی ساختارهای کامل صفحه با دقت، کنترل و کد کم استفاده کنید.
• breakpointها را تعریف و قوانین مختلف سی اس اس را برای دسکتاپ‌ها، تبلت‌ها و موبایل‌ها اعمال کنید.
• یاد بگیرید چرا شروع با طراحی موبایل منجر به کد تمیزتر، کارآمدتر و محصول کلی بهتر می‌شود.
• اطمینان حاصل کنید تصاویر، ویدئوها و iframe‌ها به درستی مقیاس‌بندی شوند و در تمام دستگاه‌ها واضح ظاهر شوند.
• ناوبری دسکتاپ خود را به یک منوی زیبا، سازگار با موبایل و کاربرپسند تبدیل کنید. (شامل آیکون معروف "همبرگری")
• متن خود را در هر صفحه نمایش با واحدهای نسبی (em ،rem و %) و واحدهای viewport (vw و vh) قابل خواندن و زیبا کنید.

در پایان دوره، قادر خواهید بود صفحات وب زیبا و کاربرپسند را از ابتدا بسازید و با اطمینان سی اس اس را برای ایجاد طراحی‌های حرفه‌ای به‌کار ببرید.

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

امروز در این دوره شرکت کنید و شروع به یادگیری کنید و به هنر سی اس اس 3 برای ساخت وب‌سایت‌های زیبا و جذاب تسلط پیدا کنید!

این دوره برای چه کسانی مناسب است؟

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