پیشرفته‌ترین و مدرن‌ترین دوره CSS در اینترنت: تسلط بر Flexbox، CSS Grid، طراحی واکنش‌گرا (Responsive Design) و بسیار فراتر از آن.
آیا مدتی است که کدنویسی CSS انجام می‌دهید، اما می‌خواهید سطح کار خود را به مرتبه بالاتری ارتقا دهید؟ آیا اصطلاحات تخصصی (Jargon) در CSS مانند وراثت (Inheritance)، اختصاصیت (Specificity) یا آبشار (Cascade) برایتان مبهم و گیج‌کننده است؟
چه می‌شد اگر یک منبع واحد وجود داشت که می‌توانستید تمام ویژگی‌ها و تکنیک‌های پیشرفته و مدرن CSS را که درباره‌شان خوانده‌اید، یک‌جا یاد بگیرید؟
خبر خوب این است که چنین منبعی وجود دارد!
به دوره «Advanced CSS and Sass» خوش آمدید؛ پیشرفته‌ترین، مدرن‌ترین و کامل‌ترین دوره آموزشی CSS در اینترنت. این دوره تمام آن چیزی است که از یک دوره پیشرفته CSS انتظار دارید و حتی فراتر از آن.
شما در این دوره انیمیشن‌های پیچیده CSS، تکنیک‌های پیشرفته طراحی واکنش‌گرا (Responsive Design)، صفحه‌آرایی‌های فلکس‌باکس (Flexbox)، پیش‌پردازنده Sass، معماری CSS، مفاهیم بنیادین CSS و بسیاری موارد دیگر را خواهید آموخت.
مانند تمام دوره‌های من، پروژه‌هایی زیبا و با طراحی دقیق خواهید ساخت که به آن‌ها افتخار خواهید کرد و شما را برای پیاده‌سازی مستقل پروژه‌های پیچیده آماده می‌سازد.
پس از اتمام این دوره، شما:
۱) با مدرن‌ترین و پیشرفته‌ترین ویژگی‌ها و تکنیک‌های CSS کاملاً همگام و به‌روز خواهید بود؛
۲) بر فناوری‌های پیشرو در صفحه‌آرایی یعنی Flexbox و CSS Grid مسلط خواهید شد؛
۳) برای ساخت چیدمان‌های واکنش‌گرا (Responsive Layouts) برای انواع دستگاه‌ها و موقعیت‌ها آماده خواهید بود؛
۴) نحوه کارکرد CSS را در پشت صحنه (Behind the Scenes) به طور عمیق درک خواهید کرد؛
۵) قادر خواهید بود با استفاده از Sass، پایگاه‌های کد (Codebases) بزرگ CSS را به صورت خوانا، قابل استفاده مجدد و نگهداری، معماری کنید.
لطفاً توجه داشته باشید که این دوره اصلاً برای افراد کاملاً مبتدی نیست؛ بنابراین باید در سطح متوسطی از HTML و CSS باشید (اگر این‌طور نیست، لطفاً دوره دیگر من را بررسی کنید).
سرفصل‌های جامع دوره (What you'll learn)
این دوره با بیش از ۲۸ ساعت آموزش، بسیار جامع و حجیم است. در ادامه دقیقاً آنچه را که یاد خواهید گرفت آورده شده است:
کوهی از تکنیک‌های مدرن و پیشرو در CSS برای خلق افکت‌ها و طرح‌های خیره‌کننده: شامل clip-path، background-clip، mask-image، background-blend-mode، shape-outside، فیلترها (filter)، backdrop-filter، object-fit، تراش‌خوردگی‌ها (transform)، ستون‌بندی (column-count)، خط‌پیوند (hyphens)، پرسپکتیو (perspective)، تابع calc() و متغیرهای سفارشی CSS (ویژگی‌های سفارشی)؛
انیمیشن‌های پیشرفته CSS: با استفاده از keyframes@، ویژگی animation و transition؛
انتخابگرهای پیشرفته CSS: شامل کلاس‌های کاذب (Pseudo-classes) و عناصر کاذب (Pseudo-elements) مورد نیاز برای توسعه مدرن وب؛
نحوه کارکرد CSS در پشت صحنه: بررسی فرآیند آبشاری (Cascade)، اختصاصیت (Specificity)، وراثت (Inheritance)، پردازش مقادیر (Value Processing)، مدل فرمت‌دهی بصری (Visual Formatting Model)، مدل جعبه‌ای (Box Model)، انواع جعبه‌ها (Box Types)، الگوهای موقعیت‌یابی (Positioning Schemes) و بافت‌های پشته‌سازی (Stacking Contexts)؛
معماری CSS: قانون 7-1 (The 7-1 Rule)، طراحی کامپوننت‌محور، متدولوژی BEM و نوشتن کدهای قابل استفاده مجدد، قابل نگهداری و مقیاس‌پذیر؛
مقدمه‌ای بر Sass: متغیرها، تودرتونویسی (Nesting)، فایل‌های تکه‌ای (Partials)، ایمپورت‌ها، Mixinها، توابع، Extends و غیره؛
استفاده از Sass در پروژه‌های دنیای واقعی: تنظیم متغیرهای عمومی، ساختاردهی با قابلیت استفاده مجدد، معماری CSS و مدیریت Media Queryها؛
اکوسیستم NPM: راه‌اندازی فرآیند توسعه جهت کامپایل (Compile) خودکار Sass و ریلود شدن خودکار مرورگر، و ایجاد یک فرآیند بیلد (Build Process) برای متصل کردن (Concatenate)، افزودن پیشوندها (Prefix) و فشرده‌سازی (Compress) فایل‌های CSS؛
طراحی واکنش‌گرای مدرن: گریدهای سیال (Fluid Grids)، انواع صفحه‌آرایی، تصاویر انعطاف‌پذیر، استفاده از مِدیا کوئری‌ها جهت تست عرض‌های مختلف صفحه، تراکم پیکسل (Pixel Densities) و قابلیت‌های لمسی؛
گردش کارهای پیشرفته در طراحی واکنش‌گرا: استراتژی‌های Mobile-first در برابر Desktop-first، انتخاب نقاط شکست (Breakpoints)، واحدهای em در مقابل rem و Feature Queries برای تست پشتیبانی مرورگرها؛
تصاویر واکنش‌گرا در HTML و CSS جهت بارگذاری سریع‌تر صفحات: سوئیچ کردن بر اساس رزولوشن، سوئیچ کردن بر اساس تراکم پیکسلی و مدیریت جهت هنری (Art Direction) تصاویر؛
تصاویر SVG در HTML و CSS: چرایی و نحوه استفاده از SVG، تولید اسپرایت‌های SVG (اسپرایت‌شیت)، تغییر رنگ SVG در CSS و بهترین الگوهای عملی؛
ویدیوها در HTML و CSS: ساخت افکت ویدیو در پس‌زمینه؛
صفحه‌آرایی با Flexbox: مفاهیم اصلی، معرفی ویژگی‌های اختصاصی کانتینر فلکس و آیتم‌های فلکس، و تکنیک‌های موقعیت‌یابی پیشرفته در یک پروژه بزرگ و واقعی؛
صفحه‌آرایی با CSS Grid: مفاهیم کلیدی، مقایسه تفاوت‌های CSS Grid و Flexbox، و تکنیک‌های پیاده‌سازی چیدمان در یک پروژه واقعی (این بخش به تنهایی می‌تواند یک دوره کامل باشد!).
چرا باید در این دوره شرکت کنید؟
همان‌طور که دیدید، این دوره کاملاً پر از محتواست. اما شاید هنوز مطمئن نیستید که واقعاً نیازی به یادگیری CSS پیشرفته دارید یا خیر؟
دلیلش احتمالاً این است که شروع کار با CSS بسیار ساده است؛ در واقع، بیشتر توسعه‌دهندگان اهمیت و قدرت واقعی CSS را بسیار دست‌کم می‌گیرند. اما این یک تصور کاملاً اشتباه است!
این CSS است که به طرح‌های ما روح و جان می‌بخشد و کارهای فوق‌العاده زیادی می‌توان با آن انجام داد. تسلط بر تکنیک‌های پیشرفته‌ای چون Flexbox، CSS Grid و انیمیشن‌ها، به شما برتری چشمگیری نسبت به بسیاری از توسعه‌دهندگان CSS می‌دهد که هنوز از روش‌های قدیمی و منسوخ استفاده می‌کنند.
علاوه بر این، زمانی که بخواهید کدهای پروژه‌های بزرگ را نگهداری کنید یا به سطح استادی برسید، CSS می‌تواند به یک کابوس واقعی تبدیل شود؛ بنابراین، داشتن درک عمیق از مفاهیم بنیادین آن برای هر توسعه‌دهنده فرانت‌اند جدی، یک ضرورت مطلق است و این دوره در تمام این مسیر به شما کمک خواهد کرد.
با ثبت‌نام در این دوره چه چیزهایی دریافت می‌کنید؟
- ۲۸ ساعت ویدیوی به‌روز با کیفیت HD با قابلیت جستجو و دسترسی آسان؛
- زیرنویس انگلیسی حرفه‌ای (غیرخودکار)؛
- منابع طراحی قابل دانلود + کدهای اولیه (Starter Code) و کدهای نهایی (Final Code) برای هر بخش؛
- اسلایدهای قابل دانلود برای ویدیوهای تئوری (قول می‌دهم خسته‌کننده نباشند!)؛
- پشتیبانی رایگان در بخش پرسش و پاسخ (Q&A) دوره؛
- چالش‌های کوچک متعدد در طول ویدیوها برای سنجش میزان پیشرفت خودتان.
اگر تا اینجای متن همراه من بوده‌اید، لطفاً ویدیوی معرفی (Promo) دوره را تماشا کنید تا پروژه‌هایی را که با هم خواهیم ساخت ببینید؛ قول می‌دهم شگفت‌زده خواهید شد :)
پس از آن، امیدوارم بتوانم به عنوان دانشجوی جدید به شما خوش‌آمد بگویم. مطمئنم عاشق این دوره خواهید شد!
این دوره برای چه کسانی مناسب است؟
- توسعه‌دهندگان CSS که می‌خواهند مهارت‌های خود را به مدرن‌ترین سطح ممکن برسانند.
- توسعه‌دهندگان CSS که می‌خواهند ابزارهای خود را به انیمیشن، Flexbox، Sass، NPM، SVG و موارد بسیار دیگری مجهز کنند.
- توسعه‌دهندگان فرانت‌اند (Front-end Developers) که می‌خواهند بالاخره نحوه کارکرد CSS را در پشت صحنه درک کنند.
- به طور کلی: هر کسی که می‌خواهد به معنای واقعی کلمه روی CSS مسلط شود!
