×
ribbon

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

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

ارائه دهنده:  مکتب‌خونه  مکتب‌خونه
مدرس دوره:
مهدی تهورگر
مهدی تهورگر
 80% (337 رای)
سطح: مقدماتی
 پلاس
  
زمان مورد نیاز برای گذارندن دوره:  42 ساعت
مجموع محتوای آموزشی:  24 ساعت ویدئو - 18 ساعت تمرین و پروژه
 (قابل دانلود می‌باشد)
مهلت دوره:  8 هفته
  
حد نصاب قبولی در دوره:  70 نمره
فارغ‌التحصیل شدن در این دوره نیاز به ارسال تمرین‌ها و پروژه‌های الزامی دارد. 
organization-pic  گواهینامه این دوره توسط مکتب‌خونه ارائه می‌شود.
course-feature   گواهی‌نامه مکتب‌خونه course-feature   خدمات منتورینگ course-feature   پروژه محور course-feature   تمرین و آزمون course-feature   تالار گفتگو course-feature   تسهیل استخدام

پیش‌نیاز‌ها

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

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

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

فصل اول: مقدمه

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

  بررسی اجمالی دوره
"03:46  
  ابزارها
"02:32  
فصل دوم: طراحی وب‌سایت سیم کارت با Adobe XD

نرم‌افزار رایگان adobe XD یک ابزار رایگان برای طراحی سایت است. این نرم‌افزار قابلیت‌های زیادی دارد که می‌توانید با استفاده از آن سایت‌های زیبا و کاربردی طراحی کنید.

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

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

  طراحی 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 (الزامی)
 100%    
"90:00  
فصل سوم: تنظیمات پروژه وب‌سایت سیم کارت

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

فصل سوم دوره آموزش CSS پیشرفته به تنظیمات پروژه و header اختصاص دارد. در این بخش‌ها به‌طور کامل با header و نحوه نوشتن و تنظیم آن آشنا می‌شوید.

  تنظیمات پروژه
"10:15  
  Header - بخش اول
"21:24  
  Header - بخش دوم
"20:18  
فصل چهارم: مروری بر CSS

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

انواع مختلفی از انتخابگرها وجود دارد و آشنایی با آن‌ها به شما کمک می‌کند تا ابزار مناسب را برای کارتان پیدا کنید. رایج‌ترین انتخابگرهای CSS عبارتند از: انتخابگر کلاس، انتخابگر ID، انتخابگر عنصر، انتخابگر attribute و غیره. در این فصل سعی می‌کنیم مروری بر CSS داشته باشیم و به شما آموزش دهیم که چگونه می‌توانید از انتخابگرها استفاده کنید.

هرچیزی در CSS درون یک باکس قرار دارد. آشنایی با این باکس‌ها به شما در ایجاد طرح‌بندی‌ها با CSS کمک می‌کند. در قسمت‌هایی از این فصل شما را با مفهوم CSS Box Model آشنا می‌کنیم و به شما آموزش می‌دهیم که چگونه می‌توانید از آن‌ها برای طرح‌بندی‌های پیچیده‌تر استفاده کنید.

  انتخاب‌گر (Selector) های CSS
"10:15  
  CSS چگونه کار می‌کند؟
"04:00  
  مفهوم CSS box model در CSS
"07:13  
فصل پنجم: CSS پیشرفته و Sass (ادامه ساخت وب‌سایت فروش سیم کارت)

در فصل دوم یاد گرفتیم که چگونه با استفاده از Adobe XD وب‌سایت سیم کارت را طراحی کنیم. در این فصل می‌خواهیم با CSS پیشرفته و Sass ساخت وب‌سایت فروش سیم‌کارت خود را ادامه دهیم.

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

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

  نصب Sass
"14:20  
  نصب Sass
 6.2%    
"01:00  
  تبدیل کدهای CSS به Sass
"19:26  
  Heading primary
"17:38  
  Heading primary
 6.2%    
"01:00  
  تفکر نام‌گذاری BEM
"07:51  
  تفکر نام‌گذاری BEM
 6.2%    
"01:00  
  امکانات وب‌سایت - بخش اول
"24:03  
  امکانات وب‌سایت - بخش اول
 6.2%    
"01:00  
  امکانات وب‌سایت - بخش دوم
"05:25  
  امکانات وب‌سایت - بخش دوم
 6.2%    
"01:00  
  ساخت Float grid - بخش اول
"13:58  
  ساخت Float grid - بخش دوم
"18:56  
  ساخت کارت‌های سیم کارت - بخش اول
"25:53  
  ساخت کارت‌های سیم کارت - بخش اول
 6.2%    
"01:00  
  ساخت کارت‌های سیم کارت - بخش دوم
"27:06  
  ساخت کارت‌های سیم کارت - بخش دوم
 6.2%    
"01:00  
  ساخت طرح‌های فروش - بخش اول
"29:11  
  ساخت طرح‌های فروش - بخش اول
 6.2%    
"01:00  
  ساخت طرح‌های فروش - بخش دوم
"24:52  
  ساخت طرح‌های فروش - بخش دوم
 6.2%    
"01:00  
  ساخت بخش بازخوردها
"18:22  
  ساخت بخش بازخوردها
 6.2%    
"01:00  
  فرم خرید سیم کارت - بخش اول
"19:49  
  فرم خرید سیم کارت - بخش اول
 6.2%    
"01:00  
  فرم خرید سیم کارت - بخش دوم
"32:01  
  فرم خرید سیم کارت - بخش دوم
 6.2%    
"01:00  
  طراحی Footer وب‌سایت
"27:10  
  طراحی Footer وب‌سایت
 6.2%    
"01:00  
  ساخت دکمه Button-flip
"29:59  
  ساخت دکمه Button-flip
 6.2%    
"01:00  
  ساخت Navigation - بخش اول
"22:22  
  ساخت Navigation - بخش اول
 6.2%    
"01:00  
  ساخت Navigation - بخش دوم
"23:14  
  ساخت Navigation - بخش دوم
 6.2%    
"01:00  
فصل ششم: طراحی واکنش‌گرا (Responsive Design)

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

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

  تنظیمات اولیه واکنش‌گرایی
"19:40  
  تنظیمات اولیه واکنش‌گرایی
 1.7%    
"01:00  
  Header واکنش‌گرا
"19:42  
  Header واکنش‌گرا
 1.7%    
"01:00  
  واکنش‌گرایی قسمت امکانات و float grid
"13:13  
  واکنش‌گرایی قسمت امکانات و float grid
 1.7%    
"01:00  
  واکنش‌گرایی قسمت‌های طرح‌های فروش و سیم کارت
"17:27  
  واکنش‌گرایی قسمت‌های طرح‌های فروش و سیم کارت
 1.7%    
"01:00  
  واکنش‌گرایی قسمت‌های طرح‌های فروش برای صفحات لمسی
"21:18  
  واکنش‌گرایی قسمت‌های طرح‌های فروش برای صفحات لمسی
 1.7%    
"01:00  
  واکنش‌گرایی عکس‌ها با html
"19:39  
  واکنش‌گرایی عکس‌ها با html
 1.7%    
"01:00  
  واکنش‌گرایی قسمت فرم و Footer
"22:35  
  واکنش‌گرایی قسمت فرم و Footer
 1.7%    
"01:00  
  فرایند ساخت وب‌سایت برای بارگذاری روی سرور
"19:51  
  فرایند ساخت وب‌سایت برای بارگذاری روی سرور
 1.7%    
"01:00  
  سفارش پیتزا (الزامی)
 86.2%    
"180:00  
فصل هفتم: Flexbox پیشرفته

اگر با CSS کار کرده باشید، حداقل یک بار با مشکلاتی مانند به هم خوردگی‌های float و position برخورد داشته اید. همانطور که در ابتدا گفتیم CSS3 نسخه پیشرفته‌تر CSS است که با استفاده از ماژول‌ها طراحی سایت را بسیار لذت‌بخش‌تر کرده است.

Flexbox یکی از ماژول‌های CSS3 است که لایه‌بندی صفحات وب را برای شما انعطاف‌پذیر‌تر و آسان‌تر می‌کند. استفاده از این ماژول یکی از ضروری‌ترین مهارت‌ها برای طراحی سایت است. در این فصل به توضیح مفهوم Flexbox در بخش‌های مختلف سایت می‌پردازیم و چگونگی استفاده از آن را به شما آموزش می‌دهیم.

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

  معرفی پروژه
"02:55  
  طراحی Header با Adobe Xd
"12:05  
  طراحی وب‌سایت با Adobe Xd
"27:04  
  مفهوم flexbox و تنظیمات Codepen
"06:25  
  مفاهیم Flexbox در Codepen - بخش اول
"15:39  
  مفاهیم Flexbox در Codepen - بخش اول
 1%    
"01:00  
  مفاهیم Flexbox در Codepen - بخش دوم
"20:29  
  مفاهیم Flexbox در Codepen - بخش دوم
 1%    
"01:00  
  تنظیمات پروژه
"11:09  
  ساخت Header - بخش اول
"21:56  
  ساخت Header - بخش اول
 1%    
"01:00  
  ساخت Header - بخش دوم
"10:01  
  ساخت Header - بخش دوم
 1%    
"01:00  
  ساخت Container left و Container center - بخش اول
"16:27  
  ساخت Container left و Container center - بخش اول
 1%    
"01:00  
  ساخت Container left و Container center - بخش دوم
"23:22  
  ساخت Container left و Container center - بخش دوم
 1%    
"01:00  
  ساخت Container left و Container center - بخش سوم
"12:21  
  ساخت Container left و Container center - بخش سوم
 1%    
"01:00  
  ساخت Container right
"10:24  
  ساخت Container right
 1%    
"01:00  
  واکنش‌گرایی کل وب‌سایت
"31:45  
  واکنش‌گرایی کل وب‌سایت
 1%    
"01:00  
  فایل‌های طراحی
"00:03  
  سفارش خرید ماشین (الزامی)
 90.9%    
"240:00  
فصل هشتم: طراحی وب‌سایت Beetle با Adobe XD

یک سایت فروشگاهی به قسمت‌های مختلفی نیاز دارد. در فصل‌های گذشته در قالب پروژه طراحی وب‌سایت سیم کارت با استفاده از adobe XD، CSS و Sass پرداختیم. اما هنوز هم می‌توانید بخش‌های زیادی به پروژه خود اضافه کنید.

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

  طراحی Header
"15:08  
  طراحی ژورنال
"14:07  
  طراحی قسمت فروش
"10:31  
  طراحی گالری
"12:22  
  طراحی Footer
"07:47  
  فایل‌های طراحی
"00:03  
فصل نهم: مقدمه‌ای بر CSS Grid

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

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

  معرفی 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

حال که با مفاهیم اولیه CSS Grid آشنا شدید، بهتر است در قالب پروژه کارهایی که می‌توانید با این ابزار مهم انجام دهید، را یاد بگیرید. در فصل آخر همان پروژه Beetle را با استفاده از Grid بخش‌بندی می‌کنیم و به انجام تنظیمات پروژه می‌پردازیم.

ساخت header، ژورنال، discover، قسمت فروش، گالری، footer، sidebar و همچنین واکنش‌گرایی‌های هرکدام از آن‌ها از جمله مواردی است که در این فصل انجام می‌دهیم. در نهایت می‌توانید طراحی یک سایت برای آژانس خلاقیت را انجام دهید تا نقاط ضعف و چالش‌هایتان را بیابید و آن‌ها را برطرف کنید.

  تنظیمات پروژه Beetle
"14:08  
  بخش‌بندی کل پروژه با Grid - بخش اول
"14:13  
  بخش‌بندی کل پروژه با Grid - بخش اول
 1%    
"01:00  
  بخش‌بندی کل پروژه با Grid - بخش دوم
"24:17  
  بخش‌بندی کل پروژه با Grid - بخش دوم
 1%    
"01:00  
  ساخت Header
"17:32  
  ساخت Header
 1%    
"01:00  
  ساخت ژورنال
"20:20  
  ساخت ژورنال
 1%    
"00:00  
  ساخت Discover
"23:35  
  ساخت Discover
 1%    
"01:00  
  ساخت قسمت فروش
"27:06  
  ساخت قسمت فروش
 1%    
"01:00  
  ساخت گالری - بخش اول
"16:33  
  ساخت گالری - بخش اول
 1%    
"01:00  
  ساخت گالری - بخش دوم
"14:45  
  ساخت گالری - بخش دوم
 1%    
"01:00  
  ساخت Footer
"18:32  
  ساخت Footer
 1%    
"01:00  
  ساخت Sidebar
"07:22  
  ساخت Sidebar
 1%    
"01:00  
  واکنش‌گرایی Header
"15:23  
  واکنش‌گرایی Header
 1%    
"01:00  
  واکنش‌گرایی ژورنال و Discover
"19:02  
  واکنش‌گرایی ژورنال و Discover
 1%    
"01:00  
  واکنش گرایی Footer
"17:42  
  واکنش گرایی Footer
 1%    
"01:00  
  آژانس خلاقیت (الزامی)
 87.3%    
"240:00  
پروژه پایانی

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

  وب‌سایت ارائه خدمات ساخت اپلیکیشن (الزامی)
 100%    
"300:00  

ویژگی‌های دوره

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

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

مشاهده نمونه گواهینامه

ویژگی‌های دوره

خدمات منتورینگ
خدمات منتورینگ

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

ویژگی‌های دوره

پروژه محور
پروژه محور

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

ویژگی‌های دوره

تمرین و آزمون
تمرین و آزمون

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

ویژگی‌های دوره

تالار گفتگو
تالار گفتگو

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

ویژگی‌های دوره

تسهیل استخدام
تسهیل استخدام

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

بررسی فرصت‌های شغلی

درباره دوره

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

درباره استاد

maktabkhooneh-teacher مهدی تهورگر

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

نظرات کاربران  ( نظر)

صفحه 1 از
سید عرفان سیدان اسگوئی 1402-05-30
دانشجوی دوره
بسیار استاد خوب مسلط به کد زنی هستند با تشکر از دوره خوبی که برگزار کردند
سیدرضا حسینی 1401-09-04
دانشجوی دوره
فکر کنم یک ماهی باید درگیر رفع اشکالات نصب و اجرای نرم افزار ADOBE XD باشیم!!!!!!!!!!

دوره‌های پیشنهادی

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

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

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

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

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

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

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

پس از سپری شدن زمان دوره، به محتوای دوره دسترسی خواهم داشت؟
بله؛ پس از سپری شدن مدت زمان دوره شما به محتوای دوره دسترسی خواهید داشت و می توانید از ویدئوها، تمارین، پروژه و دیگر محتوای دوره در صورت وجود استفاده کنید ولی امکان تصحیح تمارین توسط پشتیبان و دریافت گواهی نامه برای شما وجود نخواهد داشت.
صفحات پربازدید
poster
  
برگزار کننده:  مکتب‌خونه
  
زمان مورد نیاز برای گذارندن دوره:  42 ساعت
مجموع محتوای آموزشی:  24 ساعت ویدئو - 18 ساعت تمرین و پروژه
 (قابل دانلود می‌باشد)
مهلت دوره:  8 هفته
  
حد نصاب قبولی در دوره:  70 نمره
فارغ‌التحصیل شدن در این دوره نیاز به ارسال تمرین‌ها و پروژه‌های الزامی دارد. 
organization-pic  گواهینامه این دوره توسط مکتب‌خونه ارائه می‌شود.
course-feature   گواهی‌نامه مکتب‌خونه course-feature   خدمات منتورینگ course-feature   پروژه محور course-feature   تمرین و آزمون course-feature   تالار گفتگو course-feature   تسهیل استخدام