آموزش CSS از مقدماتی تا پیشرفته + پروژه های کاربردی
اگه HTML رو خوب یادگرفتی و تمرین هاتو کردی. وقتشه بیای سمت CSS تا بتونی صفحات شیکی رو به مشتریانت ارائه بدی (: آموزش Html
دوره‌ای جامع برای تسلط در CSS
آموزش های زیادی در زمینه استایل دهی با css وجود دارد. ممکن است برای شما پیش امده باشد که بعد از دیدن آن ها باز هم تسلط کامل برای استایل دهی نداشته باشید.
در دوره جامع آموزش CSS قرار هست باهم پروژه محور با پروژه های کاربردی جلو بریم ، تسلط و تجربه ای که در طراحی سایت و استایل دهی css داریم را به شما انتقال دهیم.
در پایان این دوره شما بخش های مختلف و تمام نکات طراحی با css را یاد میگیرید.
اگر علاقه به یادگیری طراحی سایت دارید، در دوره آموزش CSS از مقدماتی تا پیشرفته در کنار شما هستیم.
چه نکاتی در دوره آموزش جامع CSS می آموزیم؟
شما در دوره Css مقدماتی با خیلی از Property ها و نکات Css آشنا شدید و بعد از دوره Css مقدماتی می توانستید سایت های مختلفی طراحی کنید.اما در Css مطالب پیشرفته ای نیز وجود داره که برای تسلط در Css باید آن ها را بلد باشید.
مثلا شما بعد از دوره Css مقدماتی سبزلرن نمی توانستید به قسمت های مختلف سایت انیمیشن اعمال کنید یا …در این دوره موارد پیشرفته Css به صورت پروژه محور به شما آموزش داده می شود و در انتهای دوره چندین مینی پروژه نیز انجام شده تا شما مطالب لازم را به طول کامل و عمیق یاد بگیرید و به راحتی بتوانید سایت های مختلفی طراحی کنید.
چرا باید Css را یاد بگیرم؟
برنامه نویسی فرانت اند یکی از محبوب ترین و پردرآمد ترین حوزه های شغلی است که بازار کار فوق العاده‌ای دارد. برای فعالیت در حوزه فرانت اند بعد از این که Html رو یاد گرفتین، برای استایل دهی به المنت های وب سایت و خوشگل‌تر کردن نمای وب سایت باید از زبان Css استفاده کرد.
از آنجایی که هیچ جایگزینی برای Css وجود ندارد و Css تنها زبان برای استایل دهی به صفحات وب است، برای فعالیت در زمینه برنامه نویسی فرانت اند باید زبان Css رو به بهترین شکل یاد بگیرید.
چرا این دوره رایگان است؟
در اصل شما فقط ظاهر داستان رو می بینید و از هزینه های پشت پرده که برای دوره آموزش Css صرف شدن آگاه نیستین.
هزینه سرور، دامین، هاست و … برای نگهداری دوره و دسترسی شما عزیزان به آن به صورت ماهیانه پرداخت می شود.
علاوه بر این هزینه‌ها، برای تدریس دوره نیز به صورت ساعتی برای مدرس هزینه داده شده است.
پس در اصل دوره آموزش مقدماتی تا پیشرفته Css به شکل رایگان تولید نشده و هزینه های زیادی برای آن پرداخت شده تا در نهایت به صورت رایگان در اختیار شما عزیزان قرار بگیره.
بابت کیفیت جلسات هم خیالتون تخت تخت باشه.
چون علاوه بر تخصص بالای مدرس، هر کدوم از جلسات دوره قبل از آپلود شدن روی سایت توسط تیم فنی سبزلرن مورد بررسی قرار گرفتن.
پس آموزش Css رو پر قدرت شروع کنین.
بازار کار Css در چه وضعیتی قرار دارد؟
زبان Css یکی از مهم ترین و ضروری ترین زبان های حوزه برنامه نویسی فرانت اند محسوب می شود که شما با هر کدوم از تکنولوژی های فرانت اند که کار بکنید، در هر صورت به Css نیاز دارید و استایل دهی تمامی وب سایت ها به کمک Css انجام میشه.
همچنین حوزه فرانت اند یکی از پر درآمد ترین حوزه های برنامه نویسی است که برای درک بهتر این بازار می توانید به وب سایت هایی مثل جابینجا، آی استخدام، جاب ویژن و … که در زمینه استخدام و بازار کار فعالیت می کنند مراجعه کنید.
دوره آموزش Css برای چه افرادی مناسب است؟
دوره آموزش Css برای عزیزانی که قصد فعالیت در حوزه فرانت اند رو دارن مناسب است.
همچنین برای آن دسته از افراد که قبلا Css رو یاد گرفتن اما هنوز احساس ضعف می کنن نیز مناسب است و میتونن با گذروندن این دوره ضعف های خودشون رو در زمینه Css برطرف کنن.
چرا باید از دوره آموزش Css سبزلرن استفاده کنم؟
دوره های آموزشی سبزلرن چندین وجه تمایز نسبت به دوره های دیگه دارن که دوره های سبزلرن رو متفاوت میکنن. ویژگی هایی مثل:
- کاملا رایگانه و برای یادگیری Css نیازی به پرداخت هزینه ندارین.
- از سطح مقدماتی تا پیشرفته تدریس شده.
- به صورت پروژه محوره و داخل دوره چندین پروژه خفن پیاده سازی شده.
- دوره پشتیبانی رایگان و مادام العمر داره و به همه سوالاتتون پاسخ داده میشه.
برای شروع این دوره چه پیش نیاز هایی را باید بلد باشیم؟
برای ساخت یک وب سایت قبل از هر چیزی از زبان Html برای ساخت ساختمان کلی و اسکلت بندی آن استفاده میشه و بعد از پیاده سازی این مورد، نوبت به Css میرسه که سایت رو باهاش خوشگل بکنیم و به اسکلت ساخته شده استایل و رنگ و لعاب مورد نظرمون رو اعمال بکنیم.
پس برای شروع یادگیری زبان Css کافیه که زبان Html رو به خوبی بلد باشین و به جز Html هیچ پیش نیاز دیگه ای نیاز نیست.
بعد از گذراندن این دوره به چه سطحی از Css می رسم؟
اگر شما عزیزان طی یادگیری Css بعد از هر جلسه به اندازه کافی تمرین و تکرار و مطالعه داشته باشین، بعد از این دوره Css رو در سطح پیشرفته یاد میگیرین و میتونین به کمک Html و Css هر وب سایت و قالب قابل قبول برای بازار کار رو پیاده سازی کنین؛ قالب هایی مثل سایت شرکتی، شخصی، آموزشی، فروشگاهی و …
در چه مدت زمانی می توان Css را یاد گرفت؟
این سوالی هست که توسط خیلی از دانشجویان عزیز پرسیده میشه اما هیچ پاسخ ثابت و یکسانی نداره و مدت زمان یادگیری برای هر شخص متفاوته.
یه شخص میتونه Css رو در عرض 2 ماه یاد بگیره. در حالی که ممکنه یه شخص دیگه تو 4 ماه هم نتونه به سطح لازم برسه!
پس سعی کنین با این سوال ذهنتون رو مشغول نکنین.
اما معیار هایی وجود دارن که میشه باهاشون به طور تقریبی مدت زمان یادگیری Css رو حدس زد. معیار هایی مثل:
- روزانه چند ساعت برای یادگیری Css وقت میذارین
- به چه اندازه از داکیومنت و رفرنس های متنی استفاده میکنین
- روزانه چقدر تمرین و کدنویسی می کنین
- چقدر به زبان انگلیسی مسلط هستین
- و …
اما به طور کلی اگه این 4 معیار رو به خوبی داشته باشین، تقریبا به طور میانگین میتونین در عرض 3 الی 6 ماه به سطح بسیار فوق العاده‌ای در Css برسید.
آیا یادگیری Css سخت است؟
قطعا هر راه پیچ و خمی دارد و هر حوزه سختی های خاص خودش رو.
یادگیری مفاهیم و مطالب زبان Css کار پیچیده و دشواری نیست و می توانید آن ها را به خوبی یاد بگیرین. اما فقط دونستن این مطالب کفایت نمیکنه.
بلکه باید بتونین از Css در پروژه های واقعی استفاده کنین و باهاش طرح های خوشگل و جذاب پیاده سازی کنین.
این موضوع نیازمند تمرین و تکرار هست و یه کوچولو زمان میگیره ازتون که باید حوصله به خرج بدین و دست از تمرین و تکرار برندارین و همچنین باید کمی خلاقیت هم داشته باشین.
پس یادگیری Css کار سخت و دشواری نیست. بلکه کمی زمان و خلاقیت نیاز داره و هرچقدر که به این حوزه علاقه داشته باشین، یادگیری Css و کار باهاش به همون اندازه براتون آسون و شیرین خواهد بود.
آیا در این دوره صفر تا صد Css آموزش داده شده است؟
بله. در دوره آموزش Css سعی کردیم مطالب و مباحثی از Css رو که شما عزیزان به عنوان یک توسعه دهنده فرانت اند به آن ها نیاز دارید رو پوشش بدیم.
پس در این دوره تمامی مطالب لازم رو برای شما عزیزان آموزش داده شده و بعد از گذروندن این دوره میتونین هر وب سایت استاتیک که میخواین رو پیاده سازی کنین.
این دوره از از چه منابعی تدریس شده است؟
دوره آموزش مقدماتی تا پیشرفته Css از منابع و رفرنس های MDN و W3schools تدریس شده که دو مورد از بهترین و کامل ترین منابع و رفرنس های حوزه برنامه نویسی وب محسوب می شوند.
پس بابت کامل بودن مطالب خیالتون تخت تخت باشه و یادگیری Css رو پر قدرت شروع کنید.
آیا دوره آموزش Css پروژه محور است؟
جواب این سوال مثبت است.
حوزه برنامه نویسی به شکلی است که اگر فقط خود مطالب رو یاد بگیرین درحالی که هیچ پروژه‌ای با آن ها پیاده سازی نکنین، به هیچ وجه نمیتونین اونطور که باید به سطح تسلط برسین.
به همین دلیل در دوره آموزش Css چندین پروژه جذاب و خفن براتون پیاده سازی کردیم تا بتونین با مشاهده آن ها و تمرین و تکرار به سطح خیلی خوبی در Css برسید و این زبان قدرتمند رو به خوبی یاد بگیرین.
در دوره آموزش Css از چه ابزار هایی استفاده می شود؟
همان طور که از دوره Html یاد گرفتید، برای کار در حوزه وب به یک ویرایشگر یا IDE برای نوشتن کد و یک مرورگر برای نمایش خروجی و نتیجه کد های نوشته شده نیاز داریم.
در دوره آموزش Css نیز برای کد نویسی از ویرایشگر محبوب و پر استفاده VsCode و برای اجرای کد ها از مرورگر Google Chrome استفاده می کنیم.
اما همان طور می دانید برای کدنویسی و اجرای کدهای نوشته شده هیچ اجباری به استفاده از ادیتور، IDE یا مرورگر خاصی نیست و می توانید به جای VsCode و Chrome از هر ابزار دیگه مثل Atom, Sublime Text, FireFox و … که دوست دارید استفاده کنید.
اما به دلیل محبوبیت و قابلیت هایی که VsCode و Chrome در اختیارمون قرار میذارن، تو این دوره از این دو ابزار استفاده می کنیم.
آیا این دوره پشتیبانی دارد؟
در یک کلام “دوره آموزشی که پشتیبانی نداشته باشد، از ارزش خاصی برخوردار نیست”.
چون طی هر دوره آموزشی ممکن است دانشجو های دوره با سوالات و مشکلاتی مواجه شوند که برای برطرف شدن آن ها نیاز به یک شخص متخصص در آن حوزه هستند.
دوره آموزش Css سبزلرن پشتیبانی مادام العمر و رایگان دارد و می توانید در هر کدام از جلسات دوره هر سوال و ابهامی داشتید، آن را در قسمت پرسش و پاسخ دوره مطرح کنید تا به طور مستقیم با مدرس در ارتباط بوده و سوالتان برطرف شود.
سوالات متداول
شما با Css می توانید عناصر وب سایت را استایل دهی کنید اما نمی توانید به عمل های کاربر واکنش های مناسب و دلخواه انجام بدید.
برای این کار باید از جاوا اسکریپت استفاده کنید.
بعد از یادگیری Css نوبت به آموزش جاوا اسکریپت می رسد که باید یاد بگیرید.
جواب مثبت / منفی است.
شما می توانید وب سایت های خیلی شیک و زیبایی با خود Html و Css طراحی کنید و کسب درآمد کنید. اما ممکن است پروژه ای باشد که نیاز به جاوا اسکریپت داشته باشد.
برای همین موضوع برای مطمئن تر شدن از کسب درآمد، جاوا اسکریپت را یاد بگیرید و سپس با قدرت بیشتر وارد بازار کار بشید.
شما حتی می توانید با خود Css انیمیشن های مختلفی در وب سایت خود پیاده سازی کنید اما برای انیمیشن های پیشرفته تر باید حتما جاوا اسکریپت بلد باشید.
جواب منفی است.
هیچ جایگزینی برای Css وجود ندارد و شما برای استایل دهی به عناصر وب سایت خودتون حتما باید Css را یاد بگیرید.
یعنی شما نمی توانید بگویید “بجای Css زبان X را یاد میگیرم”.
این سوال خیلی پرسیده می شود!
هیچ قانون و استانداردی برای این سوال وجود ندارد و شما باید تقریبا به تگ های Html مسلط باشید و آن ها را بلد باشید.
ُسرفصل ها
5فرمت های رنگ پذیری در Css21:54
6Background درCss21:09
7توضیح کامل border در Css28:54
8margin در Css18:29
9Padding در Css11:10
10Outline در Css10:27
11استایل دهی به متون در Css (بخش اول)15:12
12استایل دهی به متون در Css (بخش دوم)20:47
13فونت در Css16:18
14آموزش کامل font-face در Css10:39
15کار با آیکون ها در Css19:49
16لینک ها در Css11:36
17لیست ها در Css (بخش اول)11:31
18استایل دهی به جداول در Css20:31
19استایل دهی جداول در CSS (بخش دوم) *مینی پروژه*13:26
20خاصیت display در زبان CSS8:24
21انواع position در زبان CSS17:11
22انواع position در زبان CSS (بخش دوم)11:31
23ویژگی overflow در زبان CSS8:03
24float & clear در CSS19:42
25روش های ترازبندی عناصر16:03
26آموزش کار با تصاویر در CSS15:23
27آموزش کامل Box Model در CSS16:13
28آموزش نحوه استفاده از ID در CSS9:38
29انتخابگرهای پیشرفته در CSS (بخش اول)24:32
30انتخابگرهای پیشرفته در CSS (بخش دوم)23:14
31انتخابگرهای پیشرفته در CSS (بخش سوم)19:59
32انتخابگرهای پیشرفته در CSS (بخش چهارم)10:02
33آموزش کار با فرم ها در CSS (بخش اول)19:34
34آموزش کار با فرم ها در CSS (بخش دوم) *مینی پروژه*15:23
35z-index important در زبان Css11:23
36آموزش کامل و جامع دستورات visibility و opacity + تمرین12:03
37مفاهیم box-shadow text-shadow در Css10:14
38آموزش فضای دو بعدی در Css (بخش اول)7:28
39آموزش فضای دو بعدی در Css (بخش دوم)8:54
40بحث مفصلِ کار با transition *مینی پروژه*12:47
41انیمیشن ها در زبانِ Css3 (بخش اول)10:21
42انیمیشن ها در زبانِ Css3 (بخش دوم) *مینی پروژه*8:19
43ساخت یک منو جذاب *مینی پروژه*13:01
44ساخت یک گالری *مینی پروژه*15:23
45ساخت چندین آلرت زیبا با Css *مینی پروژه*11:43
46ساخت یک تولتیپ ساده در Css *مینی پروژه*12:30
47ساخت یک تولتیپ جذاب با استفاده از after & before *مینی پروژه*9:49
48ساخت یک منو حرفه ای با استفاده از after & before *مینی پروژه*22:09
49ساخت یک گالری حرفه ای با hover متنوع (بخش اول) *مینی پروژه*19:35
50ساخت یک گالری حرفه ای با hover متنوع (بخش دوم) *مینی پروژه*9:31
51آموزش واکنشگرایی با css به وسیله مدیاکوئری ها (بخش 1)21:28
52آموزش واکنشگرایی با css به وسیله مدیاکوئری ها (بخش 2)21:48
53آموزش واکنشگرایی با css به وسیله مدیاکوئری ها (بخش 3)22:40
54آموزش فضای سه بعدی در Css17:40
55ساخت سایدبار فیکس در صفحه با HTML & Css *مینی پروژه*15:23
56ساخت یک گالری تصاویر ریسپانسیو با HTML & Css *مینی پروژه*20:19
57ساخت پاپ آپ برای تصاویر به کمک Css *مینی پروژه*15:20
58ساخت منو افقی فیکس در بالا و پایین صفحه با Html & Css *مینی پروژه*17:30
59ساخت منو افقی چسبنده *مینی پروژه*9:59
60ساخت یک منو افقی ریسپانسیو**مینی پروژه**15:54
61ساخت یک متوازی الاضلاع با استفاده از Html & Css *مینی پروژه*13:38
62طراحی یک Loading حرفه ای با استفاده از Html & Css *مینی پروژه*12:57
63طراحی شماتیک یک وبسایت خام ریسپانسیو با Html & Css *مینی پروژه*18:31
64طراحی شماتیک یک وبسایت خام ریسپانسیو با Html & Css (بخش دوم) *مینی پروژه*19:23
65صحبت های پایانی و راهنمایی برای ادامه مسیر10:44
امیر دینی
Senior Software Developerامیر محمد دینی هستم. مدرس دوره های طراحی وب. با 8 سال سابقه حرفه ای در کد نویسی صفحات وب.بیش از 4 ساله...
نظرات
قوانین ثبت دیدگاه
- دیدگاه های نامرتبط به دوره تایید نخواهد شد.
- سوالات مرتبط با رفع اشکال در این بخش تایید نخواهد شد.
- از درج دیدگاه های تکراری پرهیز نمایید.
- اگر نیاز به پشتیبانی دوره دارید از قسمت پرسش سوال در قسمت نمایش انلاین استفاده نمایید
برای ارسال نظر باید وارد حساب کاربری خود شده باشید.
50000 – رایگان!
tara( خریدار محصول )
سلام وقتتون بخیر، ممنون بایت دوره خوبیتون… sass رو اموزش نمیدین ؟؟
rabani_Shahin( خریدار محصول )
سلام.
ممنون از سایت سبز لرن و جناب دینی عزیز بابت ارائه این دوره.
واقعا خیلی عالی توضیح دادن و کاملا مشخصه که چقدددددررررررر بر موضوع تسلط دارن.
من که از این دوره لذت بردم.
موفق و سربلند باشید.
Abolfazleilka( خریدار محصول )
مثل همه دوره هاتون عالی بود استاد
ممنون بابت دوره خوبتون
rozhan( خریدار محصول )
واقعا عالی هستین و خیلی با حوصله و قشنگ توضیح میدین.ازتون خیلی ممنونم
Moeid py( خریدار محصول )
ممنون بابت زحماتی که برای این دوره کشیده اید . دمتون گرم
alinter( خریدار محصول )
درود و ادب خدمت جناب دینی عزیز
بنده چندین سال هست که برنامه نویسم و تقریبا تمامی دوره های آنلاین را نگاه میکنم تا بتونم خودم را آبدیت نگه دارم، این کامنتم نظر شخصی بنده هست
محاسن دوره:
1- جناب دینی کاملا به بحث css مسلط هستند و به خوبی میتونن مطالب را بیان کنن
2- سرفصلهای دوره تقریبا کامل هست و یک نفر با گذراندن دوره و تمرین به راحتی میتونه مهارت css را به صورت کامل یاد بگیره
3- مینی پروژه های متعدد آخر دوره که میتونه تو آبدیتهای بعدی بیشتر هم بشه
معایب دوره:
1- تلفظ اشتباه تقریبا تمامی واژگان، حتی به صورت شانسی هم یکبار Weight، Area, Division را درست تلفظ نکردن، شاید برای html & css فرقی نکنه که ما چه تلفظی داریم ولی قطعا برای تدریس اونم تو سایت خوبی مثل سبزلرن، تلفظ درست الزامی هست.
پیشنهادات:
1- حداقل دو قسمت در مورد کدخوانی لندینگ پیچهای سایتهای معروف باید داخل دوره باشه
2- از هر کلیدمیانبری که استفاده میکنید، حداقل روی تصاویر بار اول باید درج بشه (تو دوره های آنلاین خیلی متداول هست)
3- لطفا یک نظرسنجی داخل تلگرام بذارید و مینی پروژه جذابی که دوستان پیشنهاد میدن را داخل دوره اضافه کنید
دوستانی که میخوان html & css را از مبتدی صفر یاد بگیرن حتما با این دوره شروع کنن
به صورت قطعی میتونم بگم با گذروندن این دوره، کار با w3schools و تمرین زیاد، دیگه نیاز به هیچ دوره خاصی ندارن، البته کسانیکه میخوان html & css برای وردپرس یاد بگیرن، اول این دوره را بگذرونن و بعدشم دوره های مخصوص css در وردپرس را
arezoo( خریدار محصول )
سلام و عرض خسته نباشید . من دوره css رو کامل دیدم و حتی از روش جزوه برداری کردم قطعا بابت تهیه این دوره خیلی زحمت کشیدید همین جا جا داره ازتون تشکر کنم فقط دو تا انتقاد دارم یکی اینکه موقع شروع هر مبحث خیلی کشش میدین تا اصل مطلب رو شروع کنید گاهی اوقات ادم کلافه می شه و دلش میخواد فیلم رو بده جلو و این اصلا خوب نیست مثلا برخی جملات رو چندین بار تکرار می کنید که اصلا ربطی به مبحث نداره . مورد دوم اینکه توی همه فیلمها ادرس اینستا و … رو تبلیغ می کنید اما خود من عضو پیجتون شدم و هیچ چیز هیجانی که اینقدر نیاز به تبلیغ داشته باشه ندیدم ولی در اینستا پیج هایی هستند که خیلی بیشتر پست می زارن و فعالیت می کنند . در هر صورت ممنون از زحمات شما
HamidDGEH( خریدار محصول )
تا قسمت ۴ دیدم حس ششم ام میگه عالیه فقط من چک کردم سرفصل های دوره رو به صورت کامل و ۳ تا چیز که خیلی براش کنجکاو بودم یاد داده باشید رو پیدا نکردم و از سرچ گوگل تنها تونستم پیدا کنم و هیچ کدوم از سایت ها یاد نداده بودن!!! به نظرم یاد بدید خیلی خوبه
– طراحی یک مگا منو با زیر منو زیاد مثلا دقیقا مثل منوی سایت سافت نود هشت یا سایت دیجی کالا
– چگونه بدون هیچ استفاده از جاوا اسکریپتی، یک اسلایدر عکس درست کنیم
-چگونه بدون استفاده از جاوا اسکریپت، یک منو رسپانسیو درست کنیم که مثلا وقتی یک تبلت یا گوشی خواست وارد سایت بشه دقیقا مثل سه خط تلگرام یک آیکون باشه که وقتی روش کلیک کردیم منو ها از کنار صفحه ظاهر بشن
اگه بازم چیزی حین نگاه کردن دوره یادم بیاد حتما میگم چون شما ها که انقدر زحمت میکشید حقتون که زیاد پیشرفت کنید:)
amirali( خریدار محصول )
با اطمینان میتونم بگم امروز تک به تک اموزش های تیم سبز لرن رو چشم بسته تهییه میکنم اگر از من بپرسن چرا سبز لرن =
1 : پوشش کامل منابع اموزشی و ایجاد اعتماد فراوان
2 : قیمت های اقتصادی و فوق العاده مناسب دوره هاشون که این نشون دهنده این مطلب هست که این تیم سیاست ای اقتصادی در اولویت نداره و چی بهتر از این نوع تفکر؟
3 : مدرسین خوش اخلاق و درجه یک به تمام معنا استاد واقعی . دم همگی گرم