Faradars Discount
x عدم نمایش تمدید شد جشنواره تخفیف ویژه عید فطر ۴۰٪ تخفیف کد تخفیف: FTR99 کلیک کنید .
فرصت باقیمانده

آموزش طراحی واکنش گرا با Grid و Flexbox در CSS

دسترسی به اطلاعات این آموزش: اطلاعات کلی محتوا و سرفصل ها پیش نمایش و دانلود اطلاعات تکمیلی دیدگاه ها
آموزش طراحی واکنش گرا با Grid و Flexbox در CSS

درباره ناشر

فرادرس
فرادرس

فرادرس بزرگ‌ترین ناشر دیجیتال آموزش‌های تخصصی، دانشگاهی و مهندسی است.

درباره مدرس

مهندس حسین بدری
مهندس حسین بدری

مدرس فرادرس

کارشناسی مهندسی نرم افزار کامپیوتر


مهندس حسین بدری، کارشناس مهندسی کامپیوتر از دانشگاه پیام نور رامسر، حدود ۱۴ سال است که سابقه آشنایی با محیط های برنامه نویسی تحت وب را دارند. ایشان در حال حاضر هنرآموز رشته شبکه و نرم افزار، معاون فنی هنرستان و همچنین مدرس زبان های برنامه نویسی فناوری هایی نظیر: PHP, MySQL, Javascript, jQuery, HTML, CSS, Sass و Laravel هستند. (+)



در این فرادرس شما به سرعت و در اولین خطوط کد، با یک پروژه عملی و کاربردی مواجه می شوید. از مفاهیم تئوری، مثال های نامرتبط و توضیحات اضافی صرف نظر می کنیم. در ابتدا یک صفحه کامل را به عنوان هدف نهایی پروژه نمایش می دهیم و قدم به قدم در مراحل ساخت این صفحه با هم همراه می شویم. اولین قدم ما طرح بندی کلی HTML با استفاده از Grid و بهینه کردن آن برای صفحه نمایش های کوچک تر است. در ادامه با ساخت منوی واکنش گرا به وسیله فناوری Flexbox آشنا می شویم. ضمن اینکه در حین اجرای پروژه با نکات کوچک بی شماری نظیر: استفاده از انواع فونت ها و آیکون های تحت وب، تغییر اندازه عکس ها براساس اندازه صفحه نمایش، مفهوم سایه و شفافیت و همین طور واحدهای اندازه گیری em و vh آشنا می شویم.

👤 مدرس: مهندس حسین بدری
🕓 مدت زمان: ۲ ساعت و ۳۳ دقیقه
🎓 تعداد دانشجو: ۳۵۹ نفر این آموزش را تهیه کرده اند. — ۱۴ نفر در یک ماه اخیر

هزینه عادی آموزش: ۲۱,۰۰۰ تومان
در جشنواره عید فطر: ۱۲,۶۰۰ تومان (کسب اطلاعات بیشتر +)




آنچه شما در این فرادرس خواهید دید:
آموزش ویدئویی مورد تایید فرادرس
فایل PDF یادداشت های مدرس در حین آموزش

تضمین کیفیت و گارانتی بازگشت هزینه
توجه: کیفیت این آموزش توسط فرادرس تضمین شده است. در صورت عدم رضایت از آموزش، به انتخاب شما:
  • بازگشت و شارژ کل مبلغ پرداختی در حساب کاربری
  • و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می شود.
    (توضیحات بیشتر +)
دانلود آنی
فعال‌سازی آنی لینک دانلود، بلافاصله پس از ثبت سفارش


    توضیحات

    چکیده آموزش


    در آخرین ماه سال ۲۰۱۷ تعداد کاربران تلفن همراه از تعداد کاربران دسکتاپ گذر کرد. همین امر باعث شد که طراحی سایت های واکنش گرا از یک توصیه اکید، به یک ضرورت تبدیل شد. پس از گذشت سال ها، طراحان وب دیگر می دانند که باید وب سایت های خود را برای نمایش در صفحات کوچک تر تلفن های همراه بهینه کنند. امروزه به لطف فناوری های جدیدی نظیر CSS3 این امر نه تنها دیگر یک فرایند پیچیده، خشک و خسته کننده نیست، بلکه به کاری لذت بخش و منعطف تبدیل شده است.

    در این فرادرس شما به سرعت و در اولین خطوط کد، با یک پروژه عملی و کاربردی مواجه می شوید. از مفاهیم تئوری، مثال های نامرتبط و توضیحات اضافی صرف نظر می کنیم. در ابتدا یک صفحه کامل را به عنوان هدف نهایی پروژه نمایش می دهیم و قدم به قدم در مراحل ساخت این صفحه با هم همراه می شویم.

    اولین قدم ما طرح بندی کلی HTML با استفاده از Grid و بهینه کردن آن برای صفحه نمایش های کوچک تر است. در ادامه، با ساخت منوی واکنش گرا به وسیله فناوری Flexbox آشنا می شویم. ضمن اینکه در حین اجرای پروژه با نکات کوچک بی شماری نظیر: استفاده از انواع فونت ها و آیکون های تحت وب، تغییر اندازه عکس ها براساس اندازه صفحه نمایش، مفهوم سایه و شفافیت و همین طور واحدهای اندازه گیری em و vh آشنا می شویم. در این آموزش تلاش بر این است که تا حد امکان همه مباحث به صورت کامل پوشش داده شود. اما برای درک راحت تر مطالب توصیه می شود یک آشنایی اولیه با HTML و CSS داشته باشید.

     

    فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:
    • درس یکم: طرح اولیه
      • آشنایی با طراحی واکنش گرا با Grid و Flexbox و نمایش پروژه پایانی
      • قالب Holy Grail در دسکتاپ و موبایل
      • ساخت چارچوب اولیه در HTML
      • افزودن CSS و استایل دهی اولیه
    • درس دوم: Grid
      • معرفی Grid
      • گریدبندی HTML
      • اندازه ها
        • vh
        • vw
        • rem
      • چارچوب Grid
      • معرفی واکنش گرایی
      • دستور Media
      • واکنش گرایی Grid
    • درس سوم: پس‌ زمینه، فونت تحت وب، سایه‌ ها
      • کدنویسی سریع با Emmet
      • چارچوب Header
      • پس زمینه Header
      • جلوه شیشه ای
      • سایه ها (Text-shadow)
      • ساخت منوی سایت
      • فونت تحت وب (Google Fonts)
    • درس چهارم: Flexbox
      • معرفی Flexbox
      • اعمال Flex به منو
      • واکنش گرایی منو
    • درس پنجم: واکنش گرایی در هر ذره
      • ساخت Sidebar
      • ساخت Footer
      • آیکون های تحت وب (Font Awesome)
      • واکنش گرایی تصاویر
      • واکنش گرایی اندازه فونت
      • واکنش گرایی آیکون ها

     

    مفید برای رشته های
    • مهندسی کامپیوتر

    نرم افزارهای مرتبط با آموزش

    Visual Studio Code

    پیش نیاز

    پیش نمایش

    پیش نمایش ۱ : طرح اولیه - ۴ دقیقه


    توجه: ممکن است که به خاطر سرعت پایین اینترنت شما، نمایش آنلاین با کیفیت پایین تر از کیفیت HD ویدئوی اصلی نمایش داده شوند. در این صورت آموزش را دانلود کرده و سپس مشاهده نمایید.

    دانلود مستقیم پیش نمایش - حجم دانلود ۸ مگابایت (کلیک کنید +)

    پیش نمایش ۲ : Grid - ۱۰ دقیقه


    توجه: ممکن است که به خاطر سرعت پایین اینترنت شما، نمایش آنلاین با کیفیت پایین تر از کیفیت HD ویدئوی اصلی نمایش داده شوند. در این صورت آموزش را دانلود کرده و سپس مشاهده نمایید.

    دانلود مستقیم پیش نمایش - حجم دانلود ۱۶ مگابایت (کلیک کنید +)

    پیش نمایش ۳ : پس زمینه، فونت تحت وب، سایه ها - ۸ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۴ : Flexbox - ۹ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۵ : واکنش گرایی در هر ذره - ۵ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.


    آموزش‌های پیشنهادی و مرتبط




    اطلاعات تکمیلی

    نام آموزش آموزش طراحی واکنش گرا با Grid و Flexbox در CSS
    ناشر فرادرس
    کد آموزش FVH4C9808
    مدت زمان ۲ ساعت و ۳۳ دقیقه
    زبان فارسی
    نوع آموزش آموزش ویدئویی     (کیفیت HD - مورد تایید فنی فرادرس)
    حجم دانلود ۳۴۵ مگابایت     (کیفیت ویدئو HD‌ با فشرده سازی انحصاری فرادرس)


    ​راهنمای تهیه آموزش ها

    آیا می دانید که تهیه یک آموزش از فرادرس و شروع یادگیری چقدر ساده است؟

    راهنمایی بیشتر ( +)

    در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟ 
    • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
    • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه

    با شروع یادگیری، یک کلیک فاصله دارید. همین حالا شروع کنید.

    آموزش طراحی واکنش گرا با Grid و Flexbox در CSS

    هزینه عادی آموزش: ۲۱,۰۰۰ تومان
    در جشنواره عید فطر: ۱۲,۶۰۰ تومان (کسب اطلاعات بیشتر +)




    دیدگاه ها

    ( امتیاز ۵٫۰ از ۵ )
    5.0 از 5


    تا کنون ۳۵۹ نفراز این آموزش استفاده کرده اند و ۶ نظر ثبت شده است.
    1. 5 از 5

      :

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

    2. 5 از 5

      :

      سلام
      به نظر خیلی خوب میتونه باشه

    3. 0 از 5

      :

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

    4. 5 از 5

      :

      خیلی دوره خوبی هست.
      موضوعاتی رو تحت پوشش قرار دادند که مدرن هست و خیلی کار هارو آسون میکنند.
      ممنونم ازتون

    5. 0 از 5

      :

      واقعا عالی بود ممنون از تدریس خوبتون

    6. 5 از 5

      :

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

    7. 0 از 5

      :

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

    8. 5 از 5

      :

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

    9. 5 از 5

      :

      بسیار عالی بود. بنده لذت بردم از آموزش استاد حسین بدری.


    نظر شما در مورد این فرادرس چیست؟

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

    امتیاز شما به این آموزش:



​همین امروز شروع به آموختن کنید​

آموزش طراحی واکنش گرا با Grid و Flexbox در CSS

هزینه عادی آموزش: ۲۱,۰۰۰ تومان
در جشنواره عید فطر: ۱۲,۶۰۰ تومان (کسب اطلاعات بیشتر +)


برچسب‌ها: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,



فرادرس در رسانه ها و جشنواره ها

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