دوره آموزشی طرح بندی CSS بدون کد با Webflow
2 ساعت 54 دقیقهمتوسط2024-02-15
مدرسین
Jen Kramer
Teaches web design and development
جزئیات دوره
Cascading Style Sheets یا CSS برای توسعه وب اساسی است. Webflow به شما این امکان را میدهد که وبسایتهایی بدون کد ایجاد کنید، اما اگر از قبل مفاهیم اساسی طرحبندی CSS را بدانید، آسانتر و سریعتر است. در این دوره، کاربردهای بالقوه CSS در جریان وب را با کارشناس طراحی وب، جن کرامر بررسی کنید.
برای شروع ایجاد کانتینرها، بلوکها و طرحبندیها برای تبدیل CSS، اصول اولیه مدل CSS Webflow را کشف کنید. یاد بگیرید که چگونه از Grid و Flexbox برای چیدمان های پیشرفته و همچنین موقعیت یابی ثابت، نسبی و مطلق عناصر استفاده کنید. در طول مسیر، جن یک نمای کلی از شناورها و شکست ها و نحوه تأثیر آنها بر جریان صفحه در طراحی شما ارائه می دهد. در پایان این دوره، به نکات و تکنیک هایی برای ایجاد و مدیریت ویژگی های CSS کارآمدتر در Webflow مجهز خواهید شد.
برای شروع ایجاد کانتینرها، بلوکها و طرحبندیها برای تبدیل CSS، اصول اولیه مدل CSS Webflow را کشف کنید. یاد بگیرید که چگونه از Grid و Flexbox برای چیدمان های پیشرفته و همچنین موقعیت یابی ثابت، نسبی و مطلق عناصر استفاده کنید. در طول مسیر، جن یک نمای کلی از شناورها و شکست ها و نحوه تأثیر آنها بر جریان صفحه در طراحی شما ارائه می دهد. در پایان این دوره، به نکات و تکنیک هایی برای ایجاد و مدیریت ویژگی های CSS کارآمدتر در Webflow مجهز خواهید شد.
مهارت ها
WebflowPrototypingWeb StandardsWeb DesignFront-End Web DevelopmentProjectProduct and ManufacturingWeb Development
سرفصل ها
0. مقدمه
- 01 - آموزش طرح بندیهای CSS بدون کد
- 02 - پیش نیازهای دوره
1. یک ظاهر طراحی شده به HTML و یک استایل نادیده گرفته شده
- 03 - درک عناصر HTML
- 04 - یک ظاهر طراحی جهانی با عناصر HTML
- 05 - تغییر شکل پایه و متغیرهای CSS
- 06 - کاربرگ - تنظیم استایل پایه و متغیرها
2. جریان وب و اصول چیدمان CSS
- 07 - مدل جعبه چیست
- 08 - درک بلوک، درون خطی و بلوک درون خطی
- 09 - بخش ها , کانتینرها و CSS در جریان وب
- 10 - چالش - بخش متن محور
- 11 - راه حل - بخش مبتنی بر متن
- 12 - واحدهای اندازهگیری - px، em، rem، vw، vh، و بیشتر
- 13 - عرض و ارتفاع و حداکثر و حداقل آنها
- 14 - درک سرریز و تناسب
- 15 - چالش - دکمههای عمودی
- 16 - راه حل - دکمههای عمودی
3. Grid، Flexbox و QuickStack
- 17 - معرفی فلکس باکس
- 18 - تنظیمات پیشرفته Flexbox
- 19 - معرفی گرید
- 20 - نواحی شبکه و استثنائات شبکه
- 21 - QuickStack چیست
- 22 - چالش - کار با QuickStack، Grid و Flexbox
- 23 - راه حل - کار با QuickStack، Grid و Flexbox
4. تعیین موقعیت، شناور، و تمرین
- 24 - درک موقعیت ایستا و مطلق
- 25 - موقعیت یابی نسبی
- 26 - موقعیت ثابت و چسبنده
- 27 - تصاویر شناور در داخل متن
نتیجه
- 28 - درباره Webflow بیشتر بدانید