وب سایت تخصصی شرکت فرین
دسته بندی دوره ها

CSS: Variables and Fluid Layouts

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

When responsive web design was first introduced, it was at once magical and inefficient. Designers had to work with floats to lay out their grid-based systems, as well as hack media queries. Recent advances in CSS simplify this process, letting your design adapt to circumstances more fluidly. But leveraging these new features requires abandoning current practices and shifting to a model where you trade precise control for consistency and ease of implementation. This course can help you make that shift. Jen Kramer lays out how to do math directly in CSS via the calc() function and leverage custom properties, or variables, to streamline your CSS. Along the way, Jen shares examples of how to use these properties, including how to add custom properties to type scale and work with Flexbox and Grid.


01 - Introduction
  • 01 - The evolution of responsive design
  • 02 - What you should know

  • 02 - 1. Learn CSS calc()
  • 01 - CSS calc() overview
  • 02 - Applying calc() in a layout example
  • 03 - Challenge Creating a type scale
  • 04 - Solution Creating a type scale

  • 03 - 2. Learn CSS Custom Properties
  • 01 - CSS custom properties overview
  • 02 - Configure CSS custom properties
  • 03 - CSS custom properties and inheritance
  • 04 - CSS custom properties and Sass variables
  • 05 - Using Sass variables
  • 06 - Challenge Add custom properties to type scale
  • 07 - Solution Add custom properties to type scale

  • 04 - 3. Create Layouts
  • 01 - Mark up a simple four-column grid system
  • 02 - Create a starting CSS for the grid system
  • 03 - Add media queries to your grid system
  • 04 - Rewrite CSS to integrate calc() and custom properties
  • 05 - Rewrite CSS to integrate gaps between grid cells
  • 06 - Make the layout formula even more flexible
  • 07 - Challenge Media query integration
  • 08 - Solution Media query integration

  • 05 - 4. Refactor a Web Page
  • 01 - Project Use calc() and custom properties
  • 02 - Step 1 Apply the grid layout
  • 03 - Step 2 Add custom properties to grid layout
  • 04 - Step 3 Apply a type scale and custom properties

  • 06 - Conclusion
  • 01 - Next steps
  • 139,000 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    مدرس:
    شناسه: 15510
    حجم: 383 مگابایت
    مدت زمان: 123 دقیقه
    تاریخ انتشار: 12 تیر 1402
    طراحی سایت و خدمات سئو

    139,000 تومان
    افزودن به سبد خرید