×
ribbon

آموزش رایگان Responsive Layout پروژه محور

طراحی واکنش‌گرا یا ریسپانسیو یک روش طراحی رابط کاربر گرافیکی (GUI) است که باعث می‌شود سایت ما در دستگاه‌های مختلف به خوبی نمایش داده شود. در این روش طراحان سایز عناصر را با واحدهای نسبی ... ادامه

ارائه دهنده:  وب ‌پروگ  وب ‌پروگ
مدرس دوره:
4.6 (15 رای)
 رایگان
  
زمان مورد نیاز برای گذارندن دوره:  6 جلسه
مجموع محتوای آموزشی:  1:12 ساعت ویدئو
 (قابل دانلود می‌باشد)

پیش‌نیاز‌ها

سرفصل‌های دوره آموزش رایگان Responsive Layout پروژه محور

فصل اول : آشنایی با Media Query

در این فصل به بررسی کامل طراحی واکنش‌گرا Responsive می‌پردازیم و انواع طراحی‌ها را به شما آموزش می‌دهیم. مدیا کوئری‌ها که در CSS3 معرفی شده‌اند، از مهم‌ترین تکنیک‌های CSS محسوب می‌شوند. به‌عنوان‌مثال با استفاده از این تکنیک می‌تواند عناصر را طوری طراحی کنید که در صفحات کوچک‌تر هم با نظم و ترتیب خاصی چیده شوند.

  Responsive یا واکنش‌گرا چیست؟
"06:10  
  Media Queries
"19:12  
فصل دوم : واحد‌ها در Responsive

واحدهای نسبی یا relative units به شما کمک می‌کنند که کامپوننت‌های مستقلی بسازید که به راحتی ویرایش شوند. واحدهای EM و REM از جمله این واحدهاست که برای font-size استفاده می‌شود. در جلسه اول این فصل به بررسی این واحدها و چگونگی کار با آن‌ها می‌پردازیم. همچنین شما می‌توانید برای متناسب کردن عرض و ارتفاع عناصر با صفحه نمایش‌های مختلف، از واحدهای نسبی vh & vw استفاده کنید. در این فصل استفاده از این واحدها را به شما آموزش می‌دهیم.

  واحد‌های Em و Rem
"16:25  
  واحدهای vh و vw
"07:48  
فصل سوم : پروژه Responsive

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

  پروژه Responsive - بخش اول
"12:54  
  پروژه Responsive - بخش دوم
"10:01  

درباره دوره

طراحی واکنش‌گرا یا ریسپانسیو یک روش طراحی رابط کاربر گرافیکی (GUI) است که باعث می‌شود سایت ما در دستگاه‌های مختلف به خوبی نمایش داده شود. در این روش طراحان سایز عناصر را با واحدهای نسبی یا درصدی تعیین می‌کنند. بدین ترتیب عناصر سایت می‌توانند متناسب با فضای مرورگر ظاهر شوند و با دستگاه سازگار باشند.

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

در این دوره به آموزش اصول طراحی قالب واکنش‌گرا Responsive می‌پردازیم. در ابتدا خوب است بدانید که چگونه می‌توانیم سایتمان را ریسپانسیو کنیم و این کار چه تأثیری در سئو خواهد داشت. همچنین آموزش طراحی واکنش‌گرا با CSS را به شما ارائه می‌دهیم؛ بنابراین اگر به فراگیری آموزش طراحی قالب رسپانسیو علاقه دارید، با مکتب‌خونه همراه باشید.

دوره آموزش رایگان Responsive Layout پروژه محور مناسب چه کسانی است؟

  • کسانی که به آموزش طراحی وب واکنش‌گرا علاقه‌مندند.
  • کسانی که به بهبود ظاهر سایت خود اهمیت می‌دهند.
  • صاحبان کسب‌وکاری که مشتریان آن‌ها از انواع دستگاه‌ها وارد سایت می‌شوند.
  • کسانی که با HTML & CSS مسلط هستند و می‌خواهند مهارت خود را ارتقا دهند.

بعد از فراگیری دوره آموزش رایگان Responsive Layout پروژه محور چه مهارت‌هایی کسب خواهید کرد؟

  • طراحی قالب‌های Responsive یا واکنش‌گرا برای سایت
  • آشنایی با Media Queries
  • آشنایی با واحدهای مختلف در Responsive
  • پیاده‌سازی عملی یک سایت با قالب واکنش‌گرا

پیش‌نیازها و منابع مکمل برای فراگیری دوره آموزش رایگان طراحی قالب واکنش گرا چیست؟

برای اینکه بتوانید از دوره آموزش طراحی وب واکنش‌گرا به‌خوبی استفاده کنید باید به HTML و CSS مسلط باشید. چراکه طراحی سایتی که قرار است آن را واکنش‌گرا کنیم با این دو زبان برنامه‌نویسی نوشته شده‌است؛ بنابراین توصیه می‌کنیم قبل از شروع این دوره، دوره زیر را بگذرانید:

اگر قصد دارید مهارت‌های خود را در طراحی وب سایت توسعه دهید، آموزش‌های زیر را به‌عنوان مکمل این دوره به شما پیشنهاد می‌دهیم:

  • آموزش رایگان Emmet
  • آموزش رایگان FlexBox پروژه محور
  • آموزش رایگان Grid Layout پروژه محور
  • آموزش Javascript
  • آموزش CSS Trantistion ,Transform ,Animation
  • آموزش رایگان Bootstrap ۴ پروژه محور
  • آموزش Bootstrap ۴ در دنیای واقعی

درباره استاد

maktabkhooneh-teacher علی شیخ

علی شیخ در سال ۱۳۹۴ در رشته مهندسی کامپیوتر فارغ‌التحصیل شد و به عنوان برنامه‌نویس وب در شرکت معدنی و صنعتی چادرملو شروع به کار کرد. تخصص اصلی ایشان در زبان‌های جاوا اسکریپت و php است. وی به دلیل این که به آموزش علاقه زیادی داشت، تصمیم به راه‌اندازی وب‌سایتی در این زمینه به نام وب پروگ گرفت و اکنون از سال 1398 تاکنون توانسته‌است سهم کوچکی در آموزش به افراد علاقه‌مند به برنامه‌نویسی را داشته باشد.

مشاهده پروفایل و دوره‌‌های استاد

نظرات کاربران  ( نظر)

صفحه 1 از
1402-09-23
بسیارعالی ممنونم
امید حسن پور 1402-05-11
دوره خوبی بود ممنون از شما
مهدی فرهمند 1402-03-20
دوره خوبی بود👌
امیرعلی خدادادی 1402-01-20
زمانی که نسبت به حجم محتواتون در نظر گرفتین خیلی خوب و مناسبه 👍
مصطفی رشتی 1401-06-01
با سلام و خسته نباشید واقعا ممنون و متشکر هستم از اقای شیخ گه مطالب لازم در این مورد رو به خوبی در این دوره بیان کزدن ، منکه استفاده کردم . موفق و پیروز باشید روش تدریستون خیلی خوبه اقای شیخ
1400-09-01
عالی فقط فایل developer رو پیدا نکردم
رضا سلطانی 1400-07-12
دوره بسیار خوبی بود.
نرگس غلامی 1401-08-16
دوره خوبی بود متشکرم
وحید رمضان زاده 1401-02-29
بسیار عالی و کاربردی بود ممنونم فایل پروژه موجود نبود متاسفانه
مکتب‌خونه
همراه عزیز؛ در صورت وجود و ارائه فایل مورد نیاز توسط استاد، در دوره بارگذاری شده است در غیر این صورت فایلی ارائه نشده است.
مهرنوش جهان پور 1402-09-19
سلام استاد در جلسه 5 ذکر کردن که فایلی در دوره html , css مقدماتی قرار دادیم وبعدش گفتن اگر فایل رو خواستید به من پیام بدید نه دوره ای بااین اسم موجودهو نه راهی برای ارتباط و دریافت فایل

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

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

آیا ممکن است که درسی ناقص ضبط شده باشد؟
ما همواره تلاش کرده­‌ایم که دروس را به طور کامل ضبط نماییم و در اختیار شما دوستان قرار دهیم. اما گاهی برخی ناهماهنگی ها سبب می شود که یک یا تعدادی از جلسات یک درس ضبط نشود. توضیح این گونه نواقص در توضیح درس­ ها آمده است.

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

اگر لینک دانلود یا پخش ویدئو مشکل داشت چه باید کرد؟
در صورتی که با هر گونه مشکلی رو به رو شدید می توانید از طریق صفحه ارتباط با ما به ما اطلاع دهید تا ما سریعا مشکل را پیگیری و برطرف نماییم.

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

آیا امکان دریافت فیلم های یک درس به صورت سی دی یا دی وی دی وجود دارد؟
در حال حاضر امکان ارسال دروس به صورت سی دی یا دی وی دی وجود ندارد.
  • سرفصل‌های دوره آموزش رایگان Responsive Layout پروژه محور

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

صفحات پربازدید
poster
  
برگزار کننده:  وب ‌پروگ
  
زمان مورد نیاز برای گذارندن دوره:  6 جلسه
مجموع محتوای آموزشی:  1:12 ساعت ویدئو
 (قابل دانلود می‌باشد)