
آموزش طراحی قالب ریسپانسیو
مدرس : محمد حسین موسوی
مدرس : محمد حسین موسوی
قیمت آموزش : ۴۹ هزار تومان
همین الان یادگیری را آغاز کنید !
همراه لرن فایلز باشید با آموزش طراحی قالب ریسپانسیو!
طراحی ریسپانسیو (Responsive) یکی از امتیازات و الزامات یک وب سایت است! واکنشگرا بودن یا ریسپانسیو بودن یک وب سایت به این معناست که بعد از طراحی و پیاده سازی یک قالب ریسپانسیو، کاربر سایت شما می تواند سایت را بدون مشکل، مرتب و با دسترسی مناسب به اجزای مختلف سایت روی تمامی وسایل با اندازه های مختلف مانند تبلت و موبایل و لپ تاپ و … مشاهده کند.
پس از انتشار دوره ۰ تا ۱۰۰ آموزش بوت استرپ ۴ حالا تصمیم گرفتیم در قالب یک پروژه کامل و جذاب به آموزش طراحی واکنشگرا بپردازیم و ریسپانسیو کردن سایت را به صورت کامل و قدم به قدم آموزش دهیم. با آموزش پروژه محور طراحی وب سایت واکنشگرا همراه لرن فایلز باشید.
این روز ها اگر وب سایت شما تنها در یک سایز مشخص مثلاً PC یا لپ تاپ به درستی نمایش داده شود و در سایر سایز ها مشکل داشته باشد، شما متحمل ضرر های زیادی خواهید شد از کاهش رضایت کاربر و حتی سئو وب سایت گرفته تا کاهش زمان حضور مخاطب در وب سایت شما و نهایتاً کاهش میزان فروش!
بازدید کنندگان با تبلت و گوشی های لمسی به وب سایت شما مراجعه می کنند و اینجاست که قالب ریسپانسیو به معنای پاسخ گرا یا واکنشگرا معنا پیدا می کند. به عبارتی طراحی وب سایت Responsive به شیوه ای می باشد که در اندازه های مختلف و دستگاه های متفاوت سایت به درستی نمایش داده می شود. طراحی سایت به شکلی که در هر اندازه صفحه قابل استفاده باشد اصطلاحا طراحی واکنش گرا یا Responsive web design نامیده میشود.
مشخصات آموزش:
🢇 دوره ویدئویی آموزش طراحی قالب ریسپانسیو
🠷 از مقدماتی تا پیشرفته
🎧 زبان فارسی: آموزش طراحی قالب ریسپانسیو به زبان فارسی بوده و شامل ۲۳ ویدئوی فارسی زبان است.
🏆 ویژه ورود به بازار کار: این آموزش به صورت ویژه جهت ورود به بازارکار و کسب درآمد تدریس شده است!
🕗 آموزش با زمان مفید و کاربردی:
مدت زمان این آموزش با حفظ جامعیت و پوشش تمامی مباحث با کمک گرفتن از متد های بروز در زمینه تدریس و آموزش ویدئویی، به گونه ای تنظیم شده است که شما با کم ترین زمان بیشترین میزان یادگیری را داشته باشید! آموزش طراحی ریسپانسیو در حالی که مطالب بیشتری را پوشش داده و نسبت به سایر آموزش ها جامع تر است، مدت زمان آن به نسبت آموزش های مشابه ⣿ یک سوم ⣿ است یعنی اکثر دوره های موجود در سطح وب همین محتوا را در زمانی معادل ۳ برابر این دوره تدریس می کنند که این موضوع باعث اتلاف وقت زیادی در یادگیری شما خواهد شد! لذا مدت زمان این دوره فوق العاده مفید بوده و در کمترین زمان بیشترین مباحث را می آموزید!
💎 آپدیت مداوم: دوره آموزش طراحی Responsive به صورت مداوم و به درخواست شما کاربران عزیز آپدیت می شود!
✔️ پشتیبانی ۳۶۰ درجه: مدرس دوره آموزش طراحی ریسپانسیو ، آقای محمد حسین موسوی عزیز، در تمام مراحل همراه شماست و می توانید سوالات خود را در همین صفحه از ایشان بپرسید!
راهنمای دریافت آموزش ریسپانسیو سازی قالب:
برای دانلود آموزش طراحی قالب ریسپانسیو و دریافت این دوره از بالا-ستون سمت چپ، جهت خرید اقدام کنید.
سرفصل های آموزش طراحی قالب ریسپانسیو:
سرفصل ها کلی بوده و بسیاری از موارد ذکر نشده است و ممکن است هر بخش شامل چندین ویدئو زیر مجموعه باشد.
مقدمه، معرفی مدرس و دوره آموزش طراحی قالب ریسپانسیو
آشنایی با مفاهیم اولیه
آشنایی با متا تگ viewport و تاثیر آن بر طراحی ریسپانسیو
شروع پیاده سازی قالب برای آشنایی بیشتر با مفاهیم طراحی ریسپانسیو
معرفی انواع Media query ها و آموزش ریسپانسیو با مدیا کوئری
نحوه استفاده از چند CSS مجزا برای سایزهای مختلف صفحه نمایش با Media attribute
آشنایی با مفهوم Mobile first و تفاوت آن با Desktop first
ویدئو های ما به صورت اختصاصی توسط مدرسین آکادمی لرن فایلز تهیه شده است .
ویدئو ها توسط واحد کنترل کیفیت ما بررسی و سطح علمی ، صدا و تصویر ، شیوه بیان و سایر موارد آن تایید می شود .
ویدئو های ما تئوری محض نیستند و در حد نیاز مباحث تئوری مطرح و باقی آموزش عملی و ویژه بازار کار می باشد .
قربانی (مالک تایید شده) –
سلام عذر میخوام دانلوداموزش انجام دادم ولی باز نمیشه میشه لطفا راهنمایی کنید
واحد پشتیبانی لرن فایلز –
سلام و عرض ادب
شما تمامیه پارت های مربوط به دوره رو از پنلتون دانلود کنید و همه را باهم انتخاب و سپس اکسترکت فایل رو بزنید ، فایل نهایی کامل در اختیار شما قرار خواهد گرفت
موفق باشید
محمدرضا –
سلام
وقت بخیر
من برای طراحی وب واکنش گرا به جای Bootstrap از همان Html و CSS خام (view port, media query) استفاده می کنم.
حالا شرکتی که براش به صورت پروژه ای کار میکنم از من میخواد که برای طراحی قالب ها از Bootstrap استفاده کنم.
حالا سوالم اینه که آیا لازم هست این کار را انجام بدم یا خیر؟ یعنی بدون Bootstrap نمیشه؟
مدرس – سید محمد حسین موسوی –
سلام
وقت شما هم به خیر
اول باید توجه داشته باشید که فریم ورک بوت استرپ فقط برای ریسپانسیو کردن نیست و قابلیت های زیاد دیگه ای هم داره که می تونید برای اطلاعات بیشتر به اینجا رجوع کنید:
اساسا فریم ورک مجموعه ای از کدهاست که باعث می شه سرعت توسعه کدنویسی شما بره بالاو ویژگی هایی مثل بالا بردن کیفیت کدها و کم شدن خطاهای احتمالی، یکسان سازی کدها بین برنامه نویسان و … رو هم داره
البته اینطوری هم نیست که اگر بوت استرپ رو یاد گرفتید و ازش استفاده کردید دیگه بی نیاز از دانش فعلیتون بشید. قطعا خیلی جاها پیش می یاد که لازمه شما بخش هایی رو خودتون ریسپانسیو یا آموزش بوت استرپ ۴ (Bootstrap 4) مشاهده کنید و دانش فعلیتون اونجا کاربرد پیدا می کنه. بطور کلی اصلا نمی شه یه پروژه رو فقط و فقط با بوت استرپ پیش برد و جاهایی نیازه می شه که خودتون استایل بنویسید
پیشنهاد بنده اینه که حتما بوت استرپ رو یاد بگیر و تو پروژه ات استفاده کن. شاید برای بار اول کمی زمان ازت بگیره ولی برای کارهای بعدی سرعتت رو افزایش می ده
کوثرماه آور (مالک تایید شده) –
سلام و خسته نباشید
ممنونم از آموزش خوبتون.
من پروژه رو تا یک جایی انجام دادم و به مشکل برخوردم. الان من سایز صفحه رو که از ۱۲۰۰ کمتر می کنم تغییرات اعمال میشه ولی content-container فاصله ش با کناره ها خیلی زیاد میشه.نمیدونم مشکل از کجاست ممنون میشم راهنمایی کنید.
سورس پروژه رو براتون از طریق پروفایلم ارسال میکنم.
مدرس – سید محمد حسین موسوی –
سلام
داخل css ها خط ۱۷۳ این کد اشتباهه:
width: calc(75% – 20%);
درستش اینه:
width: calc(75% – 20px);
کوثرماه آور (مالک تایید شده) –
سلام ممنونم
نیما برات پور (مالک تایید شده) –
سلام استاد با تشکر بابت اموزش خوبتون فقط اینکه الان من یه پروژه دارم کار میکنم که دارای حداقل ۱۰ صفحه هستش حالا با این پروژه ای که شما گفتین و اموزشی که دادین یه کم سخته ریسپانسیو کردنش شما راهکاری واسه این مشکل بنده دارین واینکه شما تو هر media ای که مینوشتین این درصد برای width هارو من متوجه نشدم میشه در مورد اونم یه کم توضیح بدین
با تشکر
مدرس – سید محمد حسین موسوی –
سلام
در مورد سوال اولتون باید بگم که طبیعتا وقتی شما ده تا صفحه دارید، حجم کارتون بیشتر از یه صفحه است. به این معنی که مشخصا برای هر صفحه ای که کدنویسی می کنید باید کدهای مربوط به بخش ریسپانیسوش رو هم بنویسید
البته بعد از گذشت زمان که تجربتون بیشتر شد، سرعت و کیفیت کارتون هم بهتر می شه. البته بعدا با فریم ورک هایی مثل بوت استرپ آشنا می شید که سرعت توسعه رو بشدت بالا می بره و خیلی از این موارد رو هم پوشش می ده. هرچند که بازهم با وجود بوت استرپ لازمه بخش هایی رو خودتون ریسپانیسو کنید
در مورد سوال دومتون هم درصد جایی به کار می ره که شما لازم داریم بخش هایی رو داشته باشیم که با کوچیک یا بزرگ شدن صفحه، اونها هم تغییر سایز بدن و چون از درصد استفاده کردید نسبت بزرگ یا کوچیک شدن المنت های صفحه تون یه اندازه است.
مثلا فرض کنید یه همچین کدی html ای داریم:
و همینطور این استایل ها رو نوشتیم:
.sidebar-container{
width: 25%;
}
.content-container{
width: 75%;
}
حالا اگر عرض main-container ما بشه ۲۰۰ پیکسل عرض sidebar-container می شه ۵۰ پیکسل و عرض content-container می شه ۱۵۰ پیکسل
فرقی نمی کنه عرض main-container ما چقدر باشه. همیشه عرض content-container ما سه برابر sidebar-container خواهد بود
مصطفی درفشی –
سلام سوالی داشتم این دوره با بوت استراپ هستش یا خیر ؟
واحد پشتیبانی لرن فایلز –
سلام و عرض ادب
خیر css هست .
برای دوره بوت استرپ می تونید به لینک زیر مراجعه کنید:
آموزش بوت استرپ ۴ (Bootstrap 4)
موفق وپیروز باشید