آموزش CSS – دوره جامع

259,000 تومان
985 دانشجو
به روز رسانی: ۱۳ دی ۱۴۰۰
۸ ساعت و ۳۸ دقیقه
ثبت نام در دوره

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

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

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

دیدگاه‌ها:

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 رو خواهیم داشت.
دوره جامع و پیشرفته جاوااسکریپت یک دوره جامع هست و با پروژه‌ها و مفاهیم جدید به طور منظم به روز رسانی می‌شه.

افزودن دیدگاه جدید