دوره آموزش CSS

این موضوع را به عنوان یک تجربه‌ی دست اول از کسی که ۱۲ سال در حوزه‌ی Frontend کار کرده و در پروژه‌های مختلف با CSS دست و پنجه نرم کرده، بپذیرید که: CSS را به هیچ وجه نباید دست‌کم گرفت. فریب سینتکس ظاهراً ساده‌ی این زبان استایل‌دهی را نخورید. توسعه‌دهندگان باتجربه‌تر می‌دانند که با بزرگ‌تر شدن پروژه، همین سینتکس ساده به سرعت پیچیده می‌شود و اشکال‌زدایی کدها (debugging) و به طور کلی، کنترل کدها سخت‌تر می‌شود.
اساساً تکنولوژی‌های CSS Methodology مانند BEM و فریمورک‌های CSS مانند Bootstrap با هدف کاهش همین پیچیدگی‌ها و ارائه‌ی روش‌های سیستماتیک برای تولید کدهای CSS مرتب‌تر و با قابلیت استفاده‌ی مجدد (reusability)، به وجود آمده‌اند. اما اینکه آیا واقعاً این تکنولوژی‌ها، پیچیدگی‌ها را از بین می‌برند یا اینکه فقط جنس آنها را عوض می‌کنند، موضوعی است که جای بحث دارد.
برای نمونه، پیش پردازنده هایی نظیر LESS و SASS با افزودن قابلیت‌هایی مانند متغیرها، توابع، امکان تودرتو کردن استایل‌ها و غیره سینتکس CSS را بسط می‌دهند. اما اولاً باید سینتکس آنها را هم علاوه بر CSS یاد بگیرید، ثانیاً باید کدها را با استفاده از یک کامپایلر به CSS خالص کامپایل کنید؛ چون مرورگر سینتکس این پیش‌پردازنده‌ها را درک نمی‌کند و ثالثاً برخی از ویژگی‌های آنها مانند امکان استفاده از متغیرها به CSS افزوده شده و به شکل بومی مورد پشتیبانی قرار می‌گیرند. یا یک فریمورک CSS مثل Bootstrap با وجود شروع طوفانی و محبوبیت زیاد، به مرور با انتقادهایی مثل سنگین‌تر کردن سایت و انعطاف‌پذیری پایین مواجه شد و کم‌کم جایگاهش را به نمونه های مدرن تری مانند Tailwind می‌دهد. در دوره‌ی آموزش جامع CSS خواهید دید که چرا CSS ساده نیست و چطور می‌توان بدون توسل به متدولوژی‌ها و فریمورک‌هایی که ناکارامد بودن اغلب آنها در گذر زمان ثابت شده، بر دشواری‌های آن غلبه کرد.

دوره آموزش CSS برای چه کسانی مناسب است؟

توسعه‌ی وب در حوزه‌ی Frontend شامل سه تکنولوژی عمده است که یک متخصص Frontend باید روی آنها مسلط باشد. این تکنولوژی‌ها عبارتند از:

  • HTML یا HyperText Markup Language که یک زبان مارکاپ است و شامل تعدادی عنصر یا تگ از پیش‌تعریف‌شده است که هر یک برای ایجاد محتوای خاصی در صفحات وب کاربرد دارند.
  • CSS یا Cascading StyleSheets که یک زبان استایل‌دهی است که ظاهر محتوای ایجاد شده با استفاد از HTML را تعیین می‌کند.
  • JavaScript که یک زبان برنامه‌نویسی است که سال‌هاست برای ایجاد اسکریپت‌های سمت کاربر در صفحات وب مورد استفاده قرار می‌گیرد. البته جاوااسکریپت به عنوان یک زبان برنامه‌نویسی چندمنظوره در حوزه‌های دیگری مانند Backend یا در خارج از وب هم کاربرد دارد اما یک متخصص Frontend با جنبه‌ای از این زبان سر و کار دارد که به سمت کاربر وب مربوط است.

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

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

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

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

فصل ۱: معرفی زبان CSS

در فصل اول یک معرفی کلی از زبان CSS ارائه شده و شما را با ماهیت این زبان استایل‌دهی آشنا می‌کنیم. مختصری هم در مورد تاریخچه‌ی استاندارد CSS و مستندات این زبان صحبت می‌کنیم.

فصل ۲: شروع به کار با CSS

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

فصل ۳: انتخابگرهای CSS

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

فصل ۴: مفاهیم Cascade و Inheritance

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

فصل ۵: نوع‌های داده و واحدهای اندازه‌گیری

مفهوم نوع داده (data type) یکی دیکر از مفاهیم کلیدی در CSS محسوب می‌شود که به پراپرتی‌های CSS و مقادیری که می‌توانند دریافت کنند، مربوط است. این که یک پراپرتی چه مقادیری را دریافت می‌کند، موضوعی است که از روی نوع داده‌ی آن پراپرتی تعیین می‌شود. در این فصل، نوع های داده‌ی CSS و واحدهای اندازه‌گیری مقادیر را معرفی می‌کنیم.

فصل ۶: مفهوم Box Model

در این فصل یکی دیگر از مفاهیم کلیدی CSS با نام Box Model را معرفی می‌کنیم که به طور کلی به فضای اشغال شده توسط عنصر مربوط است.

فصل ۷: استایل‌های پایه

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

فصل ۸: استایل‌دهی به متن

در این فصل با پراپرتی‌ها و استایل‌های مربوط به متن آشنا می‌شویم. این استایل‌ها را می‌توان در دو گروه جای داد: استایل‌های مربوط به فونت و استایل‌های مربوط به text layout. این دو گروه از استایل‌ها را در این فصل معرفی می‌کنیم.

فصل ۹: روش‌های تعیین Layout

در این قصل استایل‌های مربوط به طرح‌بندی صفحه (Layout) و تکنیک‌های مربوط به آن معرفی می‌شوند. تعیین مکان عناصر در صفحه با استفاده ازاستایل‌های مربوط به positioning در درس اول مورد بررسی قرار می‌گیرد. سپس، با نقش پراپرتی float در تعیین صفحه آشنا شده و در مورد روش کنترل جهت‌گیری متن در CSS صحبت می‌کنیم. اما در ادامه، دو روش مدرن تعیین layout صفحات وب یعنی flexbox و grid را معرفی می‌کنیم که از اهمیت بسیار بالایی برخوردارند.

فصل ۱۰: تکنیک‌های پیشرفته‌تر استایل‌دهی

در این فصل با استایل‌های پیشرفته‌تری مانند استایل‌های مربوط به اعمال افکت‌های ویژوال مختلف روی عناصر و استایل‌های مربوط به خلق انیمیشن و ترنزیشن و نیز استایل‌های مربوط به تغییر شکل عناصر (transform) آشنا خواهیم شد.

فصل ۱۱: طراحی واکنشگرای صفحات وب

طراحی واکنشگرای صفحات وب یا Responsive Web Design پارادایمی است که عدم رعایت آن در صفحات وب امروزی به هیچ وجه پذیرفتنی نیست. در این فصل، با مبانی طراحی واکنشگرا آشنا شده و خواهیم دید که چطور می‌توانیم بدون توسل به فریمورک‌های CSS صفحات وب واکنشگرایی خلق کنیم که روی دستگاه‌ها و نمایشگرهای مختلف به شکل‌های متفاوتی نمایش داده می‌شود.

شروع آموزش CSS