00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
ثبت‌نام رایگان
  • دسترسی به کل جلسات ویدیویی از دوره
  • دسترسی به کل جلسات ویدیویی از دوره
  • اضافه شدن دوره به پروفایل
00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD

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

دوره‌های رایگان
6 جلسه

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

طراحی واکنش‌گرا یا ریسپانسیو یک روش طراحی رابط کاربر گرافیکی (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 ۴ در دنیای واقعی

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

فصل اول : آشنایی با Media Query
00:25 ساعت
00:25
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

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

Responsive یا واکنش‌گرا چیست؟
"06:10
Media Queries
"19:12
فصل دوم : واحد‌ها در Responsive
00:24 ساعت
00:24
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

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

واحد‌های Em و Rem
"16:25
واحدهای vh و vw
"07:48
فصل سوم : پروژه Responsive
00:22 ساعت
00:22
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

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

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

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

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

آموزش HTML و CSS
اطلاعات بیشتر

نظرات 

تا کنون نظری برای این دوره ثبت نشده است. برای ثبت نظر باید ابتدا در دوره ثبت نام کرده و دانشجوی دوره باشید.

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

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

اطلاعات بیشتر

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

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

×

ثبت نظر

به این دوره از ۱ تا ۵ چه امتیازی می‌دهید؟

فصل اول : آشنایی با Media Query
00:25 ساعت
00:25
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

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

Responsive یا واکنش‌گرا چیست؟
"06:10
Media Queries
"19:12
فصل دوم : واحد‌ها در Responsive
00:24 ساعت
00:24
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

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

واحد‌های Em و Rem
"16:25
واحدهای vh و vw
"07:48
فصل سوم : پروژه Responsive
00:22 ساعت
00:22
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

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

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