فرادرس
هزینه آموزش
۲۲,۰۰۰ تومان

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

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

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

چکیده

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

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

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

مهندس حسین بدری، کارشناس مهندسی کامپیوتر از دانشگاه پیام نور رامسر، حدود 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 یادداشت‌ های ارائه مدرس



پیش نمایش‌ها

پیش‌نمایش ۱: طرح اولیه

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

پیش‌نمایش ۲: Grid

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

پیش‌نمایش ۳: پس زمینه، فونت تحت وب، سایه ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
پیش‌نمایش ۴: Flexbox
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
پیش‌نمایش ۵: واکنش گرایی در هر ذره
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.

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

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

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

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


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

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


نظرات

تا کنون ۴۸۲ نفر از این آموزش استفاده کرده اند و ۱۲ نظر ثبت شده است.
امیرحسین نظری پور
امیرحسین نظری پور

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

احمدرضا
احمدرضا

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

گندم
گندم

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

پوریا
پوریا

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

امیرحسین
امیرحسین

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

محمد مهدی
محمد مهدی

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

امیرحسین
امیرحسین

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

پویا
پویا

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

امیر
امیر

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

آرمان
آرمان

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

علیرضا
علیرضا

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

علیرضا
علیرضا

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


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