جستجو برای:
  • صفحه نخست
  • دوره ها
    • دوره ریکت
    • دوره جاوا اسکریپت
    • دوره بوت استرپ
    • دوره طراحی وب ریسپانسیو
  • تماس با ما
 
نکست وان کد ، آموزش برنامه نویسی و طراحی وب
  • صفحه نخست
  • دوره ها
    • دوره ریکت
    • دوره جاوا اسکریپت
    • دوره بوت استرپ
    • دوره طراحی وب ریسپانسیو
  • تماس با ما
0
ورود

طراحی وب ریسپانسیو بدون فریم ورک

خانهطراحی سایتطراحی وب ریسپانسیو بدون فریم ورک
حالت مطالعه

سال های قبل وبسایت ها رو طوری میساختیم که توی سایز صفحه نمایش لپ تاپ ها به درستی نمایش داده بشه،ولی با گذر زمان و با به وجود اومدن گوشی های هوشمند ، تبلت ها ، فبلت ها و … مشکلاتی به وجود اومد،چون ما سایت رو واسه ی سایز صفحه نمایش لپ تاپ بهینه کرده بودیم و توی اسکرین هایی با سایز کوچیکتر به صورت بهینه نمایش داده نمیشد ، پس اینجا بود که طراحی وب ریسپانسیو (واکنش گرا) به وجود اومد.

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

یادگیریش چقدر مهمه؟

موضوع رو با طرح یه سوال بررسی میکنیم:

یادگیری طراحی صفحات وب به صورت واکنش گرا مهمه؟ یه ضرورته ؟ یا اختیاریه؟

پاسخ : یادگیری طراحی وب واکنش گرا از نون شب هم واجب تره و هر طراح وبی باید به این موضوع کاملا مسلط باشه،چه بخواید به صورت فریلنسری کار کنید چه بخواید به صورت استخدامی کار کنید،یکی از مهارت های مهمی که باید بلد باشید طراحی وب واکنش گراست.

تو این دوره دقیقا چی یاد میگیریم؟

فریم ورک های معروفی مثل بوتسترپ (bootstrap) وجود داره که به ما کمک میکنن راحت تر صفحات وب واکنش گرا رو بسازیم ، اما ما توی این دوره قرار نیست بوتسترپ رو یاد بگیریم ، پس چی میخوایم یاد بگیریم؟

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

پس از طی کردن این دوره میتونید به راحتی صفحات وب واکنش گرا رو بدون استفاده از هیچ فریم ورکی به سادگی آب خوردن طراحی کنید.

پیش نیاز بوتسترپ

بچه ها اگه دوره ی رایگان طراحی وبم رو دیده باشین،متوجه این موضوع شدین که ترتیبی که واسه انتشار ویدئو ها در نظر گرفتم جوری بوده که تمام پیش نیاز ها توی آموزش رعایت بشه تا هیچ گونه ابهامی واستون به وجود نیاد.

اگه مستقیم بریم سراغ یادگیری بوتسترپ و بقیه فریم ورک ها،شاید درک عمیقی از ساختارشون به دست نیارین، و میدونید که من توی آموزش هام به هیچ وجه نمیخوام شما چیزی رو حفظ کنید و همه چیز رو قراره عمیقا درک کنیم و یاد بگیریم.

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

اگه از دوره راضی نبودیم چی میشه؟

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

دوره پروژه محوره؟

بله صد در صد ، توی دوره چندین پروژه و مینی پروژه ی مختلف رو با هم طراحی میکنیم تا کاربرد مطالبی که یاد گرفتین رو به صورت عملی مشاهده کنید.

پروژه ها و مینی پروژه هایی که توی این دوره طراحی میشه از سطح ساده شروع میشه و رفته رفته میریم به سمت طراحی پروژه های پیچیده تر.

دوره رو تهیه کن اگه:

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

سرفصل های دوره

دانلود فصل به فصل ویدئو ها

توی این بخش میتونید ویدئو ها رو به صورت فصل به فصل به صورت یکجا دانلود کنید

برای مشاهده لینک های دانلود اینجا کلیک کنید

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.




سرفصل های دوره

فصل اول - مفاهیم پایه طراحی ریسپانسیو

فصل اول - آشنایی با مفاهیم پایه طراحی ریسپانسیو

طراحی ریسپانسیو چیست؟

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

مزیت های طراحی وب ریسپانسیو

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

دو اصل مهم در طراحی ریسپانسیو

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

ویو پورت(viewport) چیست؟

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

متا تگ ویو پورت (viewport meta tag)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

تفاوت واحد های مطلق (absolute unit) با واحد های نسبی(relative unit)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

آموزش max-width و min-width

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.
فصل دوم - مدیا کوئری (Media Querie)

آموزش کامل مدیا کوئری و کاربرد آن در طراحی ریسپانسیو

مدیا کوئری چیست؟

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

مدیا تایپ ها (media type)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

مدیا فیچرها (media feature)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

مدیا کوئری با min-width

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

مدیا کوئری با max-width

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

استفاده ترکیبی از max-width و min-width در مدیا کوئری

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

orientation در مدیا کوئری

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

نقطه ی شکست (breakpoint) در مدیا کوئری چیست؟

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

آشنایی با پیکسل (pixel) و رزولوشن (resolution)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

نقاط شکست (breakpoint) استاندارد و معمول

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

طراحی موبایل فرست (mobile first design) چیست؟

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.
فصل سوم - سیستم شبکه بندی گرید (grid system)

توی این فصل به صورت کامل با سیستم شبکه بندی گرید آشنا میشیم

سیستم شبکه بندی گرید (grid system) چیست؟

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

نام گذاری کلاس ها در سیستم گرید

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

5 مفهوم اصلی در سیستم گرید (5 جز اصلی سیستم گرید)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی سیستم گرید (بخش اول)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی سیستم گرید (بخش دوم)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی سیستم گرید (بخش سوم )

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی سیستم گرید (بخش چهارم)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی سیستم گرید (بخش پنجم)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.
فصل چهارم - مینی پروژه اول

توی این سرفصل مینی پروژه اولمون رو پیاده سازی میکنیم

برسی ساختار کلی مینی پروژه

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی ساختار کلی مینی پروژه

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی قسمت دوره های آموزشی و ویژگی های سایت

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی قسمت هدر سایت

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

پیاده سازی قسمت فوتر سایت

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.
فصل پنجم - طراحی ریسپانسیو با flexbox

توی این فصل طراحی ریسپانسیو با فلکس باکس رو یاد میگیریم

طراحی ریسپانسیو با فلکس باکس (بخش اول)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

طراحی ریسپانسیو با فلکس باکس (بخش دوم)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

طراحی ریسپانسیو با فلکس باکس (بخش سوم)

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

سیستم شبکه بندی گرید با فلکس باکس

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.
فصل ششم - مینی پروژه دوم

توی این فصل یه مینی پروژه میزنیم و با فلکس باکس ریسپانسیوش میکنیم

بخش اول

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

بخش دوم

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

بخش سوم

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

بخش چهارم

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.
برچسب: آموزش طراحی responsive آموزش طراحی وب ریسپانسیو ریسپانسیو طراحی responsive طراحی ریسپانسیو

chat_bubble_outlineنظرات

  • A H( دانشجوی دوره )
    26 نوامبر 2022
    امتیاز 3 از 5
    پاسخ

    درود خسته نباشید.
    من دوره های html-css ، css animation و flexbox شما رو دیدم و واقعا فوق العاده بودن.
    2 فصل اول این دوره هم عالی بود
    ولی واقعیتش حس میکنم از فصل سوم به بعدش روشش قدیمی باشه ، من فکر میکردم که اون بخش css grid باشه ولی نبود
    همچنین آموزش واحد هایی به غیر از پیکسل و درصد …
    امیدوارم اگر بعدا خواستید دروه رو آپدیت کنید ، گرید رو تدریس کنید.

    • میلاد بهرامی(مدیریت)
      27 نوامبر 2022
      پاسخ

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

  • Alireza Xanejfi( دانشجوی دوره )
    2 دسامبر 2022
    امتیاز 5 از 5
    پاسخ

    سلام عالی بود ولی امیدوارم پروژه های دیگه ای هم در اینده اضافه بشه محتوا واقعا در قبال مبلغ دریافتی کمه.

    موفق باشی.

  • محمد احمدی( دانشجوی دوره )
    19 دسامبر 2022
    امتیاز 5 از 5
    پاسخ

    مثل همیشه بهترین دوره با بهترین استاد فارسی زبان دنیا

    • میلاد بهرامی(مدیریت)
      19 دسامبر 2022
      پاسخ

      مرسی از این همه لطف و محبتی که به من دارید

  • هادی آشوری( دانشجوی دوره )
    23 دسامبر 2022
    امتیاز 4 از 5
    پاسخ

    سلام
    چطور میشه از پشتیبانی دوره ها استفاده کرد ؟
    یه لینک تلگرام هست که میزنم به جایی وصل نمیشه
    ایمیل یا … هم تو سایت پیدا نمیکنم

    • میلاد بهرامی(مدیریت)
      24 دسامبر 2022
      پاسخ

      سلام، وقتتون بخیر
      به پیج زیر پیام بدین تا راهنماییتون کنم
      instagram.com/milad.web

  • محسن احمدی( دانشجوی دوره )
    11 ژانویه 2023
    امتیاز 5 از 5
    پاسخ

    خیلی عالی تدریس کردین
    امید که دوره های جدید رو هم ضبط کنین

    • میلاد بهرامی(مدیریت)
      12 ژانویه 2023
      پاسخ

      مرسی محسن جان

  • مصطفی کردزنگنه( دانشجوی دوره )
    17 ژانویه 2023
    امتیاز 5 از 5
    پاسخ

    لطفا دوره رو مشابه جاوا اسکریت لینک دانلود کامل هر فصل رو بزارید تا بتونیم توی این وضعیت اینترنت توی تلویزیون ببینیم

    • میلاد بهرامی(مدیریت)
      25 مارس 2023
      پاسخ

      لینک های دانلود قرار گرفت

  • arian malihi( دانشجوی دوره )
    21 ژانویه 2023
    امتیاز 5 از 5
    پاسخ

    هزارتا دوره دیدم هیچکدوم به این محشری که ساختید نبود عالی بود عالی پیشنهاد می کنم تهیه کنید واقعا مبلغ دوره خیلی بیشتر از این قیمتیه که هست اینقدر محتوا مفید داره

    • میلاد بهرامی(مدیریت)
      21 ژانویه 2023
      پاسخ

      خیلییییییی ممنونم از لطف و محبت شما

  • فاطمه( دانشجوی دوره )
    24 ژانویه 2023
    پاسخ

    سلام .من این دوره رو قبلا خریدم،کد رهگیری و ایمیل تایید خریدو ….رو دارم.اما رمز عبور و نام کاربریم یادم نیست، و هرچفدم بازبینی رمز میزنم هبچ پیامی واسه ایمیلیم نمیاد لطفا راهنماییم کنید

    • میلاد بهرامی(مدیریت)
      24 ژانویه 2023
      پاسخ

      سلام ، وقتتون بخیر ، یه پیام به ایدی اینستاگرام milad.web بدین تا مشکلتون رفع بشه

  • Mohammad Mazari( دانشجوی دوره )
    3 فوریه 2023
    امتیاز 5 از 5
    پاسخ

    بی نطیر واقعا هیج اموزشی در این حد در سطح اینترنت پیدا نیمشه که نکات رو این قدر با جزییات و روان توضیح میدید

    • میلاد بهرامی(مدیریت)
      4 فوریه 2023
      پاسخ

      خیلیییییی مچکرم مرسی ازتون

  • مرصاد رستمی( دانشجوی دوره )
    11 مارس 2023
    امتیاز 5 از 5
    پاسخ

    تدریس روان ، سلیس و فهم آسان مطالب. واقعا عالی آقای بهرامی عزیز

    • میلاد بهرامی(مدیریت)
      25 مارس 2023
      پاسخ

      مرسی از لطف شما

  • →
  • 1
  • …
  • 7
  • 8
  • 9
  • 10
  • 11
  • …
  • 13
  • ←

قوانین ثبت دیدگاه

  • نظر واقعیت رو در مورد دوره بنویس ، تا بقیه با خوندن کامنت ها بهتر بتونن واسه شرکت توی دوره ها تصمیم بگیرن

پاسخ دهید به طاها صمدی لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

قیمت :

499,000 تومان

امتیاز
4.95 از 87 رأی
4.95 87 رای
499,000 تومان
تعداد دانشجو : 1,396
نوع دوره: غیر حضوری
پیش نیاز: دوره html و css
تاریخ شروع: 10 تیر ماه 1400
روش دریافت: دانلود ویدئو ها
درصد پیشرفت دوره: %100
71.08k بازدید 187 دیدگاه
میلاد بهرامی
میلاد بهرامی
برنامه نویس و توسعه دهنده وب

دسته: طراحی سایت
رسالت نکست وان کد

نکست وان کد با هدف تولید آموزش هایی ایجاد شده ، که حس شیرینِ یادگیری لذت بخش برنامه نویسی و طراحی وب رو تجربه کنید.

تمامی حقوق برای سایت نکست وان کد محفوظ می باشد.

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت