آموزش طرح بندی CSS بدون کد با جریان وب

معرفی Introduction

• آموزش طرح بندی CSS بدون کد Learning CSS layouts without code

• پیش نیازهای دوره Course prerequisites

1. یک ظاهر طراحی شده به HTML و یک استایل نادیده گرفته شده 1. Styling HTML and Overriding Styling

• نادیده گرفتن استایل پایه و متغیرهای CSS Overriding base styling and CSS variables

• یک ظاهر طراحی جهانی با عناصر HTML Global styling with HTML elements

• کاربرگ: تنظیم استایل پایه و متغیرها Worksheet: Setting base styling and variables

• درک عناصر HTML Understanding HTML elements

2. جریان وب و اصول چیدمان CSS 2. Webflow and CSS Layout Basics

• مدل جعبه چیه؟ What is the box model?

• چالش: دکمه های عمودی Challenge: Vertical buttons

• بخش ها، کانتینرها و CSS در جریان وب Sections, containers, and CSS in Webflow

• درک بلوک، درون خطی و بلوک درون خطی Understanding block, inline, and inline-block

• راه حل: بخش مبتنی بر متن Solution: Text-based section

• درک سرریز و تناسب Understanding overflow and fit

• واحدهای اندازه گیری: px، em، rem، vw، vh، ٪ و بیشتر Units of measure: px, em, rem, vw, vh, %, and more

• راه حل: دکمه های عمودی Solution: Vertical buttons

• عرض، ارتفاع و حداکثر و حداقل آنها Widths, heights, and their maximums and minimums

• چالش: بخش مبتنی بر متن Challenge: Text-based section

3. Grid، Flexbox و QuickStack 3. Grid, Flexbox, and QuickStack

• تنظیمات پیشرفته Flexbox Advanced Flexbox settings

• QuickStack چیست؟ What is QuickStack?

• معرفی گرید Introducing Grid

• معرفی فلکس باکس Introducing Flexbox

• راه حل: کار با QuickStack، Grid و Flexbox Solution: Working with QuickStack, Grid, and Flexbox

• چالش: کار با QuickStack، Grid و Flexbox Challenge: Working with QuickStack, Grid, and Flexbox

• مناطق شبکه و استثنائات شبکه Grid areas and exceptions to the grid

4. تعیین موقعیت، شناور، و تمرین 4. Positioning, Floats, and Practice

• تصاویر شناور داخل متن Floating images inside of text

• درک موقعیت استاتیک و مطلق Understanding static and absolute positioning

• موقعیت یابی نسبی Relative positioning

• موقعیت یابی ثابت و چسبنده Fixed and sticky positioning

نتیجه Conclusion

• درباره Webflow بیشتر بدانید Learn more about Webflow