سال های قبل وبسایت ها رو طوری میساختیم که توی سایز صفحه نمایش لپ تاپ ها به درستی نمایش داده بشه،ولی با گذر زمان و با به وجود اومدن گوشی های هوشمند ، تبلت ها ، فبلت ها و … مشکلاتی به وجود اومد،چون ما سایت رو واسه ی سایز صفحه نمایش لپ تاپ بهینه کرده بودیم و توی اسکرین هایی با سایز کوچیکتر به صورت بهینه نمایش داده نمیشد ، پس اینجا بود که طراحی وب ریسپانسیو (واکنش گرا) به وجود اومد.
اسمش کاملا گویای همه چیز هست،طراحی وب واکنش گرا ، یعنی سایتمون رو به صورتی طراحی میکنیم که نسبت به سایز صفحه نمایش واکنش نشون بده، به این صورت سایت توی همه اسکرین ها با ابعاد مختلف به بهترین شکل ممکن نمایش داده میشه.
یادگیریش چقدر مهمه؟
موضوع رو با طرح یه سوال بررسی میکنیم:
یادگیری طراحی صفحات وب به صورت واکنش گرا مهمه؟ یه ضرورته ؟ یا اختیاریه؟
پاسخ : یادگیری طراحی وب واکنش گرا از نون شب هم واجب تره و هر طراح وبی باید به این موضوع کاملا مسلط باشه،چه بخواید به صورت فریلنسری کار کنید چه بخواید به صورت استخدامی کار کنید،یکی از مهارت های مهمی که باید بلد باشید طراحی وب واکنش گراست.
تو این دوره دقیقا چی یاد میگیریم؟
فریم ورک های معروفی مثل بوتسترپ (bootstrap) وجود داره که به ما کمک میکنن راحت تر صفحات وب واکنش گرا رو بسازیم ، اما ما توی این دوره قرار نیست بوتسترپ رو یاد بگیریم ، پس چی میخوایم یاد بگیریم؟
توی این دوره من اصول طراحی صفحات وب واکنش گرا رو به ساده ترین زبون ممکن بهتون آموزش میدم و با هم دیگه ساختار فریمورک هایی مثل بوتسترپ رو موشکافانه بررسی میکنیم.
پس از طی کردن این دوره میتونید به راحتی صفحات وب واکنش گرا رو بدون استفاده از هیچ فریم ورکی به سادگی آب خوردن طراحی کنید.
پیش نیاز بوتسترپ
بچه ها اگه دوره ی رایگان طراحی وبم رو دیده باشین،متوجه این موضوع شدین که ترتیبی که واسه انتشار ویدئو ها در نظر گرفتم جوری بوده که تمام پیش نیاز ها توی آموزش رعایت بشه تا هیچ گونه ابهامی واستون به وجود نیاد.
اگه مستقیم بریم سراغ یادگیری بوتسترپ و بقیه فریم ورک ها،شاید درک عمیقی از ساختارشون به دست نیارین، و میدونید که من توی آموزش هام به هیچ وجه نمیخوام شما چیزی رو حفظ کنید و همه چیز رو قراره عمیقا درک کنیم و یاد بگیریم.
شما توی این دوره علاوه بر یادگیری طراحی وب واکنش گرا ، با ساختار فریم ورک ها آشنا میشید و بعد از طی کردن این دوره یادگیری فریم ورک های css خیلی خیلی واستون ساده و لذت بخش میشه.
اگه از دوره راضی نبودیم چی میشه؟
قطعا میدونید که من واسه تهیه آموزش هام ، از جون و دل مایه میزارم و آموزشی رو تولید میکنم که واقعا تو سطح خیلی بالایی باشه و مشابهش رو نتونید جای دیگه پیدا کنید ، ولی بازم واسه اینکه خیالتون رو راحت تر کنم ، هر کسی دوره رو تهیه کنه و ویدئو های دوره رو ببینه و از کیفیت دوره ناراضی باشه، بدون هیچ قید و شرطی تمام مبلغی که واسه دوره پرداخت کرده بهش برگردونه میشه.
دوره پروژه محوره؟
بله صد در صد ، توی دوره چندین پروژه و مینی پروژه ی مختلف رو با هم طراحی میکنیم تا کاربرد مطالبی که یاد گرفتین رو به صورت عملی مشاهده کنید.
پروژه ها و مینی پروژه هایی که توی این دوره طراحی میشه از سطح ساده شروع میشه و رفته رفته میریم به سمت طراحی پروژه های پیچیده تر.
دوره رو تهیه کن اگه:
- اگه توی درک طراحی وب واکنش گرا مشکل داری و تسلط کامل نداری نسبت بهش.
- اگه بوتسترپ رو خواستی یاد بگیری ، ولی عمیق یاد نگرفتی و تسلط نداری به ساختار بوتسترپ.
- و اگه میخوای به ساده ترین زبون ممکن و با بالاترین کیفیت ممکن طراحی وب واکنش گرا رو یاد بگیری.
سرفصل های دوره
توی این بخش میتونید ویدئو ها رو به صورت فصل به فصل به صورت یکجا دانلود کنید
برای مشاهده لینک های دانلود اینجا کلیک کنید
سرفصل های دوره
فصل اول - آشنایی با مفاهیم پایه طراحی ریسپانسیو
طراحی ریسپانسیو چیست؟
مزیت های طراحی وب ریسپانسیو
دو اصل مهم در طراحی ریسپانسیو
ویو پورت(viewport) چیست؟
متا تگ ویو پورت (viewport meta tag)
تفاوت واحد های مطلق (absolute unit) با واحد های نسبی(relative unit)
آموزش max-width و min-width
آموزش کامل مدیا کوئری و کاربرد آن در طراحی ریسپانسیو
مدیا کوئری چیست؟
مدیا تایپ ها (media type)
مدیا فیچرها (media feature)
مدیا کوئری با min-width
مدیا کوئری با max-width
استفاده ترکیبی از max-width و min-width در مدیا کوئری
orientation در مدیا کوئری
نقطه ی شکست (breakpoint) در مدیا کوئری چیست؟
آشنایی با پیکسل (pixel) و رزولوشن (resolution)
نقاط شکست (breakpoint) استاندارد و معمول
طراحی موبایل فرست (mobile first design) چیست؟
توی این فصل به صورت کامل با سیستم شبکه بندی گرید آشنا میشیم
سیستم شبکه بندی گرید (grid system) چیست؟
نام گذاری کلاس ها در سیستم گرید
5 مفهوم اصلی در سیستم گرید (5 جز اصلی سیستم گرید)
پیاده سازی سیستم گرید (بخش اول)
پیاده سازی سیستم گرید (بخش دوم)
پیاده سازی سیستم گرید (بخش سوم )
پیاده سازی سیستم گرید (بخش چهارم)
پیاده سازی سیستم گرید (بخش پنجم)
توی این سرفصل مینی پروژه اولمون رو پیاده سازی میکنیم
برسی ساختار کلی مینی پروژه
پیاده سازی ساختار کلی مینی پروژه
پیاده سازی قسمت دوره های آموزشی و ویژگی های سایت
پیاده سازی قسمت هدر سایت
پیاده سازی قسمت فوتر سایت
توی این فصل طراحی ریسپانسیو با فلکس باکس رو یاد میگیریم
طراحی ریسپانسیو با فلکس باکس (بخش اول)
طراحی ریسپانسیو با فلکس باکس (بخش دوم)
طراحی ریسپانسیو با فلکس باکس (بخش سوم)
سیستم شبکه بندی گرید با فلکس باکس
توی این فصل یه مینی پروژه میزنیم و با فلکس باکس ریسپانسیوش میکنیم
بخش اول
بخش دوم
بخش سوم
بخش چهارم
chat_bubble_outlineنظرات
قوانین ثبت دیدگاه
- نظر واقعیت رو در مورد دوره بنویس ، تا بقیه با خوندن کامنت ها بهتر بتونن واسه شرکت توی دوره ها تصمیم بگیرن
399,000 تومان
ali mehdizadeh( دانشجوی دوره )
واقعا بلدین توضیح بدین و خیلی خفنه این
میلاد بهرامی(مدیریت)
مرسیییی از لطفتون
مهرشاد خاکی( دانشجوی دوره )
دوره که عالی
فقط اگه شد ی مینی پروژه ریسپانسیو هم با جاوااسکریپت به ویدیو ها اضافه میشد عالی تر بود که صفحه اندازه موبایل میشد ی دکمه drop down menu میشد
میلاد بهرامی(مدیریت)
سلام خدمت شما
چشم اضافه میکنم حتما و دوره رو اپدیت میکنم
Amin Abdipoor( دانشجوی دوره )
دوره فوق العادس آقای بهرامی خیلی قشنگ تدریس میکنن اصلا آدم عشق میکنه ویدیو های استاد بهرامی رو میبینه. پیشنهاد میشه حتما
میلاد بهرامی(مدیریت)
خیلیییییی ممنونم از لطف شما
Ali Tahmazi( دانشجوی دوره )
سلام
استاد من این دوره خریداری کردم
ولی لینک دانلود سر فصل نداره باید تک تک ویدیوها رو دان کنم.
ب طور مثال فصل یک 7 تا ویدیو هست باید تک تک دان کنم در حالی که دوره Js خریداری کرده بودم با کلیک رو سر فصل مثلا 2 تمام ویدیو های دوره دان میشد.
خواستم یه راهنمایی کنین که اینجوری دانلود کنم؟!!
میلاد بهرامی(مدیریت)
سلام خدمت شما ، لینک دانلود فصل به فصل رو به زودی اضافه میکنم
ramin abedini( دانشجوی دوره )
سلام استاد خسته نباشید سال نو مبارک.
بی شک بهترین دوره طراحی وب واکنش گرای فارسی زبان و همچنین دوره های دیگر تعلق میگیره به شخص شما واقعا بی نظیره از همه لحاظ عالیه، نوع تدیستون فوق العادس بهتون میبالم.
دوستانی که این دوره و دوره های دیگرو خریداری نکردند بشدددددت بهتون پیشنهاد میکنم چون هزینه ای ک بابت دوره پرداخت میکنید در قبال کیفیت دوره ها و انتقال مباحث بسیار ناچیز است.
میشه گفت با دوره های استاد دلسوزمون راه های یکساله رو بی شک یه هفته ای در مسیر طراحی وب طی میکنید.
خیلی خیلی ممنونم از تمامی زحماتتون استاد ممنونم که کنار ما هستید.
میلاد بهرامی(مدیریت)
سلام رامین عزیزم
سال نوی شما هم مبارک باشه
خیلی خیلی از شما ممنونم ، واقعا انرژی گرفتم از پیام زیباتون
آرزوی موفقیت و سربلندی دارم واسه شما
علی برنهاد( دانشجوی دوره )
فوق العاده کارتون عالیه
میلاد بهرامی(مدیریت)
خیلی ممنونم علی جان عزیزم
آرمین سلگی( دانشجوی دوره )
درود
واقعا دوره های آقای بهرامی رو پیشنهاد میکنم من خودم HTML & CSS بیشتر از پنج تا دوره دیدم ولی هیچ کدوم به خوبی آقای بهرامی براتون مباحث رو ساده بیان نمیکنه. به شدت پیشنهاد میکنم دوره هاشونو.
خسته نباشید
میلاد بهرامی(مدیریت)
خیلی ممنونم از شما ارمین جان عزیز
moradi6172( دانشجوی دوره )
سلام استاد وقتتون بخیر, بابت دوره ریسپانسیو خیلی ازتون ممنون واقعا دروه معرکه ایی هست من قبلا خیلی دوست داشتم خودم ریسپانسیو سازی رو انجام بدم ولی نمیتونستم چندتا دوره هم دیدم اماخوب نبودن با دوره شما خیلی راحت و ساده یادگرفتم و الان خیلی با شور و اشتیاق انجامش میدم
به دوستان عزیزی که مایلند که ریسپانسیو سازی رو یاد بگیرن 100% پیشنهاد میدم
ازتون ممنونم استاد امیدوارم همیشه برقرار و پیروز باشید
میلاد بهرامی(مدیریت)
خیلی ممنون از لطفتون
سلام خوبید( دانشجوی دوره )
سلام استاد خوب هستید انشاالله
دوره شش فصل یا هفت.
چون قبلاً نگاه کردم 7فصل بود
اما الان 6فصل هست
میلاد بهرامی(مدیریت)
سلام،وقتتون بخیر
دوره هفت فصل هست ، از قسمت دانلود یکجای فصل ها میتونید فصل 7 رو دانلود کنید
فاطمه خانی( دانشجوی دوره )
سلام استاد روزتون بخیر جسارتادوره ریسپانسیو من شش فصل هست نه هفت فصل چرا؟
میلاد بهرامی(مدیریت)
سلام ، وقتتون بخیر ، درسته دوره ریسپانسیو همین 6 فصل هست
محمدرضا موذنی( دانشجوی دوره )
دوره به شدت خفنی بود ، ممنونم استاد