درباره دوره:
CSS یکی از ابزارهای اصلی در بهبود طراحی سایت است. CSS دنیای وب را زیباتر و ظاهر آن را خوشایندتر میکند و تکنیکهای مدرن CSS به شما کمک میکند تا طرحها و جلوههای خیرهکنندهای برای سایت خود ایجاد کنید. بنابراین، ما تصمیم گرفتیم دوره آموزش CSS را برای شما تهیه کنیم تا پس از گذراندن دوره آموزش html-css به آموزش مباحث پیشرفته UI و طراحی رابط کاربری هم پرداخته شود.
CSS3 نسخه جدیدتر CSS است. این نسخه یکی از پرکاربردترین زبان های برنامه نویسی در طراحی سایت محسوب میشود. چرا که CSS3 به ماژولهایی تقسیم شده است که میتوانید از آنها در طراحی سایت استفاده کنید. مثلا FlexBox یکی از این ماژولهاست که کار طراحی وب را سادهتر کرده و کاربردهای ویژهای دارد. در این دوره FlexBox را در حین پیادهسازی پروژههای واقعی بهکار میبریم. این ماژول در طراحی تصاویر واکنشگرا (Responsive) هم بسیار مفید است.
در طراحی سایت یک ابزار مدیریت پکیج وجود دارد با نام NPM که برنامههای جاوا اسکریپت به صورت کامل در آن ثبت شده است. این ابزار بزرگترین اکوسیستم IT است. در این دوره به شما آموزش میدهیم که چگونه از NPM برای کاربردهای خاص موردنظرتان استفاده کنید.
با بررسیهای دقیق متوجه شدیم که هیچکدام از دورههای آموزشی CSS، نیازهای واقعی طراحی وبسایت را برآورده نمیکند. بنابراین، تصمیم گرفتیم یک دوره جامع پروژه محور طراحی کنیم. در این دوره ابتدا با نحوه طراحی UX با ابزار Adobe XD آشنا میشوید و سپس مروری بر اصول CSS صورت میگیرد. پس از آن با کمک هفت پروژه واقعی، مهارتهای اساسی CSS و Sass را به شما آموزش میدهیم. بهطور خلاصه هدف از برگزاری این دوره را میتوان اینگونه شرح داد:
در دوره جامع آموزش سی اس اس با کمک پروژههای واقعی تمام مهارتهای لازم برای کار با CSS و Sass را فرا میگیرید. بعد از پایان دوره شما میتوانید با استفاده از توانمندیهایی که کسب کردهاید، نیاز خود را در زمینههای زیر برطرف کنید:
دوره پیشرفته CSS مکتبپلاس برخلاف تمام دورههای CSS فارسی در قالب پروژههای واقعی به آموزش سی اس اس میپردازد. این پروژهها تمام قسمتهای CSS و Sass را پوشش میدهد. قبل از شروع هر پروژه، ابتدا آن را با Adobe XD طراحی کرده و سپس طرح موردنظر را به کد و صفحات وب تبدیل میکنیم.
درگیری با چالشهای طراحی وب به یادگیری بیشتر شما کمک میکند. بنابراین، چالشهای زیادی را داخل پروژهها قرار دادهایم که میتواند شما را هرچه بیشتر با قسمتهای مختلف CSS درگیر کند. برای یادگیری برنامهنویسی تنها مشاهده ویدئوها کافی نیست و شما باید خودتان با نوشتن کد با چالشها روبهرو شوید. این مهم در تمام قسمتهای دوره آموزش CSS مکتبخونه رعایت شده است.
دوره آموزش CSS پیشرفته شامل ده فصل آموزشی است. در این فصلها با انجام چهار پروژه به آموزش Adobe XD، Sass، CSS و قسمتهای مختلف آنها میپردازیم. در پایان هم یک پروژه نهایی برای شما عزیزان طراحی شده است که بتوانید تمام آموختههای خود را تثبیت کنید.
مدیران کسب و کارها به این باور رسیدهاند که برای بقای بیزینسشان و حضور فعال و گسترده در بازار، لازم است وبسایت جذاب و کارآمدی برای کسب و کارشان طراحی کنند. به همین دلیل بازار طراحی سایت در ایران، داغ و پررونق شده است. از طرفی طراحان سایت هم برای پیشی گرفتن از همتایان خود، نیاز به یادگیری مهارتهای ویژه برای طراحی سایتهای منحصر به فرد دارند. یکی از روشهای سبقت گرفتن از رقبا در این عرصه، آموزش طراحی سایت با CSS پیشرفته و Sass است. مزایای یادگیری این موضوع به گونهای است که طراحان سایت حرفهای و کاربلد را ترغیب کرده است که در دوره آموزش طراحی سایت با css پیشرفته و sass شرکت کنند.
CSS یک زبان برنامه نویسی به معنای سنتی نیست و نوعی زبان نشانهگذاری است که برای توصیف ظاهر وبسایت مورد استفاده قرار میگیرد. در کل زبانهای نشانهگذاری مثل CSS برای ساختاردهی و فرمتدهی اطلاعات به کار میروند. این مدل زبانها، ساختار سادهتری نسبت به زبانهای برنامهنویسی دارند و عمدتاً از تگها و صفات برای تعریف عناصر و نحوه نمایش آنها در صفحه استفاده میکنند.
Sass یک زبان پیشپردازنده برای CSS به حساب میآید که قابلیتها و امکانات جدیدی را در اختیار این زبان قرار میدهد. توجه داشته باشید که Sass روی CSS ساخته شده است و از کلیه قواعد و انتخابگرهای CSS پشتیبانی میکند. همچنین Scss یک سینتکس (syntax) محبوب برای نوشتن کد Sass است. اکنون که مفهوم CSS و Sass را درک کردیم، میتوانیم در مورد مزایای آموزش طراحی سایت با CSS پیشرفته و Sass صحبت کنیم:
با آموزش css پیشرفته میتوان سایتهای جذابتر و بهتری طراحی کرد. در واقع آموزش طراحی سایت حرفهای، مقدمهای برای یادگیری نحوه طراحی سایتهای یگانه و منحصر به فرد است. اصولاً وردپرس و سایر سیستمهای مدیریت محتوا با این هدف طراحی شدند که افراد از یادگیری برنامهنویسی و طراحی سایت، بینیاز کنند؛ ولی امروزه هم برای طراحی کردن وبسایتهای منحصر به فرد، به یادگیری برنامهنویسی پیشرفته نیاز داریم.
Sass با ارائه مجموعهای از ویژگیها مانند متغیرها، توابع و mixinها به افراد کمک میکند تا کد CSS خود را کارآمدتر و ساختارمندتر بنویسند. همین مسئله باعث صرفهجویی در زمان کدنویسی، نوشتن سریعتر کدها و اشکالزدایی بهتر میشود.
در حال حاضر تقاضا برای برنامهنویسان و طراحان سایت با مهارت Sass افزایش یافته است. پس اگر دوره css مقدماتی را پشت سر گذاشتهاید یا در دوره html css آموزش دیدهاید، میتوانید در دوره آموزش sass پروژه محور شرکت کنید تا بتوانید این مهارت را بیاموزید و صلاحیت لازم برای همکاری با شرکتهای مختلف را کسب کنید.
با شرکت در دوره html css پیشرفته و آموختن sass میتوانیم مفاهیم بنیادین وب و شیوه طراحی و چیدمان بصری صفحات وب را بیاموزیم. یادگیری این کارها، به ما قدرت و درک لازم برای آموزش طراحی سایت با پایتون را هم میدهد. پایتون یک زبان برنامهنویسی کاربردی است که برای ایجاد عملکردهای منطقی در وبسایتها به کار میرود.
با یادگیری مهارت طراحی سایت با css پیشرفته و sass میتوانید پروژههای طراحی سایت خود را خیلی بهتر و تخصصیتر جلو ببرید و از این درآمدتان را هم بیشتر کنید. شرکتهای بسیاری تمایل دارند که سایتشان به شکلی تخصصی و خاص طراحی شود؛ ولی نمیتوانند طراح سایت مورد نظر خود را بیابند. شما با یادگیری این مهارت و بازاریابی میتوانید این شرکتها را بیابید، با آنها همکاری کنید و درآمد خوبی رقم بزنید.
در حال حاضر بسیاری از طراحان سایت، خواهان پیشرفت در حوزه شغلی خود هست و تمایل دارند که گوی سبقت را از سایر رقبای خود بربایند و به یک برند کاربلد و کمنظیر در عرصه طراحی سایت تبدیل شوند. پلتفرم آموزشی مکتبخونه، متوجه این تقاضا را از سوی مخاطبان شد و تصمیم به برگزاری یک دوره 42 ساعته با عنوان «دوره آموزش طراحی سایت با CSS پیشرفته و Sass» گرفت.
استاد این دوره، آقای مهدی تهورگر، مدرس و برنامهنویس وب و موبایل و متخصص برنامهنویسی فرانتاند است. ایشان سابقه فعالیت فریلنسری در پلتفرمهای بینالمللی همچون فریلنسر و آوپ ورک را نیز دارند دارد. مهندس تهورگر سابقه تدریس در دیگر پلتفرمهای بینالمللی مانند Udemy را نیز در کارنامه خود دارد.
دوره آموزشی مورد بحث به صورت عملی و پروژه محور برگزار میشود تا افراد حاضر در دوره بتوانند نکات و آموزهها را به صورت تجربی و عملی فرابگیرند و پس از اتمام دوره، چیزهایی که یاد گرفتهاند را در پروژههای خود پیادهسازی کنند.
در صورت تمایل به شرکت در دوره آموزش طراحی سایت با CSS پیشرفته و Sass، لازم است از قبل با css و html آشنایی داشته باشید. همچنین میتوانید در دورههای آموزش html css پروژه محور رایگان شرکت کنید. بعضی دورههای آموزش طراحی سایت رایگان هم این مهارتها را به شما آموزش میدهند.
آشنایی با DOM یا Document Object Model نیز به شما کمک میکند که از این دوره، بهره بیشتر و بهتری ببرید. DOM در واقع یک رابط برنامهنویسی است که برای اسناد اچ تی ام ال (HTML) و XML مورد استفاده قرار میگیرد.
در ادامه سرفصلهای دوره آموزش طراحی سایت با CSS پیشرفته و Sass را به صورت مختصر و مفید بیان میکنیم:
این دوره برای کلیه کسانی که با مقدمات طراحی سایت، css و html آشنا هستند و میخواهند طراحی سایت را به صورت عمیقتر و حرفهایتر فرابگیرند، مناسب است. با شرکت در این دوره میتوانید طراحی سایت را به صورتی کاملاً متفاوت، جذاب و تخصصی انجام دهید. در واقع پس از اتمام این دوره، دیگر هیچ محدودیتی برای سایت دلخواه خود نخواهید داشت.
در صورت تمایل به یادگیری حرفهای و تخصصی طراحی سایت با جدیدترین متد، پیشنهاد میشود که در دوره آموزش طراحی سایت با CSS پیشرفته و Sass ثبت کنید. پلتفرم آموزشی مکتبخونه، دورههای حرفهای و جذاب مختلفی برای یادگیری طراحی سایت در وبسایت خود عرضه کرده است. در صورت تمایل به کسب اطلاعات بیشتر در مورد این دورهها و ثبت نام در آنها، کافی است به صفحه آموزش طراحی سایت مراجعه کنید. همچنین در مکتب خونه انواع پکیج آموزش برنامه نویسی به عنوان مکمل و پیش نیاز این دوره موجود است.
فصل اول: مقدمه:
1 – بررسی اجمالی دوره
2 – ابزارها
فصل دوم: طراحی وبسایت سیم کارت با Adobe XD:
1 – طراحی Header در Adobe XD
2 – طراحی امکانات در Adobe XD
3 – طراحی کارتها در Adobe XD
4 – طراحی بخش طرحهای فروش و بازخوردها در Adobe XD
5 – طراحی فرم فروش سیم کارت و Footer در Adobe XD
6 – فایلهای طراحی
7 – طراحی با Adobe XD
فصل سوم: تنظیمات پروژه وبسایت سیم کارت:
1 – تنظیمات پروژه
2 – Header – بخش اول
3 – Header – بخش دوم
فصل چهارم: مروری بر CSS:
1 – انتخابگر (Selector) های CSS
2 – CSS چگونه کار میکند؟
3 – مفهوم CSS box model در CSS
فصل پنجم: CSS پیشرفته و Sass (ادامه ساخت وبسایت فروش سیم کارت):
1 – نصب Sass
2 – نصب Sass
3 – تبدیل کدهای CSS به Sass
4 – Heading primary
5 – Heading primary
6 – تفکر نامگذاری BEM
7 – تفکر نامگذاری BEM
8 – امکانات وبسایت – بخش اول
9 – امکانات وبسایت – بخش اول
10 – امکانات وبسایت – بخش دوم
11 – امکانات وبسایت – بخش دوم
12 – ساخت Float grid – بخش اول
13 – ساخت Float grid – بخش دوم
14 – ساخت کارتهای سیم کارت – بخش اول
15 – ساخت کارتهای سیم کارت – بخش اول
16 – ساخت کارتهای سیم کارت – بخش دوم
17 – ساخت کارتهای سیم کارت – بخش دوم
18 – ساخت طرحهای فروش – بخش اول
19 – ساخت طرحهای فروش – بخش اول
20 – ساخت طرحهای فروش – بخش دوم
21 – ساخت طرحهای فروش – بخش دوم
22 – ساخت بخش بازخوردها
23 – ساخت بخش بازخوردها
24 – فرم خرید سیم کارت – بخش اول
25 – فرم خرید سیم کارت – بخش اول
26 – فرم خرید سیم کارت – بخش دوم
27 – فرم خرید سیم کارت – بخش دوم
28 – طراحی Footer وبسایت
29 – طراحی Footer وبسایت
30 – ساخت دکمه Button-flip
31 – ساخت دکمه Button-flip
32 – ساخت Navigation – بخش اول
33 – ساخت Navigation – بخش اول
34 – ساخت Navigation – بخش دوم
35 – ساخت Navigation – بخش دوم
فصل ششم: طراحی واکنشگرا (Responsive Design):
1 – تنظیمات اولیه واکنشگرایی
2 – تنظیمات اولیه واکنشگرایی
3 – Header واکنشگرا
4 – Header واکنشگرا
5 – واکنشگرایی قسمت امکانات و float grid
6 – واکنشگرایی قسمت امکانات و float grid
7 – واکنشگرایی قسمتهای طرحهای فروش و سیم کارت
8 – واکنشگرایی قسمتهای طرحهای فروش و سیم کارت
9 – واکنشگرایی قسمتهای طرحهای فروش برای صفحات لمسی
10 – واکنشگرایی قسمتهای طرحهای فروش برای صفحات لمسی
11 – واکنشگرایی عکسها با html
12 – واکنشگرایی عکسها با html
13 – واکنشگرایی قسمت فرم و Footer
14 – واکنشگرایی قسمت فرم و Footer
15 – فرایند ساخت وبسایت برای بارگذاری روی سرور
16 – فرایند ساخت وبسایت برای بارگذاری روی سرور
17 – سفارش پیتزا
فصل هفتم: Flexbox پیشرفته:
1 – معرفی پروژه
2 – طراحی Header با Adobe Xd
3 – طراحی وبسایت با Adobe Xd
4 – مفهوم flexbox و تنظیمات Codepen
5 – مفاهیم Flexbox در Codepen – بخش اول
6 – مفاهیم Flexbox در Codepen – بخش اول
7 – مفاهیم Flexbox در Codepen – بخش دوم
8 – مفاهیم Flexbox در Codepen – بخش دوم
9 – تنظیمات پروژه
10 – ساخت Header – بخش اول
11 – ساخت Header – بخش اول
12 – ساخت Header – بخش دوم
13 – ساخت Header – بخش دوم
14 – ساخت Container left و Container center – بخش اول
15 – ساخت Container left و Container center – بخش اول
16 – ساخت Container left و Container center – بخش دوم
17 – ساخت Container left و Container center – بخش دوم
18 – ساخت Container left و Container center – بخش سوم
19 – ساخت Container left و Container center – بخش سوم
20 – ساخت Container right
21 – ساخت Container right
22 – واکنشگرایی کل وبسایت
23 – واکنشگرایی کل وبسایت
24 – فایلهای طراحی
25 – سفارش خرید ماشین
فصل هشتم: طراحی وبسایت Beetle با Adobe XD:
1 – طراحی Header
2 – طراحی ژورنال
3 – طراحی قسمت فروش
4 – طراحی گالری
5 – طراحی Footer
6 – فایلهای طراحی
فصل نهم: مقدمهای بر CSS Grid:
1 – معرفی grid
2 – مفهوم Grid container
3 – تقسیمبندی با Grid-template
4 – کار با Grid row و Grid col
5 – کار با Grid row و Grid col پیشرفته
6 – تمرین با Grid
7 – حل چالش تمرین با Grid
8 – نامگذاری خطهای Grid
9 – نامگذاری محیط Grid
10 – تفاوت بین Explicit و Implicit
11 – همترازی آیتمهای Grid – بخش اول
12 – همترازی آیتمهای Grid – بخش دوم
13 – آشنایی با مفهوم Content max-content minmax function
14 – آشنایی با واکنشگرایی در Grid با Auto-fill و Auto-fit
15 – فایلهای طراحی
فصل دهم: مفاهیم پیشرفته CSS Grid:
1 – تنظیمات پروژه Beetle
2 – بخشبندی کل پروژه با Grid – بخش اول
3 – بخشبندی کل پروژه با Grid – بخش اول
4 – بخشبندی کل پروژه با Grid – بخش دوم
5 – بخشبندی کل پروژه با Grid – بخش دوم
6 – ساخت Header
7 – ساخت Header
8 – ساخت ژورنال
9 – ساخت ژورنال
10 – ساخت Discover
11 – ساخت Discover
12 – ساخت قسمت فروش
13 – ساخت قسمت فروش
14 – ساخت گالری – بخش اول
15 – ساخت گالری – بخش اول
16 – ساخت گالری – بخش دوم
17 – ساخت گالری – بخش دوم
18 – ساخت Footer
19 – ساخت Footer
20 – ساخت Sidebar
21 – ساخت Sidebar
22 – واکنشگرایی Header
23 – واکنشگرایی Header
24 – واکنشگرایی ژورنال و Discover
25 – واکنشگرایی ژورنال و Discover
26 – واکنش گرایی Footer
27 – واکنش گرایی Footer
28 – آژانس خلاقیت
پروژه پایانی:
1 – وبسایت ارائه خدمات ساخت اپلیکیشن