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

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

گواهی‌نامه
3.9 (17 امتیاز)
709 دانشجو
مقدماتی
مهدی تهورگر

مهدی تهورگر

محتوای دوره
پیش‌نیاز‌ها
درباره دوره
نظرات کاربران
درباره استاد

محتوای دوره

11 فصل 87 جلسه 24 ساعت ویدیو
فصل اول: مقدمه
فصل دوم: طراحی وب‌سایت سیم کارت با Adobe XD
فصل سوم: تنظیمات پروژه وب‌سایت سیم کارت
فصل چهارم: مروری بر CSS
فصل پنجم: CSS پیشرفته و Sass (ادامه ساخت وب‌سایت فروش سیم کارت)
فصل ششم: طراحی واکنش‌گرا (Responsive Design)
فصل هفتم: Flexbox پیشرفته
فصل هشتم: طراحی وب‌سایت Beetle با Adobe XD
فصل نهم: مقدمه‌ای بر CSS Grid
فصل دهم: مفاهیم پیشرفته CSS Grid
پروژه پایانی

پیش‌نیاز‌ها

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

دوره آموزش طراحی سایت با 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 ثبت کنید. پلتفرم آموزشی مکتب‌خونه، دوره‌های حرفه‌ای و جذاب مختلفی برای یادگیری طراحی سایت در وب‌سایت خود عرضه کرده است. در صورت تمایل به کسب اطلاعات بیشتر در مورد این دوره‌ها و ثبت نام در آن‌ها، کافی است به صفحه آموزش طراحی سایت مراجعه کنید. همچنین در مکتب خونه انواع پکیج آموزش برنامه نویسی به عنوان مکمل و پیش نیاز این دوره موجود است.

اطلاعات بیشتر

امتیاز و نظرات کاربران

3.9

از مجموع 17 امتیاز

3 نظر

3 ماه پیش

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

علی افشار

علی افشار

1 سال پیش

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

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

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

2 سال پیش

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

سیدرضا حسینی

سیدرضا حسینی

گواهی‌نامه

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

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

قابل اشتراک‌گذاری در

linkdin

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

این دوره در کدام مسیرهای یادگیری است؟

درباره استاد

مهدی تهورگر
مهدی تهورگر
1 دوره
941 دانشجو

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

اطلاعات بیشتر

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

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

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

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

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

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

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

پس از سپری شدن زمان دوره، به محتوای دوره دسترسی خواهم داشت؟

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

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