CSS یک زبان استایل نویسی است که برای پیاده سازی رابط کاربری صفحات وب استفاده میشود. همچنین اگر نرم افزارهای موبایل را با چهارچوبهایی مثل React Native توسعه دهیم، برای قسمت رابط کاربری برنامه باید از CSS استفاده کنیم. زبانهای CSS و HTML به عنوان مبانی توسعه وب در نظر گرفته میشوند. بنابراین یادگیری و تسلط بر این دو، بسیار مهم است. توسعه دهندههای بکاند و مخصوصا فرانتاند، باید CSS و HTML را به خوبی درک کنند. ممکن است تمرکز اصلی شما بر روی منطق توسعه با زبانهایی مثل جاوااسکریپت باشد. ولی باید بدانیم که ادامه مسیر یادگیری دقیق مفاهیم برنامه نویسی، بدون تسلط بر این زبانها بسیار پیچیده خواهد بود.
بر اساس نظرسنجی منتشر شده از میزان محبوبیت تکنولوژیها در وبسایت Stackoverflow، زبان استایل نویسی CSS در سال ۲۰۱۶ در رتبه ۲۵ قرار داشت. اما در گزارشی که این وبسایت در سال ۲۰۱۸ منتشر کرد CSS، از نظر محبوبیت به رتبه سوم صعود کرده بود. این روند رو به رشد و صعودی ادامه داشت تا نهایتا در سال ۲۰۲۱، زبان CSS به همراه HTML در رتبه دوم لیست محبوبترین زبانها قرار بگیرند.
در طراحی وب مهمترین اصل یادگیری و درک صحیح 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
۱۱۸. استفاده از فرمها
۱۱۹. جمع بندی مفاهیم
دیدگاهها:
saber masoudnia
مهر 24, 1401 در 12:41 ب.ظ
سلام . نوشتید که برای tailwind یک دوره جداگانه خواهید گذاشت . این یعنی اینکه tailwind بصورت اپدیت به دوره CSS اضافه نمیشه؟؟؟
و سوال دوم من این هست، که tailwind ظرفیت همگیر شدن مثل بوت استرپ را دارد(برای آینده شغلی)
و سوال سوم اینه که ، میگویند next در پروژه های کوچک مشکلاتی رو بهمراه دارد ولی در پروژه های بزرگ به خوبی عمل میکند . ایا یک portfolio page یا یک personal branding page که در واقع مثل فروشگاه ها گسترده نیستند گزینه مناسبی برای ساخته شدن با فریم ورک next محسوب می شوند ؟؟؟
مسعود صدری
مهر 24, 1401 در 2:34 ب.ظ
سلام
بله دوره جداگانه خواهیم داشت و به این دوره اضافه نمیشه.
در حال حاضر رو به پیشرفت هست و فکر میکنم میتونیم آینده خوبی رو برای این تکنولوژی متصور بشیم.
این مشکلات رو جزییتر بفرمایید تا بتونیم بررسی کنیم. من چنین چیزی نشنیدم.
iamNasrin
خرداد 31, 1401 در 4:40 ب.ظ
سلام استاد گرامی
آیا در آپیدیت های بعدی مباحث مربوط به Tailwind CSS به این دوره اضافه می شه؟
مسعود صدری
خرداد 31, 1401 در 4:53 ب.ظ
سلام
برای Tailwind انشاالله یک دوره پروژه محور خواهیم داشت.
شقایق کردلو
اردیبهشت 31, 1401 در 10:48 ق.ظ
سلام استاد صدری عزیز
متشکرم برای این دوره های بی نظیر
فقط میخواستم اگه امکانش باشه بتونیم دوره ها رو به صورت آنلاین ببینیم و نیاز نباشه حتما دانلود کنیم.
ممنونم
مسعود صدری
اردیبهشت 31, 1401 در 11:07 ق.ظ
سلام
ممنونم از لطف و پیشنهاد خوبتون.
حتما برای این موضوع برنامه ریزی میکنم.
meysam192
اسفند 19, 1400 در 3:18 ب.ظ
استاد تخفیف نوروز رو بزنید لطفا عید رسید وقتمون کم میشه
مسعود صدری
اسفند 19, 1400 در 3:36 ب.ظ
سلام
شنبه تخفیف نوروز فعال میشه.
mohammad
دی 2, 1400 در 12:43 ب.ظ
سلام این دوره اپدیت داره؟
مسعود صدری
دی 2, 1400 در 1:40 ب.ظ
سلام
انشاالله تا دو هفته آینده مفاهیم Bootstrap 5 به دوره اضافه میشه.
محمد مهدی زارع
شهریور 7, 1400 در 12:54 ب.ظ
با سلام
دوره آپدیت نمیشه ؟
مسعود صدری
شهریور 7, 1400 در 7:17 ب.ظ
سلام
فعلا تا حدود دو ماه آینده به روز رسانی نداریم.
محمدصادق جاویدی
مرداد 10, 1400 در 11:26 ق.ظ
سلام استاد وقتتون بخیر
استاد شما گفتین id ها یونیک هستن و فقط برا یه المنت استفاده میشن ولی من یه id رو روی چند تا المنت استفاده میکنم و درست کار میکنه.میشه دلیلشو بگین؟
مسعود صدری
مرداد 15, 1400 در 10:53 ب.ظ
سلام
این موضوع در جاوااسکریپت هست که برای هر id فقط یه سری مقادیر مشخص میشه در نظر گرفت.
داود
خرداد 29, 1400 در 9:32 ب.ظ
سلام استاد
در جلسه ۴۶ نقش اون کد رنگی که در انتهای المنت background زدید چه بود؟(کد رنگ=#۹۰ca99)
مسعود صدری
خرداد 29, 1400 در 10:58 ب.ظ
سلام
مقادیر برای background به ترتیب قرار میگیرن و در صورتی که تصویر اعمال نشه رنگ خونده میشه.
محمد جواد شعبان پور
خرداد 4, 1400 در 4:10 ب.ظ
سلام
کار با svg رو هم آموزش میدادید خیلی عالی میشد.
مسعود صدری
خرداد 4, 1400 در 4:19 ب.ظ
سلام
اگر دانشجوها درخواست این مبحث رو داشته باشند به دوره اضافه میکنم.
رضا
خرداد 2, 1400 در 2:13 ق.ظ
سلام
دوره html رو ندارین؟
مسعود صدری
خرداد 2, 1400 در 4:39 ب.ظ
سلام
این دوره همراه با بررسی HTML هست، البته تگهای اولیه توضیح داده نشده.
برای درک مفاهیم اولیه HTML میتونید مستندات وبسایت MDN رو مطالعه کنید.
داود چهارمحالی
اسفند 29, 1399 در 3:04 ب.ظ
سلام استاد
بازه تقریبی آپدیت این دوره چه زمانی هست؟
مسعود صدری
اسفند 29, 1399 در 10:19 ب.ظ
سلام
بعد از انتشار نسخه پایدار Bootstrap 5.
seriousmeti
بهمن 19, 1399 در 12:53 ب.ظ
استاد سلام وقت بخیر
تو این دوره درباره media query و ریسپانسیو کامل توضیج دادین ؟ چون فقط برای media query میخوام دوره رو خرید داری کنم ممنوم میشم اطلاع بدین
مسعود صدری
بهمن 19, 1399 در 3:32 ب.ظ
سلام
بله قسمت مروبط به مباحث ریسپانسیو به صورت کامل بررسی شده.
لطفا خودتون هم سرفصلها رو دقیق بررسی کنید.
سوالی بود در خدمتم.
علی
بهمن 12, 1399 در 10:01 ق.ظ
سلام استاد خسته نباشید
بوت استرپ ۵ قراره اپدیت این دوره باشه؟
و اینک کی بوت استرپ ۵ اموزشش قراره میگیره؟
مسعود صدری
بهمن 12, 1399 در 3:04 ب.ظ
سلام
خیلی ممنونم.
بله اولین به روز رسانی این دوره بوت استرپ ۵ هست.
بعد از تکمیل به روز رسانی دورههای جامع React و Redux و جامع و پیشرفته جاوااسکریپت.
aminhomayuni
دی 20, 1399 در 2:46 ب.ظ
سلام استاد عزیز. خسته نباشید.
به عنوان یک پیشنهاد و درخواست آیا امکانش هست برای آپدیت و تکمیل این کورس یک طرح xd یا فیگما رو از صفر تا ۱۰۰ با html و css و بوت استرپ و فلکس و گرید پیاده سازی کنید و لزوم استفاده از هر کدوم از موارد در جای خودش رو روی پروژه توضیح بدین و چالش های مهمی که اکثرا دچار اشتباه و سردگمی میشه و خودتون برحسب تجربه ازش آگاهی دارین رو روی این پروژه توضیح بدین؟
مسعود صدری
دی 20, 1399 در 3:33 ب.ظ
سلام
خیلی ممنونم از پیشنهادتون.
اولین به روز رسانی این دوره آموزش Bootstrap 5 هست.
انشاالله برای به روز رسانیهای بعدی در نظر میگیرم.
keivanbayat
آذر 5, 1399 در 9:52 ب.ظ
سلام وقت بخیر دوره برای bootstrap 4 ندارید؟ و اینکه دوره جاوا اسکریپتتون صفر تا ۱۰۰ هست یا باید یه خورده بدونیم از جاوااسکری\ت؟
مسعود صدری
آذر 5, 1399 در 11:28 ب.ظ
سلام
بعد از ارایه نسخه پایدار Bootstrap 5، به عنوان به روز رسانی دوره جامع CSS مفاهیم Bootstrap رو خواهیم داشت.
دوره جامع و پیشرفته جاوااسکریپت یک دوره جامع هست و با پروژهها و مفاهیم جدید به طور منظم به روز رسانی میشه.