فصل اول – Header ها?
در این فصل ، چندین هدر جذاب را پیاده سازی خواهیم کرد و در هر ویدیو یک تکنیک و یا پراپرتی جدیدی را آموزش خواهید دید ، در css پراپرتی های کاربری اما کمتر شناخته شده ای وجود دارد که در این فصل به برخی از آنها اشاره خواهیم کرد
5Header 4 – کارکردن با پراپرتی جالب clip path34:19
6Header 5 – اشکال هندسی متفاوت با clip path maker21:03
7Header 6 – کارکردن با فیلتر greyscale و سیاه سفید کردن عکس ها29:32
8Header 7 – قرار دادن ویدیو به عنوان هدر + فیلتر blur32:24
9Header 8 – نوشته های شیشه ای و کار با mix blend mode20:23
10Header 9 – ترکیب فلکس و گرید37:24
11پروژه پایان فصل – آدمک38:26
فصل دوم – Button ها?
در این فصل قراره که کلی دکمه با طرح های متفاوت بزنیم و تکینک ها و انیمشن های خاصی رو باهمدیگه یاد بگیریم
1Button 1 – کارکردن با transition origin و rotate ها19:10
2Button 2 – انیمیشن دادن به بوردرها با کمک transform18:04
3Button 3 – دکمه ی نئونی ، کارکردن با text shadow و box shadow27:40
4Button 4 – کارکردن با gradient در دکمه ها9:15
5Button 5 – تکنیک gradient دادن به بوردرها14:26
6Button 6 – کار با nth-child و transition delay22:43
7Button 7 – بوردرهای متحرک با keyframe و animation delay24:55
8Button 8 – کار با opacity و scale6:49
9پروژه ی پایان فصل – نوار موزیک16:06
فصل سوم – منو ها و navbar ها?
در این فصل در مورد navbar ها و منوها صحبت خواهیم کرد ، چندنکته ی مهم در طراحی این قسمت هارا یاد خواهیم گرفت و در ادامه نیز با پیاده سازی چند پروژه ی جذاب ، فصل را به پایان خواهیم رساند
1درمورد این فصل1:40
2نکته ی طلایی اول7:26
3نکته ی طلایی دوم3:26
4نکته طلایی سوم4:33
5Nav 1 – اعمال shadow برای آیتم های لیست12:54
6Nav 2 – کار با border with14:31
7Nav 3 – آموزش text fill نوشته ها9:12
8nav 4 – پرژه پایان فصل و ساخت منو کشویی جذاب28:32
فصل چهارم – بخش Media?
در این فصل چندین پروژه در مورد Media خواهیم زد و در این فصل کوتاه هم چندین تکنیک یاد خواهید گرفت
1Media 1 – مرور keyframe ها و ترکیب با before16:51
2Media 2 – استفاده خلاقانه از position ها و بازگشت انیمیشن18:51
3Media 3 – پروژه پایان فصل و آموزش transition در direction متفاوت34:00
فصل پنجم – background های شناور?
در این فصل یاد خواهیم گرفت که بکگراند های شناور و متحرک پیاده سازی کنیم
1Bg 1 – آموزش move and spin با shape ها17:59
2Bg 2 – حرکت ماشین در خیابان11:33
3Bg 3 – کلبه ی برفی (آموزش بارش برف با انیمیشن ها)10:58
4Bg 4 – پروژه پایان فصل – استفاده ترکیبی از transform ها و opacity14:11
فصل ششم – ساخت search box و loading bar?
در این فصل search box ها و loading bar های مختلف را کد زنی خواهیم کرد
1Loading 1 – افزودن animation delay منفی!17:27
2Loading 2 – ترکیب transform ها در انیمیشن ها12:27
3Loading 3 – زمان بندی مناسب در delay ها9:20
4Loading 4 – قراردادن translate ها در جهات مختلف11:53
5Loading 5 -پروژه پایان فصل – آموزش rotate سه بعدی و حول محور18:16
فصل هفتم – کار کردن با عکس ها?
در این فصل چندین پروژه متفاوت خواهیم زد و با یکسری تکنیک مربوط به عکس ها در css آشنا خواهید شد
1پراپرتی overflow چیست و چه کاربردی دارد؟؟8:12
2Pic 1 – تصویر سه بعدی با پراپرتی prespective9:46
3Pic 2 – آموزش قراردادن عکس در دل یک نوشته8:31
4Pic 3 – سایه 3D9:49
5Pic 4 – اینترکشن عکس موقع hover با ترکیب overflow و transform7:20
6Pic 5 – پایان فصل – اینترکشن جذاب روی عکس8:49
همکاری با سبزلرن
sanazavar (خریدار محصول) –
سلام. اپدیت این دوره کی میاد؟ چ.نمن د. قسمت رو دیدم و خیلی از روش خوشم نیومد. مثل بقیه دوره های سبزلرن نبود. این رو از قطع و وصل ضبط، روش اسم گذاری اشتباه و … میشد فهمید. مایلم اپدیت دوره رو با اقای عبادی یا سعیدی بگذرونم اما این دوره رو ادامه نمیدم.
qadiryolme –
سلام. اپدیت جدید درحال ضبط هست
Erfan (خریدار محصول) –
سلام.خسته نباشید. دوره بسیار عالی و خوب بود ولی ای کاش در قسمت منو ها به مدل های بیشتر منو مثلا منو عمودی یا sidebar یا مدل های دیگه میپرداختید. اگر امکانش هست داخل اپدیت بذارید🙏
qadiryolme –
در آپدیت جدید دوره. این موارد لحاظ میشه
mohammmadsalimiii (خریدار محصول) –
سلام آیا برای ضبط دوره از برنامه کرک شده استفاده کردید؟
ممنون
qadiryolme –
اگر مدرس از نرم افزار کمتازیا استفاده کرده باشه. به احتمال ۹۹ درصد کرک شده هست
ali.king228 (خریدار محصول) –
دستتون درد نکنه عالییییییییی
sajad moeini (خریدار محصول) –
دوره اتون خیلی خیلی عالیه
خلاقانه واسه یه لحظه اس 😅
استاد سعیدی همیشه میگن پروژه مناسب بازار کار بزنین و من طراحی درستی ب ذهنم نمیومد
با دیدن تا الان دوقسمت از دوره شما ؛ ذهنیتم خیلی متفاوت شد
ممنون بابت وقتی ک گذاشتین و تسلطتون ❤️❤️❤️
matinj031 (خریدار محصول) –
درود و عرض ادب
تشکر بابت خفن بودنتون آقای الهی
نمیشد یکم تایم فیلم ها کمتر باشه بجاش تعدادش بیشتر 🤣 چن وقته میخام شروع کنم میبینم قسمت اول 44 دیقس همت نمیکنم🤣🤣
sanazavar (خریدار محصول) –
من هم همسن مشکل رو دارم. اما این طلسم رو شکستم و قسمت یک و دو رو دیدم. اما به نظرم مثل دوره های دیگه نیست. چون نام گذاری ها و حساسیت های که توی دوره های سبزلرن دیدیدم لحاظ نشده. به نظرم شروع نکنید بهتره بذارید. اپدیت جدید بیاد. من هم منتظر اپدیت جدید میمونم.دیگ ادامه نمیدم
hadifanatic –
سلام من دوره های grid شما رو دیدم به جرعت میتونم بگم جزو خفن ترین استاد ها تو کل سایت های اموزشی از جاهای مختلفی 3>
hosinTM (خریدار محصول) –
خلاقانه برازندشه
محمدرضا (خریدار محصول) –
سلام خدمت آقای امیر الهی یه سوال داشتم
اینکه برای این دوره نیازه که به bootstrap تسلط داشته باشیم یا فقط flex و cssgrid کافیه؟
sarrg (خریدار محصول) –
هم دوره هم استاد عالی
متین (خریدار محصول) –
طولانی نمیگم: عااااااالی بود
mohammadghafari (خریدار محصول) –
خسته نباشید استاد الهی عزیز
دوره خیلی عالیه
تا الان بخش هدر رو تقریبا تموم کردم
ای کاش از روش BEM هم در دوره استفاده میکردید اینطوری نور علی نور میشد
لحن بیانتون دل نشینه با مهربونی خاصی توضیح میدید دمتون گرم ک دلسوزانه تدریس میکنید
ان شالله سلامت و تندرست باشید💙✌
mohammadghafari (خریدار محصول) –
بیزحمت دوره های بعدی وی اس کد رو هم در حالت فول سایز قرار بدید
خوانایی کد ها برای چشم بهتر میشه
دمتون گرم
moeinmahboub (خریدار محصول) –
سلام میخاستم یک خسته نباشید به استاد این دوره آقای الهی عرض کنم واقعا این دوره فوق العاده بود و با دیدن این دوره بیشتر مشکلاتم حل شد ممنونم از شما و دمتون گرم…
امیر الهی (خریدار محصول) –
سلام و وقت بخیر خدمت شما عکس ها به دلیل حجم و تعداد بالا امکان آپلود رو نداشتند . شما میتونید از عکس های دلخواه خودتون استفاده کنید . از وب سایت هایی مثل pinterest , unsplash , pexeles استفاده کنید.
Azizollah payandeh (خریدار محصول) –
به عکس هایی ک داخل دوره استفاده میکردید چگونه دسترسی پیدا کنم؟؟؟؟
Azizollah payandeh (خریدار محصول) –
از دوره بسیار راضی بودم فقط اینکه این عکس های دوره را از کجا دانلود کنم؟؟؟
راهنمایی کنید بی زحمت.
m.amin –
سلام عرض ادب
از چالش هایی که همیشه داشتم دقیقا موردی بود که مدرس در اولین ویدیو بیانش کردن
آموزش واقعا کامل و جامع مدرس هم واقعا دلسوز هستن و اشتیاق کامل برای تدریس رو دارن
بینهایت سپاسگذارم از مجموعه سبزلرن
..Emad –
سلام خسته نباشید. پروژه های زده شده ریسپانسیو هستن آیا؟
mrnayeri (خریدار محصول) –
با سلام خدمت الهی عزیز
این دوره بسیار کاربردی و مفید بود و به نظرم هر زبان و فریمورک جدا از مباحث تئوری به یک دوره مانند این دوره نیاز دارد تا بتوان در یادگیری عمیق شد
تدریس و بیان شما به مانند دوره گرید ساده و روان و به دور از حاشیه بود
بی نهایت از شما و همچنین سایت سبزلرن که این دوره را ارائه کردید سپاسگذارم❤️
حسین5432 (خریدار محصول) –
سلام و عرض ادب خدمت استاد الهی محترم بسیار عزیز
استاد نمیشه چندتا پروژه رسپانسیو بزنید؟هدر و navbarمخصوصا خیلی واسم مهم بود.
امیر الهی (خریدار محصول) –
سلام و درود حسین جان . ممنون بابت پیشنهادتون . اما امکانش وجود نداره چون این دوره اصولا روی مباحث ریسپانسیو مانور نمیده چون اگر این کار رو انجام بدیم از هدف اصلی دوره به دور میشیم . مباحث ریسپانسیو خیلی دشوار نیستن . برخی از قسمتاش با همون فلکس و گرید قابل پیاده سازیه . از مدیا کوئری هم میتونید بهره ببرید
amir.hossein (خریدار محصول) –
ممنون از تدریس بی نظیر و صدای گرم شما استاد…
واقعا مفاهیم رو عالیو قابل درک توضیح میدید
یه خسته نباشید ویژه هم به شما تقدیم میکنم استاد
منتظر دوره های بیشتری از شما هستیم…
امیر الهی (خریدار محصول) –
سپاسگزارم بابت لطفی که به بنده دارید . خوشحالم که دوره براتون مفید بوده
SOROUSH.SOLEIMANZADEH (خریدار محصول) –
با سلام در بخش اول قسمت 3 را دوبار آپلود کردید
Shayan (خریدار محصول) –
این ادامه هست 2 پارته
mohammad64 (خریدار محصول) –
سلام وقت شما بخیر اقا امیر واقعا خوب تدریس میکنین و موشکافانه هر دستوری رو توضیح میدین ممنونم بابت دوره های خوبتون. امیدوارم که سبزلرن اموزشای بیشتری رو که رایگان باشه و همچنین با کیفیت بیشتری رو از شما در آینده نه چندان دور منتشر کنه
امیر الهی (خریدار محصول) –
ممنون از لطف شما محمدجان . بسیار خوشحالم که دوره براتون مفید بوده . براتون آرزوی موفقیت میکنم
sharifi –
سلام استاد محترم
چرا دروه رو نمیتونم دانلود کنم
امیر الهی (خریدار محصول) –
سلام خدمت شما . ابتدا در دوره ثبت نام بفرمایید که قفل تمام فصول براتون باز بشه و به تمام ویدیوها دسترسی داشته باشید . اگر اشکال و خطایی در روند ثبت نام دوره براتون به وجود اومد از تیم پشتیبانی کمک بگیرید .
موفق باشید
امیر الهی (خریدار محصول) –
همچنین برای دانلود هر ویدیو کافیه روی ویدیوی موردنظر کلیک کنید و بعد گزینه ی دانلود ویدیو رو کلیک کنید
زهرا نیرومند (خریدار محصول) –
خیلی دوره خوبی بسیار ممنون
ali (خریدار محصول) –
دوره اوکیه مشکلی نداره ی قسمتشو کلا دیدم نود درصد کارو با گرید انجام دادی بهتر بود رو پیش نیاز میزدی قبلش گرید ام ببینیم, چون واقعا تایتل دوره خیلی فرق میکنه با موضوعاتی که بهش اشاره کردی.
امیر الهی (خریدار محصول) –
سلام علی جان . در این دوره از ابزارهای متنوعی استفاده میشه اما تمامشون در دل css وجود دارن . پس عملا پیش نیاز این دوره شناخت css هستش . اگر جایی از فلکس و گرید استفاده شده مباحث و پراپرتی های موردنیازش رو کاملا توضیح دادم که در یادگیریش خللی ایجاد نشه .
در قسمت های دیگه و در هر فصل یکسری از پراپرتی های کاربردی css معرفی میشه و کارکردن با اونها رو یادمیگیرید . ضمن اینکه در این دوره شما کارکردن با پراپرتی هارو در قالب مینی پروژه های متنوع یاد میگیرید تا تسلطتون در css افزایش پیدا کنه . عدم شناخت گرید و فلکس شما رو در این دوره با مشکلی مواجه نمیکنه چون مباحث در حد نیازه پروژه اموزش داده میشه و اگر خللی ایجاد میکرد حتما گرید رو در عناوین پیش نیازهای دوره قرار میدادم دوست عزیزم.
اگر تمایل دارید که گرید و فلکس رو کامل تر و عمیق تر یاد بگیرید میتونید از دوره های فلکس و گرید در سایت استفاده کنید.
موفق باشید
علی (خریدار محصول) –
خدا خیرت بده مهندس
بهداد (خریدار محصول) –
سلام آقا امیر دلم نیومد نظر ندم دوره رو گذروندم 84.9% از مشکاتم حل شد و خیلی از چیز هایی که نمیفهمیدم رو تو دوره شما برام قابل فهم شد یک دنیا ممنون.
Farzad Salimi (خریدار محصول) –
اوستا عشقی😁❤
محسن (خریدار محصول) –
سلام استاد وقتتون بخیر.آموزشاتون واقعا عالی و متفاوته.خیلی کاربردی و مفید و یه جورایی یه پل برای رفتن از مرحله تئوری به عملی هست برای من.بازم ممنون
رضاا (خریدار محصول) –
سلام استاد. روزتون مبارک . ممنون از این آموزش عالی و متفاوت.
دیدگاهم نسبت به css عوض شد :))
shahin (خریدار محصول) –
سلام استاد.وقتتون بخیر. من میخوام با استفاده از css grid تمام button هایی که یاد گرفتم رو کنار هم بطور منظم قرار بدم. ولی وقتی این کارومیکنم انیمیشن ک رو ی دکمه هست ویا سودکد افتر و بیفور که برای دکمه تعزف میکنم کار نمیکنن.ممنون میشم راهنماییم کنید.
امیر الهی (خریدار محصول) –
سلام دوست من
لطفا سوالتون رو در بخش “پرسش و پاسخ” دوره مطرح بفرمایید
kapitanpc (خریدار محصول) –
سلام ببخشید فرق filter و backdrop filter چیه؟
امیر الهی (خریدار محصول) –
سلام دوست عزیزم . لطفا سوالات خودتون رو در بخش پرسش و پاسخ دوره مطرح بفرمایید . سپاسگزارم
mostafa.gh (خریدار محصول) –
سلام استاد الهی عزیز خسته نباشید، روز بخیر و اگر شب پیام منو دیدید شبتون بخیر باشه 😁😊 استاد واقعا عالیه من بخش هدر ها کامل دیدم و قبلا یه دوره 12 قالب نگاه کرده بودم و اونم خیلی عالی بود این دوره شماام بخش هدرها کامل دیدم و یکسری چیزای جدید یاد گرفتم و خیلی عالی توضیح میدادید مفاهیم من گرید جاهای دیگه دیده بودم اصلا متوجه نشده بودم اما با دوره شما کاملا متوجه شدم دمتون گرم فقط خواستم بگم استاد اگه امکان داره یه دوتا قالب کامل (فروشگاهی،پنل ادمین یا شرکتی) به دوره اضافه کنید واقعا عالی میشه
امیر الهی (خریدار محصول) –
سلام مصطفی جان امیدوارم که حال شما خوب باشه . خوشحالم که دوره براتون مفید بوده و در یادگیریتون تاثیر مثبت داشته . این دوره رویکرد متفاوتی داشته از ابتدا . در این دوره بیشتر تلاش کردم که خلاقیت شما درگیر بشه و بدونید از امکانات سی اس اس به چه اشکال متفاوتی میتونید استفاده کنید . اگر ما درگیر قالب های کامل میشدیم از این هدف دور میشدیم چون باید مطالب دیگه ای رو کاور میکردیم .
اگر هدفتون یادگیری پروژه و قالب های کامل هست میتونید دوره ی اموزش حرفه ای طراحی قالب موجود در سایت رو تماشا بفرمایید.
در پایان براتون آرزوی موفقیت میکنم
HamidDGEH (خریدار محصول) –
سلام خداقوت دوره بی نظیر بود واقعا لذت بردم چه خلاقیت هایی بعدش تو ذهن آدم ایجاد میکنه واقعا مرسی فقط کاش آخر دوره یک وب سایت کامل هم ایجاد میکردید تا باهاش آشنا بشیم یا اگه پیشنهاد منو قبول میکنید لطفا یک دوره هم قرار بدید که فقط ۳۰ تا سایت کامل در سبک های مختلف زده بشه که دیگه واقعا حرف نداره اگه اینجوری بشه چون دیگه من بعد از اون سعی میکنم خودم یک سایت کامل راه اندازی کنم و بعدش با خیال راحت برم جاوا اسکریپت رو یاد بگیرم سپاس کهکشانی🤩😎😍💚💎
irmostafa (خریدار محصول) –
khaste nabashid ostad dore aly bod
ف ج (خریدار محصول) –
سلام وقت بخیر
گزینه دانلود همگانی ویدیو ها برای من کار نمیکنه… اگه میشه علتش رو بگید و امکان دانلود یکجای همه ی فیلم ها رو بذارید چون یکی یکی دانلود کردن خیلی سخته
ممنون
mr.olyafam (خریدار محصول) –
سلام خدا قوت ، خیلی ممنون بابت زحمات شما دوره خیلی خوبه من امروز شروع کردم و ویدیو اول رو دیم و تو قسمت اول مفاهیمی مثل grid رو گفتین که من باهاشون ناآشنا هستم به نظرتون اول اون دوره هارو (grid , flexbox …) ببینم بعد بیام سراغ این دوره یا نه همینو ادامه بدم اونارو هم بعد این ببینم ؟؟؟
ممنون بابت وقتی که میذارید.
امیر الهی (خریدار محصول) –
سلام دوست من ، در این دوره از فلکس و گرید استفاده میشه اما توضیحاتشون در حد نیاز پروژه هاست و مفاهیمی که نیاز به دونستنشون در پروژه هست کاملا آموزش داده میشن . پس اینکه اگر با فلکس و گرید آشنا نیستید ، خللی در روند یادگیریتون ایجاد نخواهد کرد . اما اگر علاقه مند هستید که این مفاهیم رو عمیق تر و با جزئیات بیشتر یادبگیرید میتونید از دوره های فلکس و گرید هم استفاده بکنید .
موفق باشید
amirt12 (خریدار محصول) –
سلام خسته نباشید ، تشکر میکنم از دوره ی خوبتون ، ترکوندید
فوق العاده عالی بود
Mortaza –
با سلام خدمت استاد گرامی و سپاس گزارم بابت زحمات ارزشمند شما
از ویدیوی Header 4 به بعد برای من قفله، اگه مشکل رو حل کنید ممنون میشم، با تشکر فراوان
امیر الهی (خریدار محصول) –
سلام مرتضی جان ، تا زمانی که در دوره ثبت نام نکنید ، صرفا ویدیوهای ابتدایی براتون نمایش داده میشه.
ثبت نام در دوره رایگان هست ، بعد از ثبت نام و شرکت کردن کامل در دوره ، قفل تمامی ویدیوها براتون بازخواهد شد.
Mortaza (خریدار محصول) –
خیلی ممنون
مشکل رفع شد
تا به حال این طور آموزشی رو ندیده بودم، عالی عالی هست.
omid pourmehr –
سلام
ببخشید امکان داره که دوره های html و css و js رو به صورت فایل زیپ بزارید ویدیو هاشو تا کامل دانلود کنیم؟؟؟
من امشب میخام دانلود کنم دوره ی css و js رو و واقعا سختمه تک تک دانلود کنم و تعداد ویدیو ها خیلی زیاده و دانلود تک تک ویدیو ها اذیت کنندس
بسیار سپاسگزارم اگه امشب و زودتر قرار بدید برای دانلود و منتظر پاسخگوییتونم هستم به زودی
بسیار ممنونم
Peyman Sabzizade (خریدار محصول) –
سلام خسته نباشید ببخشید یه سوال داشتم
من وقتی بخوام این دوره رو ببینم آیا بهتره که فلکس و گرید رو هم بلد باشم؟؟
یا مثلا اگر اونم بلد باشم مشکلی طی این دوره پیش نمیاد؟؟
و اینکه فرق کسی که بخواد این دوره رو ببینه که فقط html و css رو بلده و کسی که این دو تا رو با فلکس و گرید رو هم بلده چیه آیا مشکلی ایجاد میکنه یا نه برعکس بهترم میشه؟؟؟
امیر الهی (خریدار محصول) –
سلام پیمان جان ، من در چند ویدیو از فلکس و گرید استفاده کردم ، اما با این پیش فرض که دوستان عزیز ممکنه فلکس و گرید رو نشناسن ، به صورت خلاصه و در حد نیاز پروژه توضیح دادم . در حالت کلی باید بگم که خیر ، اگر فلکس و گرید رو ندیده باشید برای شرکت در این دوره مشکلی نخواهید داشت.
پیش نیاز این دوره html و css هستش که سعی کردم در این دوره با مینی پروژه های مختلف تسلطتون رو روی این دو تا حد بسیار زیادی افزایش بدم.
پس اگر فلکس و گرید رو ندیدید نگران نباشید.
Reza79 (خریدار محصول) –
سلام خدمت اقای الهی گرامی ، عیدتونم مبارک ، خاستم بابت دوره بی نظیرتون تشکری کرده باشم ، واقعا این دوره دیدگاهمو نسب به css تعقیر داد ، خلاصه هرچی بگم کم گفتم. بازم ممنون
امیر الهی (خریدار محصول) –
سلام رضاجان سال نوی شما هم مبارک . بهترین هارو براتون آرزو میکنم. بسیار خوشحالم که دوره بهتون کمک کرده 🙏🏻
mohammadbagher (خریدار محصول) –
خیلی ممنون استاد دوره عالیه
امیر الهی (خریدار محصول) –
سپاسگزارم دوست عزیزم . خوشحالم که دوره براتون مفید بوده ، موفق باشید