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

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

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

برگزارکننده:  مکتب‌خونه  مکتب‌خونه
مدرس دوره:
مهدی تهورگر
مهدی تهورگر

برگزارکننده:

مکتب‌خونه
4.2 (4 رای)
سطح: مقدماتی
 پلاس

پیش‌نیاز‌ها

 اگر قصد یادگیری 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 پیشرفته و Sass

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

قابل به اشتراک گذاشتن در

linkdin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

درباره دوره

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 را نیز در کارنامه خود دارد.

نظرات کاربران

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ادگیری شیوه طراحی سایت‌های بهتر، جذاب‌تر و کاربرپسندتر

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

افزایش کارایی و بهره‌وری در طراحی سایت

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

تقاضای بیشتر برای طراحان سایت با مهارت Sass

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

یادگیری آسان‌تر سایر زبان‌ها و فریم ورک‌ها

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

کسب درآمد بیشتر به عنوان طراح سایت

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

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

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

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

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

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

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

آشنایی با DOM یا Document Object Model نیز به شما کمک می‌کند که از این دوره، بهره بیشتر و بهتری ببرید. DOM در واقع یک رابط برنامه‌نویسی است که برای اسناد اچ تی ام ال (HTML) و XML مورد استفاده قرار می‌گیرد.

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

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

  • مقدمه: در این فصل از دوره، مروری اجمالی بر کلیات دوره خواهیم داشت.
  • طراحی وب‌سایت سیم کارت با Adobe XD: در این بخش از دوره، آموزش طراحی سایت با ابزار Adobe XD آموزش داده می‌شود. این آموزش‌ها کاملاً پروژه محور است و افراد همه چیز را به صورت عملی و در قالب پروژه طراحی وب‌سایت سیم‌کارت یاد می‌گیرند.
  • تنظیمات پروژه وب‌سایت سیم کارت: این بخش از دوره، به آموزش تنظیمات پروژه و Header اختصاص دارد.
  • مروری بر CSS: در این فصل، مروری بر قابلیت‌ها و انتخاب‌گرهای CSS صورت می‌گیرد.
  • CSS پیشرفته و Sass: در این فصل شیوه نصب Sass آموزش داده می‌شود و افراد با مهم‌ترین نکات طراحی سایت آشنا می‌شوند. در برخی از فایل‌های sass pdf آموزش Sass به صورت اولیه ارائه شده است و افراد با دانلود و مطالعه این فایل‌های می‌توانند با Sass آشنا شوند.
  • طراحی واکنش‌گرا (Responsive Design): در این بخش یاد می‌گیرید سایتتان را طوری طراحی کنید که در انواع مختلف صفحه نمایش مثل موبایل و تبلت و لپ تاپ و غیره، به‌خوبی نمایش داده شود.
  • Flexbox پیشرفته: Flexbox یکی از ماژول‌های CSS3 است که لایه‌بندی صفحات وب را برای شما انعطاف‌پذیر‌تر و آسان‌تر می‌کند. یادگیری نحوه استفاده از این ماژول یکی از ضروری‌ترین مهارت‌ها برای طراحی سایت است.
  • طراحی وب‌سایت Beetle با Adobe XD: در این بخش با طراحی ژورنال، گالری و قسمت فروش برای فروشگاه آنلاین آشنا می‌شویم.
  • مقدمه‌ای بر CSS Grid: در این فصل با فناوری CSS Grid و مفاهیم مرتبط با آن آشنا می‌شویم. این ابزار به شما کمک می‌‌کند آیتم‌ها را آن‌گونه که می‌خواهید، در صفحات وب قرار دهید.
  • مفاهیم پیشرفته CSS Grid: اکنون که با مفاهیم CSS Grid آشنا شدید، لازم است شیوه کار کردن با آن را بیاموزید. در این بخش، کار کردن با این ابزار را تمرین می‌کنیم.
  • پروژه پایانی: در این قسمت، پروژه طراحی وب‌سایت خدمات ساخت اپلیکیشن به شما محول می‌شود تا آموخته‌های خود را عمیق‌تر کنید.

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

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

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

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

صفحات پربازدید