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