مطالب پیشنهادی از سراسر وب

آشنایی با طرح بندی واکنش گرا

دسته بندی ها: آموزش طراحی وب ، آموزش طراحی وب واکنش گرا (Responsive) ، آموزش های لینکدین (LinkedIn)

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

سرفصل:

  • معرفی دوره
  • چندسکویی با طراحی واکنش گرا
  • چیزی که باید بدانید
  • ساختار صفحه اصلی
  • Viewport
  • CSS مورد نیاز
  • تثبیت موقعیت
  • شناورها
  • واحدها
  • طرح بندی واکنش گرا
  • طراحی واکنش گرا
  • کوئری های رسانه ای
  • Flexbox و Grid
  • قابلیت دسترسی
  • پشتیبانی مرورگر
  • طرح بندی شبکه
  • معرفی CSS Grid
  • تعریف ردیف ها و ستون ها
  • شکاف شبکه
  • اندازه ردیف ها و ستون ها
  • قرار دادن آیتم های شبکه
  • مروری بر ترازبندی شبکه
  • ستون های متغیر
  • مناطق الگو شبکه
  • نام خطوط شبکه
  • سفارش آیتم های شبکه
  • Flexbox
  • تعریف کانتینر Flexbox
  • طراحی طرح بندی
  • و غیره

ترجمه با ویدابیا

ترجمه فارسی این دوره آموزشی رو همین الان از ویدابیا سفارش بده الان سفارش بده
آیا این نوشته را دوست داشتید؟
Responsive Layout Publisher:Linkedin Author:Clarissa Peterson Duration:2h 32m 42s Level:Intermediate

Learn how to design responsive layouts with HTML and CSS, including the latest standards: Flexbox and Grid.
Released: : October 24, 2018
Responsive design demands that websites adapt to the device they are displayed on. Responsive layout is key, and HTML and CSS now offer features that make it easier than ever to create layouts that will work well on a wide range of devices and screen sizes. In this course, Clarissa Peterson covers the basics of designing responsive website layouts with the latest standards, including CSS Flexbox and Grid. Review the basics, such as working with the position and float properties to adjust the location of elements on screen, and discover how to use media queries to proactively update your layout. Then dive into CSS Grid, including aligning and ordering items within the grid, and find out to work flexbox containers. Finally, learn to build a 12-column design that combines Grid and Flexbox in one layout.
Introduction
Go cross-platform with responsive design
What you should know
1. Basic Page Structure
Viewport
Required CSS
Display property
Positioning
Floats
Units
2. Responsive Layout
Responsive design
Media queries
Flexbox and Grid
Accessibility
Browser support
3. Grid Layout
Intro to CSS Grid
Defining rows and columns
Grid gap
Sizing rows and columns
Placing grid items
Grid alignment overview
Aligning tracks
Aligning grid items within tracks
Aligning individual grid items
Variable columns
Grid template areas
Naming grid lines
Ordering grid items
Grid flow and implicit tracks
Challenge: The rainbow box
Solution: The rainbow box
4. Flexbox
Defining a flexbox container
Direction
Wrapping
Ordering flex items
Flexbox alignment overview
Aligning items on main axis
Aligning items on cross axis
Aligning lines on cross axis
Aligning individual flex items
Distributing space to flex items
Challenge: Floats to flexbox
Solution: Floats to flexbox
5. Layout Design
Centering content
3-column layout with grid areas, part 1
3-column layout with grid areas, part 2
3-column layout with flexbox
12-column layout setup
12-column layout for medium viewports
12-column layout for wide viewports
Conclusion
Next steps

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

لینک های دانلود حجم فایل: 391.0MB همراه با زیرنویس انگلیسی Linkedin Responsive Layout_git.ir.rar