×
ribbon

تا پایان تخفیف

آموزش طراحی سایت با CSS پیشرفته و Sass

مدرس:

مهدی تهورگر

CSS یکی از ابزارهای اصلی در بهبود طراحی سایت است. CSS دنیای وب را زیباتر و ظاهر آن... بیشتر
گواهی‌نامه
دسترسی: کامل
اطلاعات بیشتر
3.9 (18)
4 دیدگاه
962دانشجو
42ساعت
سرفصل‌ها
مقدماتی سطح دوره

اشتراک مکتب‌پلاس

خرید اشتراک

با خرید اشتراک مکتب‌پلاس، علاوه بر این دوره، به بیش از ۴،۰۰۰ دوره دیگر دسترسی خواهید داشت.

دسترسی به تمام دوره‌هابیش از ۴،۰۰۰ دوره
محتوای دوره
سرفصل‌ها
پیش‌نیاز‌ها
توضیحات دوره
دیدگاه کاربران
درباره مدرس

این دوره شامل:

24 ساعت ویدئو

4 جلسه متنی

5 تمرین و پروژه

45 سؤال سنجش و یادگیری

1 فایل ضمیمه قابل دانلود

دسترسی به تالار گفتگو

گواهینامه مکتب‌خونه

دسترسی مادام‌العمر به محتوای دوره

8 هفته مهلت ارسال تمرین و پروژه

سرفصل‌های دوره

11 فصل87 جلسه24 ساعت ویدیو
فصل اول: مقدمه
  بررسی اجمالی دوره
03:46
  ابزارها
02:32
فصل دوم: طراحی وب‌سایت سیم کارت با Adobe XD
  طراحی Header در Adobe XD
32:37
  طراحی امکانات در Adobe XD
21:28
  طراحی کارت‌ها در Adobe XD
21:25
  طراحی بخش طرح‌های فروش و بازخوردها در Adobe XD
20:16
  طراحی فرم فروش سیم کارت و Footer در Adobe XD
21:53
  فایل‌های طراحی
00:03
  طراحی با Adobe XD (الزامی)
90:00
فصل سوم: تنظیمات پروژه وب‌سایت سیم کارت
  تنظیمات پروژه
10:15
  Header - بخش اول
21:24
  Header - بخش دوم
20:18
فصل چهارم: مروری بر CSS
  انتخاب‌گر (Selector) های CSS
10:15
  CSS چگونه کار می‌کند؟
04:00
  مفهوم CSS box model در CSS
07:13
فصل پنجم: CSS پیشرفته و Sass (ادامه ساخت وب‌سایت فروش سیم کارت)
  نصب Sass
14:20
  نصب Sass
01:00
  تبدیل کدهای CSS به Sass
19:26
  Heading primary
17:38
  Heading primary
01:00
  تفکر نام‌گذاری BEM
07:51
  تفکر نام‌گذاری BEM
01:00
  امکانات وب‌سایت - بخش اول
24:03
  امکانات وب‌سایت - بخش اول
01:00
  امکانات وب‌سایت - بخش دوم
05:25
  امکانات وب‌سایت - بخش دوم
01:00
  ساخت Float grid - بخش اول
13:58
  ساخت Float grid - بخش دوم
18:56
  ساخت کارت‌های سیم کارت - بخش اول
25:53
  ساخت کارت‌های سیم کارت - بخش اول
01:00
  ساخت کارت‌های سیم کارت - بخش دوم
27:06
  ساخت کارت‌های سیم کارت - بخش دوم
01:00
  ساخت طرح‌های فروش - بخش اول
29:11
  ساخت طرح‌های فروش - بخش اول
01:00
  ساخت طرح‌های فروش - بخش دوم
24:52
  ساخت طرح‌های فروش - بخش دوم
01:00
  ساخت بخش بازخوردها
18:22
  ساخت بخش بازخوردها
01:00
  فرم خرید سیم کارت - بخش اول
19:49
  فرم خرید سیم کارت - بخش اول
01:00
  فرم خرید سیم کارت - بخش دوم
32:01
  فرم خرید سیم کارت - بخش دوم
01:00
  طراحی Footer وب‌سایت
27:10
  طراحی Footer وب‌سایت
01:00
  ساخت دکمه Button-flip
29:59
  ساخت دکمه Button-flip
01:00
  ساخت Navigation - بخش اول
22:22
  ساخت Navigation - بخش اول
01:00
  ساخت Navigation - بخش دوم
23:14
  ساخت Navigation - بخش دوم
01:00
فصل ششم: طراحی واکنش‌گرا (Responsive Design)
  تنظیمات اولیه واکنش‌گرایی
19:40
  تنظیمات اولیه واکنش‌گرایی
01:00
  Header واکنش‌گرا
19:42
  Header واکنش‌گرا
01:00
  واکنش‌گرایی قسمت امکانات و float grid
13:13
  واکنش‌گرایی قسمت امکانات و float grid
01:00
  واکنش‌گرایی قسمت‌های طرح‌های فروش و سیم کارت
17:27
  واکنش‌گرایی قسمت‌های طرح‌های فروش و سیم کارت
01:00
  واکنش‌گرایی قسمت‌های طرح‌های فروش برای صفحات لمسی
21:18
  واکنش‌گرایی قسمت‌های طرح‌های فروش برای صفحات لمسی
01:00
  واکنش‌گرایی عکس‌ها با html
19:39
  واکنش‌گرایی عکس‌ها با html
01:00
  واکنش‌گرایی قسمت فرم و Footer
22:35
  واکنش‌گرایی قسمت فرم و Footer
01:00
  فرایند ساخت وب‌سایت برای بارگذاری روی سرور
19:51
  فرایند ساخت وب‌سایت برای بارگذاری روی سرور
01:00
  سفارش پیتزا (الزامی)
180:00
فصل هفتم: Flexbox پیشرفته
  معرفی پروژه
02:55
  طراحی Header با Adobe Xd
12:05
  طراحی وب‌سایت با Adobe Xd
27:04
  مفهوم flexbox و تنظیمات Codepen
06:25
  مفاهیم Flexbox در Codepen - بخش اول
15:39
  مفاهیم Flexbox در Codepen - بخش اول
01:00
  مفاهیم Flexbox در Codepen - بخش دوم
20:29
  مفاهیم Flexbox در Codepen - بخش دوم
01:00
  تنظیمات پروژه
11:09
  ساخت Header - بخش اول
21:56
  ساخت Header - بخش اول
01:00
  ساخت Header - بخش دوم
10:01
  ساخت Header - بخش دوم
01:00
  ساخت Container left و Container center - بخش اول
16:27
  ساخت Container left و Container center - بخش اول
01:00
  ساخت Container left و Container center - بخش دوم
23:22
  ساخت Container left و Container center - بخش دوم
01:00
  ساخت Container left و Container center - بخش سوم
12:21
  ساخت Container left و Container center - بخش سوم
01:00
  ساخت Container right
10:24
  ساخت Container right
01:00
  واکنش‌گرایی کل وب‌سایت
31:45
  واکنش‌گرایی کل وب‌سایت
01:00
  فایل‌های طراحی
00:03
  سفارش خرید ماشین (الزامی)
240:00
فصل هشتم: طراحی وب‌سایت Beetle با Adobe XD
  طراحی Header
15:08
  طراحی ژورنال
14:07
  طراحی قسمت فروش
10:31
  طراحی گالری
12:22
  طراحی Footer
07:47
  فایل‌های طراحی
00:03
فصل نهم: مقدمه‌ای بر CSS Grid
  معرفی grid
06:02
  مفهوم Grid container
12:30
  تقسیم‌بندی با Grid-template
09:14
  کار با Grid row و Grid col
09:19
  کار با Grid row و Grid col پیشرفته
09:36
  تمرین با Grid
03:16
  حل چالش تمرین با Grid
11:56
  نام‌گذاری خط‌های Grid
16:17
  نام‌گذاری محیط Grid
16:41
  تفاوت بین Explicit و Implicit
10:52
  هم‌ترازی آیتم‌های Grid - بخش اول
09:45
  هم‌ترازی آیتم‌های Grid - بخش دوم
11:03
  آشنایی با مفهوم Content max-content minmax function
19:22
  آشنایی با واکنش‌گرایی در Grid با Auto-fill و Auto-fit
12:41
  فایل‌های طراحی
00:02
فصل دهم: مفاهیم پیشرفته CSS Grid
  تنظیمات پروژه Beetle
14:08
  بخش‌بندی کل پروژه با Grid - بخش اول
14:13
  بخش‌بندی کل پروژه با Grid - بخش اول
01:00
  بخش‌بندی کل پروژه با Grid - بخش دوم
24:17
  بخش‌بندی کل پروژه با Grid - بخش دوم
01:00
  ساخت Header
17:32
  ساخت Header
01:00
  ساخت ژورنال
20:20
  ساخت ژورنال
00:00
  ساخت Discover
23:35
  ساخت Discover
01:00
  ساخت قسمت فروش
27:06
  ساخت قسمت فروش
01:00
  ساخت گالری - بخش اول
16:33
  ساخت گالری - بخش اول
01:00
  ساخت گالری - بخش دوم
14:45
  ساخت گالری - بخش دوم
01:00
  ساخت Footer
18:32
  ساخت Footer
01:00
  ساخت Sidebar
07:22
  ساخت Sidebar
01:00
  واکنش‌گرایی Header
15:23
  واکنش‌گرایی Header
01:00
  واکنش‌گرایی ژورنال و Discover
19:02
  واکنش‌گرایی ژورنال و Discover
01:00
  واکنش گرایی Footer
17:42
  واکنش گرایی Footer
01:00
  آژانس خلاقیت (الزامی)
240:00

پیش‌نیاز‌ها

 اگر قصد یادگیری CSS پیشرفته و Sass را دارید، لازم است از قبل با CSS و html آشنایی داشته باشید. بدین منظور می‌توانید ابتدا در دوره آموزش Html-CSS مقدماتی شرکت کنید.

آشنایی با DOM یا همان Document Object Model نیز در استفاده بهتر این دوره به شما کمک خواهد کرد. DOM یک رابط برنامه‌نویسی برای اسناد HTML و XML است. این رابط صفحاتی را نشان می‌دهد تا برنامه‌ها بتوانند ساختار، استایل و محتوای سند را تغییر دهند.

توضیحات دوره

CSS یکی از ابزارهای اصلی در بهبود طراحی سایت است. CSS دنیای وب را زیباتر و ظاهر آن را خوشایندتر می‌کند و تکنیک‌های مدرن CSS به شما کمک می‌کند تا طرح‌ها و جلوه‌های خیره‌کننده‌ای برای سایت خود ایجاد کنید. بنابراین، ما تصمیم گرفتیم دوره آموزش CSS را برای شما تهیه کنیم تا پس از گذراندن دوره آموزش html-css به آموزش مباحث پیشرفته UI و طراحی رابط کاربری هم پرداخته شود.

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

در طراحی سایت یک ابزار مدیریت پکیج وجود دارد با نام NPM که برنامه‌های جاوا اسکریپت به صورت کامل در آن ثبت شده است. این ابزار بزرگترین اکوسیستم IT است. در این دوره به شما آموزش می‌دهیم که چگونه از NPM برای کاربردهای خاص موردنظرتان استفاده کنید.

هدف از یادگیری دوره آموزش CSS پیشرفته و Sass چیست؟


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

  • طراحی سایت‌های زیبا
  • یادگیری طراحی تجربه کاربری (UX) با Adobe XD
  • تسلط کامل بر CSS و Sass
  • به‌روز کردن مهارت‌های UI/UX
  • ورود به بازار کار 

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

  • افرادی که به html و CSS مقدماتی تسلط دارند و دوست دارند پیشرفت کنند.
  • کسانی که می‌خواهند طراحی سایت با CSS و Adobe XD را یاد بگیرند.
  • صاحبان کسب‌وکارهایی که می‌خواهند برای کسب‌وکار خود یک سایت زیبا طراحی کنند.
  • علاقه‌مندان به حوزه طراحی و ساخت انیمیشن‌های پیشرفته.
  • افرادی که علاقه‌مند به ورود به بازار کار در زمینه‌ طراحی سایت و UI/UX هستند.

بعد از فراگیری دوره آموزش CSS پیشرفته و Sass چه مهارت‌هایی کسب خواهید کرد؟


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

  • طراحی UX با Adobe XD
  • کار با NPM
  • نحوه نصب Sass و تبدیل کدهای CSS به Sass
  • کار با Command line
  • تسلط کامل به معماری BEM
  • تسلط به تمام قسمت‌های پیشرفته Css و Sass مانند: position، grid layout، flexbox، animation، طراحی واکنشگرا (responsive) و غیره.

ویژگی‌های متمایز دوره آموزش CSS پیشرفته و Sass مکتب‌خونه چیست؟


دوره پیشرفته CSS مکتب‌پلاس برخلاف تمام دوره‌های CSS فارسی در قالب پروژه‌های واقعی به آموزش سی اس اس می‌پردازد. این پروژه‌ها تمام قسمت‌های CSS و Sass را پوشش می‌دهد. قبل از شروع هر پروژه، ابتدا آن را با Adobe XD طراحی کرده و سپس طرح موردنظر را به کد و صفحات وب تبدیل می‌کنیم.

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

سرفصل‌های دوره آموزش css پیشرفته و Sass چیست؟


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

دیدگاه کاربران

3.9

بر اساس امتیاز 18 دانشجو

1
2
3
4
5

دانشجوی دوره

20 روز پیش

5

عالی

علی افشار بکشلو

1 سال پیش

5

استاد بسیار مسلط و کاربلد هستند با تشکر فراوان

سید عرفان سیدان اسگوئی

2 سال پیش

5

بسیار استاد خوب مسلط به کد زنی هستند با تشکر از دوره خوبی که برگزار کردند

سیدرضا حسینی

3 سال پیش

3

فکر کنم یک ماهی باید درگیر رفع اشکالات نصب و اجرای نرم افزار ADOBE XD باشیم!!!!!!!!!!

گواهینامه اختصاصی دو زبانه

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

امکان اشتراک گذاری در لینکدین
دو زبانه
مهدی تهورگر
1دوره
962دانشجو
18نظر و امتیاز

مهدی تهورگر مدرس و برنامه‌نویس وب و موبایل و متخصص برنامه‌نویسی فرانت اند است. ایشان سابقه فعالیت فریلنسری در پلتفرم‌های بین‌المللی هم‌چون فریلنسر و آوپ ورک دارد. علاقه وی به آموزش و تدریس و هم‌چنین کسب تجربه‌های بین‌المللی براساس استانداردهای روز دنیا باعث شده است ایشان به سمت تدریس دوره‌های آموزشی روی بیاورد تا بتواند تجربه های چندین ساله خود را در قالب دوره‌های آموزشی ارائه دهد. علاوه‌براین، مهندس تهورگر سابقه تدریس در دیگر پلتفرم‌های بین‌المللی مانند Udemy را نیز در کارنامه خود دارد.

مهارت‌هایی که می‌آموزید

دوره‌های مشابه

سوالات پرتکرار

حداقل و حداکثر زمانی که می‌توانم یک دوره را بگذرانم چقدر است؟

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

آیا پس از به اتمام رساندن و قبولی در دوره، می‌توانم نسخه فیزیکی گواهی‌نامه را دریافت کنم؟

خیر. به‌دلیل ملاحظات محیط‌زیستی و کاهش مصرف کاغذ، گواهی‌نامه فقط به‌صورت الکترونیکی ارائه می‌شود.

آیا بعد از پایان مدت دوره همچنان به محتوای آن دسترسی دارم؟

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

آیا در صورت خرید دوره، گواهی‌نامه آن به من تعلق می‌گیرد؟

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