طرح بندی CSS بدون کد با جریان وب

مدرس Jen Kramer

انتشار 2024/02/15

مدت زمان 2h 53m

سطح مناسب همه

فایل تمرینی دارد

آموزش No-Code CSS Layouts with Webflow

Cascading Style Sheets یا CSS برای توسعه وب اساسی است. Webflow به شما این امکان را می‌دهد که وب‌سایت‌هایی بدون کد ایجاد کنید، اما اگر از قبل مفاهیم اساسی طرح‌بندی CSS را بدانید، آسان‌تر و سریع‌تر است. در این دوره، کاربردهای بالقوه CSS در Webflow را با کارشناس طراحی وب، جن کرامر بررسی کنید.مبانی مدل CSS Webflow را کشف کنید تا شروع به ایجاد کانتینرها، بلوک‌ها و طرح‌بندی‌ها برای تبدیل CSS کنید. یاد بگیرید که چگونه از Grid و Flexbox برای چیدمان های پیشرفته و همچنین موقعیت یابی ثابت، نسبی و مطلق عناصر استفاده کنید. در طول مسیر، جن یک نمای کلی از شناورها و شکست ها و نحوه تأثیر آنها بر جریان صفحه در طراحی شما ارائه می دهد. در پایان این دوره، به نکات و تکنیک هایی برای ایجاد و مدیریت ویژگی های CSS کارآمدتر در جریان وب مجهز خواهید شد.

Cascading Style Sheets (CSS) No-Code Development Webflow

Introduction

Learning CSS layouts without code ()

Course prerequisites ()

1. Styling HTML and Overriding Styling

Understanding HTML elements ()

Global styling with HTML elements ()

Overriding base styling and CSS variables ()

Worksheet: Setting base styling and variables ()

2. Webflow and CSS Layout Basics

What is the box model? ()

Understanding block, inline, and inline-block ()

Sections, containers, and CSS in Webflow ()

Challenge: Text-based section ()

Solution: Text-based section ()

Units of measure: px, em, rem, vw, vh, %, and more ()

Widths, heights, and their maximums and minimums ()

Understanding overflow and fit ()

Challenge: Vertical buttons ()

Solution: Vertical buttons ()

3. Grid, Flexbox, and QuickStack

Introducing Flexbox ()

Advanced Flexbox settings ()

Introducing Grid ()

Grid areas and exceptions to the grid ()

What is QuickStack? ()

Challenge: Working with QuickStack, Grid, and Flexbox ()

Solution: Working with QuickStack, Grid, and Flexbox ()

4. Positioning, Floats, and Practice

Understanding static and absolute positioning ()

Relative positioning ()

Fixed and sticky positioning ()

Floating images inside of text ()

Conclusion

Learn more about Webflow ()

Ex_Files_No_Code_CSS_Webflow.zip (19.7 MB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.