CSS یک زبان استایل نویسی است که برای پیاده سازی رابط کاربری صفحات وب استفاده می‌شود. همچنین اگر نرم افزارهای موبایل را با چهارچوب‌هایی مثل React Native توسعه دهیم، برای قسمت رابط کاربری برنامه باید از CSS استفاده کنیم. زبان‌های CSS و HTML به عنوان مبانی توسعه وب در نظر گرفته می‌شوند. بنابراین یادگیری و تسلط بر این دو، بسیار مهم است. توسعه دهنده‌های بک‌اند و مخصوصا فرانت‌اند، باید CSS و HTML را به خوبی درک کنند. ممکن است تمرکز اصلی شما بر روی منطق توسعه با زبان‌هایی مثل جاوااسکریپت باشد. ولی باید بدانیم که ادامه مسیر یادگیری دقیق مفاهیم برنامه نویسی، بدون تسلط بر این زبان‌ها بسیار پیچیده خواهد بود.

بر اساس  نظرسنجی منتشر شده از میزان محبوبیت تکنولوژی‌ها در وب‌سایت Stackoverflow، زبان استایل نویسی CSS در سال ۲۰۱۶ در رتبه ۲۵ قرار داشت. اما در گزارشی که این وب‌سایت در سال ۲۰۱۸ منتشر کرد CSS، از نظر محبوبیت به رتبه سوم صعود کرده بود. این روند رو به رشد و صعودی ادامه داشت تا نهایتا در سال ۲۰۲۱، زبان CSS به همراه HTML در رتبه دوم لیست محبوب‌ترین زبان‌ها قرار بگیرند.

دوره جامع CSS

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

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

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

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

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

مدرس دوره

مسعود صدری مدرس و توسعه دهنده نرم افزار، فارغ‌ التحصیل از رشته مهندسی نرم‌افزار، برنامه نویسی را از سال ۱۳۹۱ به شکل حرفه‌ای شروع کرده است. او در سال‌هایی که در حوزه برنامه نویسی حرفه‌ای فعالیت داشته، با شرکت های نرم افزاری و تیم‌های استارتاپی همکاری داشته و بیشتر بر روی فریلنسیگ تمرکز کرده است. او سال‌ها به عنوان برنامه نویس فریلنسر مشغول به کار بوده و همین امر باعث شده تا نیازهای بازار کار را به خوبی بشناسد و تجربه‌های زیادی در این زمینه کسب کند.

مسعود صدری تدریس را از سال ۱۳۹۴ به شکل حرفه‌ای، با آموزشگاه مجتمع فنی تهران شروع کرده و همیشه جزء یکی از برترین مدرسان برنامه نویسی بوده است. سپس تصمیم به برگزاری دوره‌های برنامه نویسی در دانشکده مهندسی برق و کامپیوتر دانشگاه تبریز گرفته که مورد استقبال بسیار خوب دانشجویان قرار گرفت. فعالیت‌های او در دانشگاه تبریز، به عنوان مدرس دانشگاه ادامه داشته و اکنون تدریس کارگاه‌های مبانی برنامه سازی و برنامه سازی پیشرفته را برعهده دارد. نهایتا از سال ۱۳۹۷ تدریس آنلاین هم به لیست فعالیت‌های آموزشی او اضافه شده است.

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

پشتیبانی دوره

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

گارانتی بازگشت وجه

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

سرفصل‌ها:

معرفی دوره. بررسی کاربردهای CSS

۱. مسیر یادگیری و سرفصل‌های دوره

۲. یادگیری دقیق‌تر مفاهیم

۳. بررسی ابزارهای مورد نیاز

۴. ساخت و اجرای پروژه

۵. روش‌های اضافه کردن استایل‌ها

۶. استفاده از فونت‌ها

۷. بررسی Selectorها

۸. ابزارهای مرورگر برای توسعه فرانت‌اند

۹. استفاده از Selectorهای متعدد

۱۰. درک بهتر Box Model

۱۱. بررسی دستورهای کوتاه

۱۲. مقدارهای عرض و ارتفاع

۱۳. بررسی Box Sizing

۱۴. اضافه کردن Header

۱۵. مقادیر Display

۱۶. توسعه Navigation

۱۷. کار با دستورات text-decoration و vertical-align

۱۸. توسعه استایل برای لینک‌ها

۱۹. کلاس‌ها و المنت‌های Pseudo

۲۰. بهینه سازی کد برای کلاس‌ها

۲۱. استایل متفاوت برای یک لینک

۲۲. افزودن تصویر پس زمینه

۲۳. قسمت پلن‌های وب‌سایت

۲۴. دستورات box-shadow و rgba

۲۵. تکمیل استایل‌های پلن‌ها

۲۶. استایل‌ دهی به Button

۲۷. اضافه کردن قسمت ویژگی‌ها

۲۸. تکمیل استایل‌های Section جدید

۲۹. افزودن قسمت Footer

۳۰. بررسی تمرین شماره ۱

۳۱. ساختار فایل‌های پروژه

۳۲. توسعه صفحه پلن‌ها

۳۳. استفاده از دستور float

۳۴. بررسی دستورات Position

۳۵. استفاده از Position برای تصویر پس‌زمینه

۳۶. دستور z-index

۳۷. افزودن پیشنهاد ویژه به پلن‌ها

۳۸. استایل دهی به قسمت پیشنهادهای ویژه

۳۹. درک بهتر دستورات Background

۴۰. استفاده از دستور کوتاه برای Background

۴۱. افزودن صفحه مشتریان

۴۲. توسعه استایل‌های صفحه مشتریان

۴۳. استایل‌ دهی به تصاویر

۴۴. استفاده از Linear Gradient

۴۵. استفاده از Radial Gradients

۴۶. افزودن Backgroundهای متنوع

۴۷. دستورات Filters

۴۸. بررسی max-width و min-width

۴۹. بررسی واحد‌های em و rem

۵۰. استفاده از rem در پروژه

۵۱. تکمیل مقادیر rem

۵۲. بررسی واحدهای Viewport

۵۳. استفاده از مقدار auto برای margin

۵۴. افزودن Modal به پروژه

۵۵. تغییر استایل‌ها با جاوااسکریپت

۵۶. بررسی متد addEventListener

۵۷. دکمه بستن Modal

۵۸. بررسی طراحی Responsive

۵۹. درک بهتر viewport در Meta Tag

۶۰. طراحی Mobile First

۶۱. افزودن دستورات Media Query

۶۲. بررسی Mobile First و Desktop First

۶۳. سایزهای مختلف برای دیوایس‌ها

۶۴. طراحی Mobile First برای پلن‌ها

۶۵. افزودن Media Query برای پلن‌ها

۶۶. طراحی Responsive برای قسمت ویژگی‌ها

۶۷. طراحی Responsive برای صفحه مشتریان

۶۸. افزودن فرم سفارش

۶۹. توسعه استایل برای فرم

۷۰. طراحی Responsive قسمت فرم

۷۱. بررسی استایل برای Checkbox

۷۲. بررسی Flexbox

۷۳. توسعه Flex Container

۷۴. دستورات flex-direction و flex-wrap

۷۵. دستورات align-items و justify-content

۷۶. استفاده از align-content

۷۷. افزودن Flexbox به Navigation

۷۸. بهینه سازی Footer

۷۹. افزودن Flexbox به صفحه مشتریان

۸۰. دستور order برای آیتم‌های Flexbox

۸۱. استفاده از align-self

۸۲. دستور flex-shrink

۸۳. بررسی Grid

۸۴. ستون‌ها و ردیف‌ها در Grid

۸۵. موقعیت المنت‌های زیرمجموعه

۸۶. استفاده از تابع repeat

۸۷. درک بهتر موقعیت المنت‌ها در Grid

۸۸. استفاده از دستورات gap

۸۹. موقعیت المنت‌ها در Grid

۹۰. طراحی Responsive در Grid

۹۱. استفاده از Grid در پروژه

۹۲. مقایسه Grid و Flexbox

۹۳. بررسی Sass

۹۴. نصب و استفاده از Sass

۹۵. بهینه سازی کد با Sass

۹۶. دستورات Nested

۹۷. استفاده از مقادیر Nested

۹۸. متغیرها

۹۹. استفاده از Map

۱۰۰. استفاده از توابع

۱۰۱. دستور Import

۱۰۲. دستور Mixin

۱۰۳. دستورات rotate و transform

۱۰۴. دستورات rotate و translate

۱۰۵. استفاده از skew و scale

۱۰۶. استفاده از transition

۱۰۷. درک بهتر دستور transition

۱۰۸. بررسی انیمیشن‌ها در CSS

۱۰۹. ادامه مسیر بعد از یادگیری CSS

۱۱۰. بررسی Bootstrap و تغییرات نسخه ۵

۱۱۱. افزودن Bootstrap به پروژه

۱۱۲. افزودن Navbar

۱۱۳. آیکون‌ها در Bootstrap

۱۱۴. استفاده از Flexbox

۱۱۵. استفاده از Grid در Bootstrap

۱۱۶. چالش Grid

۱۱۷. افزودن Modal

۱۱۸. استفاده از فرم‌ها

۱۱۹. جمع بندی مفاهیم