- مدرس دوره : فرزاد معصومی ( رزومه )
- تعداد ویدیوها : 30 ویدیو
- مدت زمان دوره : 6:39:00
- سطح دوره : متوسط
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1400/02/30

آموزش ریسپانسیو سازی صفحات وب
سلام به دوره طراحی سایت ریسپانسیو در تاپلرن خوش اومدین
سایت واکنش گرا یا سایت ریسپانسیو (responsive) سایتی است که با ابعاد و رزولوشن دستگاههای مختلف سازگاری دارد و
کاربران بدون توجه به اینکه صفحه نمایش دستگاهشان کوچک باشد (مثل اکثر گوشی های هوشمند موبایل) یا نمایشگری متوسط(مثل لپ تاپ و
تبلت) و یا نمایشگرهای بزرگ (کامپیوترهای رومیزی و ال سی دی های بزرگ)داشته باشند،
میتوانند به راحتی سایت را بررسی کنند و دیگر نیازی نیست اندازه صفحه را تغییر دهند که سایت به صورت کامل دیده شود.
امروزه کاربران از نمایشگرهای مختلف در ابعاد بزرگ و کوچک برای دستیابی به صفحات اینترنت استفاده میکنند. بنابراین سایتی میتواند در فضای وب موفق باشد که بتواند به همه کاربران مراجعه کننده به سایت خدمات مناسب ارائه دهد و نمایش سایت به صورت کامل باشد .
حدود 50 درصد از کاربران از موبایل و تبلت برای مشاهده سایت ها استفاده میکنند و در صورتی که قالب سایت شما نمایش درستی در موبایل و تبلت نداشته باشد کاربران بسیاری را از دست خواهید داد. زیرا این دسته از کاربران پس از ورود به سایت شما در صورتی که نتوانند مطالب سایت شما را به راحتی مطالعه نمایند ممکن است سایت شما را بلافاصله ترک کنند و وارد سایت دیگری شوند که به درستی در دستگاه آنان نمایش داده
شود. با توجه به مورد مطرح شده وجود سایت ریسپانسیو(واکنش گرا) برای سایت ها امری لازم و ضروری میباشد.
مزایای سایت های ریسپانسیو:
-سازگاری با همه سایزهای نمایشگرهای مختلف مانند موبایل، تبلت و لپ تاپ و . . .
-نمایش مناسب سایت در طیف وسیعی از مرورگر های جدید و قدیمی
-انعطاف پذیری بالا و کارآمد
-رتبه بهتر و بالاتر در گوگل
-افزایش قدرت سئو سایت (به دلیل پوشش همه کاربران)
-افزایش بازدیدکنندگان سایت
-محبوبیت بیشتر در بین موتور های جستجو
پس بیاین یک بار برای همیشه ریسپانسیو کردن و یا همون واکنش گرایی صفحات وب رو یاد بگیریم و روی همه طراحی های خودمون پیاده سازیش کنیم
با من همراه باشید.
فهرستـــ ویدیوها
مدت زمان دوره 6:39:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
اضافه کردن viewport به پرونده html
viewport قسمتی از صفحه وب ما است که کاربر در حال تماشای آن میباشد ما در این ویدیو با آن آشنا خواهیم شد و نحوه وارد کردن آن به فایل html خود را یاد میگیریم ممنون از همراهی شما.
media query چیست و چگونه باید استفاده کنیم
یکی از ویژگی های media query به ما اجازه میدهد که با توجه به عرض صفحه نمایش بتوانیم شرط گذاری کنیم و تغییرات در استایل وب سایت به وجود آوریم در این ویدیو راجب media query و روش استفاده از آن را با یک مثال توضیح میدهیم
قالب نخست - ریسپانسیو سازی nav - بخش اول
در این ویدیو شروع به ریسپانسیو میکنیم قالب اول را دانلود کنید تا با هم بخش nav را ریسپانسیو کنیم قسمت بعدی به صورت کامل این بخش را تکمیل میکنیم.
قالب نخست - ریسپانسیو سازی nav - بخش دوم
در این ویدیو قسمت nav خود را به صورت کامل پیاده سازی میکنیم ما با استفاده از jquery و کمک گرفتن از این کتابخانه قسمت nav را به صورت انیمیشن پیاده خواهیم کرد.
قالب نخست - ریسپانسیو سازی کامل هدر
در این قسمت میایم و بخش هدر خودمون رو کامل ریسپانسیو میکنیم و بخش هدر که nav هم بخشی از اون بود رو به پایان میرسونیم
قالب نخست - ریسپانسیو سازی بخش our-story
در این ویدیو میریم سراغ دومین سکشن از قالب خودمون سکشن our-story رو در این ویدیو به صورت کامل ریسپانسیو میکنیم پس بیاین با هم شروع کنیم.
قالب نخست - ریسپانسیو سازی بخش sweet
ما در این قسمت سکشن sweet رو ریسپانسیو میکنیم البته قبل از اون ایرادی در قالب رو برطرف میکنیم که قالب کاملا بدون مشکل باشه, پس بیاین شروع کنیم.
قالب نخست - ریسپانسیو سازی بخش menu
توی این ویدیو میریم و بخش بعدی رو ریسپانسیو میکنیم , یعنی بخش menu پس بیاین و شروع کنیم
قالب نخست - ریسپانسیو سازی بخش hot
در این ویدیو بخش بعدی که hot هست رو ریسپانسیو میکنیم و کم کم داریم به تموم کردن کار ریسپانسیو این تم میرسیم
قالب نخست - ریسپانسیو سازی بخش delight
خب بریم سراغ یکی از آخرین بخش های این قالب یعنی بخش delight , چیز سختی نیست پس بیاین تمومش کنیم
قالب نخست - ریسپانسیو سازی بخش footer
خب در این ویدیو ما قالب اول خودمون رو با ریسپانسیو سازی بخش فوتر به پایان میرسونیم بیاین با هم تمومش کنیم
قالب دوم - ریسپانسیو سازی nav - بخش اول
خب از این قسمت شروع به ریسپانسیو کردن قالب دوم میپردازیم بیشترین زمان رو همین nav خواهد برد البته بستگی داره بخوایم چیکار کنیم روی اون اما در این قالب مدت زمان بیشتری رو روی nav میزاریم تا زیباتر از قالب قبل ما بشه پس با من همراه باشید.
قالب دوم - ریسپانسیو سازی nav - بخش دوم
خب ما در این ویدیو قسمت nav خودمون رو بیشتر جلو میبریم و در ویدیو بعد این قسمت رو تموم میکنیم
قالب دوم - ریسپانسیو سازی nav - بخش سوم
خب خب خب در این قسمت بالاخره nav رو تموم میکنیم و با خیال راحت میریم سراغ قسمت ها بعدی پس بیاین تمومش کنیم
قالب دوم - ریسپانسیو سازی big section
در این ویدیو میریم و big section رو ریسپانسیو میکنیم
قالب دوم - ریسپانسیو سازی newsletter و toplearn
خب دوستان ما در این قسمت میایم و دو بخش از قالب رو به هم ریسپانسیو میکنیم
قالب دوم - ریسپانسیو سازی team و teams
خب ما در این ویدیو 2 بخش رو به صورت کامل ریسپانسیو میکنیم پس با من همراه باشید
قالب دوم - ریسپانسیو سازی footer - پایان فصل اول
خب توی این ویدیو footer خودمون رو ریسپانسیو میکنیم و فصل اول این دوره اینجا به پایان میرسه
نظرات کاربران در رابطه با این دوره
ali234kha
ارسال شده در 1403/11/15سلام بر استاد معصومی گرامی
جالبه که این دوره رو چت جی پی تی بهم پیشنهاد داد و بسیار راضی ام از پیشنهادش
koariyann
ارسال شده در 1403/08/09سلام
چجوری فارسی رو وی اس کدتون اینقدر قشنگ نشون میده
فرزاد معصومی (مدرس)
ارسال شده در 1403/11/16سلام
ببخشید سوال رو ندیده بودم
فونت وی اس کد رو تغییر بدین
احمد سیفی
ارسال شده در 1403/07/17سلام استاد عزیز ، ای کاش زودتر با شما و دوره هاتون آشنا می شدم ، دستتون درد نکنه که دانش با ارزشتون رو به ما انتقال می دید❤️💕
jahanrayanecaspian
ارسال شده در 1402/11/19درود فراوان به استاد عزیز و همه دست اندرکاران این سایت.
زحمات شما بی نهایت جای تشکر و قدر دانی داره. ازینکه این دوره رو رایگان در اختیار عموم قرار دادید بی نهایت سپاسگزارم.
کلام شیوای استاد و مسلط بودن بر کد نویسی عالیه.
music768music768
ارسال شده در 1401/11/14خیلی خوبه ولی وقتی دارم ویدیو رو تماشا میکنم یه جاهاییش تصویر تار میشه ویه چند دقیقه این تاری باقی میمونه
فرزاد معصومی (مدرس)
ارسال شده در 1401/11/15سلام
احتمالا دارید آنلاین تماشا میکنید و بخاطر سرعت اینترنتتون مشکل به وجود میاد
علی رضا
ارسال شده در 1401/05/03سلام
استاد ببخشید پیشنیاز این دوره چیه؟
Flex و grid هم آموزش میدین در این دوره؟
اصغر رئوفی
ارسال شده در 1401/03/07سلام به عنوان کسی که تا حالا سه چهار بسته مختلف بوت استرپ فلکس طراحی سایت و........ با هزینه های بالا خریداری کردم میگم این بسته واقعا بهترین هستش شاید چون قیمت نخورده هیچ کس جدیش نمیگیره ولی عالی هستش ممنون از لطفتون
a.kiumarsi.ir
ارسال شده در 1401/01/31خیلی عالی
4lirez4
ارسال شده در 1400/12/02جناب آقای فرزاد معصومی
با سلام
استاد عزیز ممنونم از اطلاعات دقیق و کاربردی شما و اینکه اینها رو بصورت رایگان در اختیار ما قرار دادید.
ممنون میشم اگر بفرمایید دوره طراحی سایت اگر بصورت حضوری دارید که ما بتونیم از بیان روان شما استفاده کنیم.
اگر هم بوت کمپ دارید بفرمایید.
با سپاس
فرزاد معصومی (مدرس)
ارسال شده در 1400/12/04سلام دوست من
ممنون از شما و نظرتون خوشحالم دوره مورد پسندتون بودن و تونسته بهتون کمک کنه
متاسفانه بنده تهران نیستم و امکان برگزاری دوره حضوری ندارم
اما دوره طراحی در تاپ لرن موجوده
موفق باشید.
mhemamirazavi
ارسال شده در 1400/10/13سلام و خسته نباشید به مدرس این دوره بسیار مفید و کاربردی من خیلی وقت هست که دنبال یک منبع خوب برای یاد گیری و درک مبحث ریسپانسیو هستم که امروز با دیدن این دوره شگفت زده شدم واقعاً برای این دوره از آقای فرزاد معصومی متشکرم که تجربه و علم خودشون رو با دیگران به اشتراک میزارن
محمدصدرا گنجعلی
ارسال شده در 1400/10/24سلام شما این دوره را تمام کردید؟
فرزاد معصومی (مدرس)
ارسال شده در 1400/11/16سلام دوست من
ممنون از شما و نظرتون خوشحالم دوره مورد پسندتون بوده و تونسته بهتون کمک کنه
در ادامه مسیر موفق باشید.
فرزاد معصومی (مدرس)
ارسال شده در 1400/12/04سلام دوست خوبم
ممنون از شما و نظرتون خوشحالم دوره تونسته بهتون کمک کنه و رضایت شما رو جلب کرده
امیدوارم در ادامه مسیر موفق باشید.