×
۵۰,۰۰۰ تومان
۳۰,۰۰۰ تومان

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

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

هزینه آموزش
۵۰,۰۰۰ تومان
تخفیف ۴۰ درصدی
۳۰,۰۰۰ تومان

تعداد دانشجو
۷۴۳ نفر
مدت زمان
۲ ساعت و ۳۳ دقیقه
محتوای این آموزش
تضمین کیفیت
۱۷ بازخورد (مشاهده نظرات)
آموزش طراحی واکنش گرا با گرید و فلکس باکس Grid و Flexbox در CSS

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

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

تعداد دانشجو
۷۴۳ نفر
مدت زمان
۲ ساعت و ۳۳ دقیقه
هزینه عادی آموزش
۵۰,۰۰۰ تومان
در طرح تخفیف
۳۰,۰۰۰ تومان

(کسب اطلاعات بیشتر +)
محتوای این آموزش
۱۷ بازخورد (مشاهده نظرات)

حسین بدری

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

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

توضیحات تکمیلی

در آخرین ماه سال ۲۰۱۷ تعداد کاربران تلفن همراه از تعداد کاربران دسکتاپ گذر کرد. همین امر باعث شد که طراحی سایت های واکنش گرا از یک توصیه اکید، به یک ضرورت تبدیل شد. پس از گذشت سال ها، طراحان وب دیگر می دانند که باید وب سایت های خود را برای نمایش در صفحات کوچک تر تلفن های همراه بهینه کنند. امروزه به لطف فناوری های جدیدی نظیر 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)
    • واکنش گرایی تصاویر
    • واکنش گرایی اندازه فونت
    • واکنش گرایی آیکون ها

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

پیش نیاز


آنچه در این آموزش خواهید دید:

آموزش ویدئویی مورد تائید فرادرس
مراجع و فایل های جانبی مرتبط با آموزش
فایل PDF یادداشت‌ های ارائه مدرس

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

Visual Studio Code




پیش نمایش‌ها

۱. طرح اولیه

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۹ مگابایت -- (کلیک کنید +))

۲. Grid

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۱۷ مگابایت -- (کلیک کنید +))

۳. پس زمینه، فونت تحت وب، سایه ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۴. Flexbox
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۵. واکنش گرایی در هر ذره
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
این آموزش شامل ۶ جلسه ویدئویی با مجموع ۲ ساعت و ۳۳ دقیقه است.
با تهیه این آموزش، می‌توانید به همه بخش‌ها و جلسات آن، دسترسی داشته باشید.

راهنمای سفارش آموزش‌ها

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

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

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


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

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


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


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


نظرات

تا کنون ۷۴۳ نفر از این آموزش استفاده کرده اند و ۱۷ نظر ثبت شده است.
محمد
محمد
۱۴۰۰/۱۰/۲۱

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

سروش
سروش
۱۴۰۰/۰۹/۰۲

این محتوای توی چند سایت دیگه دیده بودم اما از آموزش شما به خاطر ارائه خوب خیلی راضی هستم

یزدان
یزدان
۱۴۰۰/۰۵/۲۲

این دوره برای کسانیکه html و css رو در حد قابل قبولی بلدن خوبه و توصیه میشه به این دلیل که پروژه محور هست .
در کل خیلی خوب بود .

علی احمدی
علی احمدی
۱۳۹۹/۱۲/۲۰

سلام . این دوره رو به دوستانی پیشنهاد میکنم که آشنایی خوبی با html css دارن . خیلی پروژه محور بود آموزش ممنون از زحماتتون.

میرابراهیم
میرابراهیم
۱۳۹۹/۱۰/۰۲

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

امیرحسین نظری پور
امیرحسین نظری پور
۱۳۹۹/۰۶/۰۳

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

احمدرضا
احمدرضا
۱۳۹۹/۰۵/۲۸

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

گندم
گندم
۱۳۹۹/۰۵/۲۷

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

پوریا
پوریا
۱۳۹۹/۰۳/۲۶

چقدر آموزش روونی بود. من که خیلی لذت بردم.

امیرحسین
امیرحسین
۱۳۹۹/۰۲/۱۳

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

برچسب‌ها:
Background | box-shadow | Break Point | CSS | CSS Flexbox | CSS Flexbox | CSS Grid Layout | CSS Grid Layout | CSS3 | CSS3 | Developer | Developer | em | em | Emmet | Emmet | Flex | Flex | FlexBox | FlexBox | Font Awesome | Font Awesome | fontawesome | fontawesome | footer | footer | fr | fr | google font | google font | Google Fonts | Google Fonts | Grid | Grid | holy grail | holy grail | HTML | HTML | html5 | html5 | Image | Image | Img | Img | Media | Media | REM | REM | Responsive | Responsive | Responsive Design | Responsive Design | rwd | rwd | Shadow | Shadow | Sidebar | Sidebar | Text-shadow | Text-shadow | vh | vh | vw | vw | Web Design | Web Design | آموزش Flexbox | آموزش Flexbox | آموزش Grid | آموزش Grid | آیکون | آیکون | آیکون تحت وب | آیکون تحت وب | آیکون های font awesome | آیکون های font awesome | آیکون های تحت وب | آیکون های تحت وب | اچ تی ام ال | اچ تی ام ال | استایل | استایل | استایل دهی اولیه | استایل دهی اولیه | اعمال flex به منو | اعمال flex به منو | افزودن CSS | افزودن CSS | امت | امت | ایکون | ایکون | پروژه عملی : | پروژه عملی : | پس زمینه | پس زمینه | پس زمینه Header | پس زمینه Header | تلفن های همراه | تلفن های همراه | جلوه شیشه ای | جلوه شیشه ای | دستور Media | دستور Media | ساخت Footer | ساخت Footer | ساخت sidebar | ساخت sidebar | ساخت منو سایت | ساخت منو سایت | سایت های واکنش گرا | سایت های واکنش گرا | سایه | سایه | سی اس اس | سی اس اس | صفحه نمایش | صفحه نمایش | طراحان وب | طراحان وب | طراحی سایت | طراحی سایت | طراحی سایت های واکنش گرا | طراحی سایت های واکنش گرا | طراحی واکنش گرا | طراحی واکنش گرا | طراحی وب | طراحی وب | فلکس | فلکس | فلکس باکس | فلکس باکس | فناوری Flexbox | فناوری Flexbox | فونت | فونت | فونت آسمو فونت اسم | فونت آسمو فونت اسم | فونت آسوم | فونت آسوم | فونت تحت وب | فونت تحت وب | فونت وب | فونت وب | قالب Holy Grail | قالب Holy Grail | قالب برای دسکتاپ | قالب برای دسکتاپ | قالب برای موبایل | قالب برای موبایل | کاربران تلفن همراه | کاربران تلفن همراه | کاربران دسکتاپ | کاربران دسکتاپ | کدنویسی سریع | کدنویسی سریع | گرید | گرید | گریدبندی | گریدبندی | گریدبندی HTML | گریدبندی HTML | معرفی flexbox | معرفی flexbox | معرفی grid | معرفی grid | منوی واکنش گرا | منوی واکنش گرا | موبایل | موبایل | واکنش گرایی | واکنش گرایی | واکنش گرایی Grid | واکنش گرایی Grid | واکنش گرایی آیکون ها | واکنش گرایی آیکون ها | واکنش گرایی اندازه فونت | واکنش گرایی اندازه فونت | واکنش گرایی تصاویر | واکنش گرایی تصاویر | واکنش گرایی منو | واکنش گرایی منو | واکنشگرا | واکنشگرا | وب | وب
مشاهده بیشتر مشاهده کمتر
×
فهرست جلسات ۶ جلسه ویدئویی
×