دوره آموزشی ضروریات جریان وب

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

شروع شدن Getting Started

• دوره آموزشی Intro to Webflow Tutorial Intro to Webflow Tutorial training course

• شروع با آموزش Webflow Getting started with Webflow tutorial

• Webflow چیست What is Webflow

• سوالات متداول جریان وب - جریان وب چقدر است Webflow FAQs - How much is webflow

• چگونه اولین وب سایت خود را در جریان وب بسازیم How to build your first website in webflow

خلاصه The Brief

• پروژه کلاس 01 - مختصر Webflow خود را ایجاد کنید Class project 01 - Create your own Webflow brief

• پروژه کلاس 01 - مختصر Webflow خود را ایجاد کنید Class project 01 - Create your own Webflow brief

چیدمان سطح 1 Layout Level 1

• Container vs Sections در Webflow چیست؟ What are Container vs Sections in Webflow

کلاس های CSS - سطح 1 CSS Classes - Level 1

• نحوه ایجاد کلاس های CSS در Webflow How to create CSS classes in Webflow

تصاویر سطح 1 Images Level 1

• نحوه اضافه کردن تصاویر با حاشیه در جریان وب How to add images with margin in webflow

• تصاویر پس زمینه نحوه همپوشانی متن در جریان وب تصویر Background images how to overlay text on image webflow

دکمه ها و پیمایش - سطح 1 Buttons & Navigation - Level 1

• دکمه هایی با رنگ شناور در Webflow Buttons with a hover color in Webflow

• ساخت ناوبری سفارشی خودمان در Webflow Making our own custom nav in Webflow

• نحوه ایجاد یک نوار ناوبری منوی همبرگر برای موبایل در Webflow How to make a mobile friendly burger menu nav bar in Webflow

• فیلم تولید 1 - بخش پشتیبانی ساختمان و رویداد بعدی Production Video 1 - Building Support & Next Event Sections

پیوندها Links

• هایپرلینک ها و حذف زیر خط و رنگ از پیوند در جریان وب Hyperlinks & remove underline & color from link in Webflow

• پیوند را به بخش صفحه دیگری در Webflow متصل کنید Anchor link to another page section in Webflow

• پروژه کلاس 02 - صفحه باشگاه خود را ایجاد کنید Class project 02 - Create your club page

• پروژه کلاس 02 - صفحه باشگاه خود را ایجاد کنید Class project 02 - Create your club page

کلاس های CSS - سطح 2 CSS Classes - Level 2

• درک کلاس های ترکیبی جریان وب Understanding Webflow Combo Classes

چیدمان سطح 2 Layout Level 2

• شبکه جریان وب Webflow grid

طراحی تعاملی Responsive Design

• طراحی ریسپانسیو در Webflow چیست؟ What is responsive design in Webflow

• چگونه جریان وب را واکنش گرا کنیم How to make webflow responsive

• گریدهای پاسخگو در جریان وب Responsive Grids in Webflow

• پروژه کلاس 03 - وب سایت Grid & Responsive Class project 03 - Grid & Responsive Website

• پروژه کلاس 03 - وب سایت Grid & Responsive Class project 03 - Grid & Responsive Website

تعاملات و انیمیشن ها سطح 1 Interactions & Animations Level 1

• انیمیشن شناور دکمه جریان وب با استفاده از Element Trigger Webflow button hover animation using Element Trigger

• محو شدن در اسکرول در Webflow Fade in on scroll in Webflow

• پروژه کلاس 04 - تعاملات Class project 04 - Interactions

• پروژه کلاس 04 - تعاملات Class project 04 - Interactions

انتشار سطح 1 Publishing Level 1

• طرح خود را با مشتری خود به اشتراک بگذارید Sharing with your design with your client

• قیمت میزبانی وب جریان در مقابل فضای کاری چقدر است How much is webflow hosting site vs workspace

جریان کار Workflow

• بهترین میانبرهای جریان وب و نکات و ترفندهای سرعت The best Webflow shortcuts & speed tips & tricks

CSS سطح 3 CSS Level 3

• نحوه تغییر استایل های پیش فرض در Webflow How to change the default styles in Webflow

• ترکیبی در مقابل کلاس های جهانی در جریان وب Combo vs Global Classes in Webflow

• قراردادهای نامگذاری کلاس در جریان وب Class naming conventions in Webflow

• نحوه استفاده از مدیر سبک وب جریان How to use style manager webflow

• فیلم تولید 2 - نمونه کار جدید Production Video 2 - New Portfolio

• حداقل ارتفاع در مقابل ارتفاعات ViewPort در جریان وب Minimum Height vs ViewPort Heights in Webflow

اتصال با نرم افزارهای دیگر Connecting with other software

• Figma را به Webflow تبدیل کنید Convert Figma to Webflow

• XD را به Webflow تبدیل کنید Convert XD to Webflow

فونت ها Fonts

• نحوه اضافه کردن فونت به جریان وب How to add fonts to webflow

• فیلم تولید 3 - متن قهرمان Production Video 3 - Hero Text

• فاصله ارتفاع خط بعد از فاصله حروف در جریان وب Line height space after letter spacing in Webflow

• سایه‌های دکمه متن و جعبه در جریان وب Text & Box Button Shadows in Webflow

رنگ Color

• نحوه ایجاد نمونه های جهانی در Webflow How to create global swatches in Webflow

• نسبت کنتراست رنگ در Webflow چیست؟ What is color contrast ratio in Webflow

• پس زمینه گرادیان در Webflow Gradient background in Webflow

چیدمان سطح 3 Layout Level 3

• ظرف تمام عرض نوار نوار در Webflow Navbar full width container in Webflow

• طرح‌بندی جریان وب - ستون‌ها در مقابل فلکس در مقابل گرید در مقابل هیچ در مقابل درون خط Webflow layout - Columns vs Flex vs Grid vs None vs Inline

• طرح جریان وب Flex vs Grid که باید از آن استفاده کنم Webflow layout Flex vs Grid which should I use

• طرح بندی جعبه فلکس با مثال هایی در Webflow Flex box layout with examples in Webflow

• کارت های ارتفاع برابر با دکمه در پایین در Webflow Equal height cards with button on the bottom in Webflow

• موقعیت مطلق و نسبی در Webflow توضیح داده شده است Position absolute & relative explained in Webflow

• چسبنده پاورقی نوار ناوبری موقعیت جریان وب چسبنده کار نمی کند Sticky navbar footer webflow position sticky not working

• پروژه کلاس 05 - صفحه اصلی نمونه کارها Class project 05 - Portfolio Homepage

• پروژه کلاس 05 - صفحه اصلی نمونه کارها - راه حل Class project 05 - Portfolio Homepage - Solution

• پروژه کلاس 05 - صفحه اصلی نمونه کارها Class project 05 - Portfolio Homepage

واحدها Units

• نحوه استفاده از Px Rem & Em در Webflow How to use Px Rem & Em’s in Webflow

• نحوه استفاده از ارتفاع ویوپورت VH در جریان وب How to use VH viewport height in Webflow

جهت یابی Navigation

• نحوه استایل دادن به مؤلفه نوار ناوبری در Webflow How to style the navbar component in Webflow

• افزودن و اتصال صفحات در Webflow Adding & connecting pages in Webflow

• چگونه در Webflow یک تصویر را لینک کنیم How to make an image a link in Webflow

نمادها Symbols

• ایجاد نماد و لغو در جریان وب Create a symbol & overrides in Webflow

تشکیل می دهد Forms

• نحوه ایجاد فرم تماس در Webflow How to make a contact form in Webflow

• نحوه استایل دادن به فرم در Webflow How to style a form in Webflow

تصاویر سطح 2 Images Level 2

• انواع تصویر در Webflow SVG در مقابل PNG در مقابل JPG Image types in Webflow SVG vs PNG vs JPG

• تصاویر Hi-DPI و واکنشگرا در Webflow چیست؟ What are Hi-DPI & responsive images in Webflow

• نحوه برش تصاویر در Webflow با استفاده از شیء مناسب How crop images in Webflow using object fit

• بار تنبل در Webflow چیست What is lazy load in Webflow

• نحوه تغییر فاویکون در جریان وب How to change favicon in webflow

پاورقی Footer

• پاورقی در Webflow به پایین می‌چسبد Footer stick to bottom in Webflow

تعاملات و انیمیشن ها سطح 2 Interactions & Animations Level 2

• نحوه ایجاد یک انیمیشن بارگذاری صفحه در Webflow How to create a page load animation in Webflow

• تصویر محو می‌شود و با جابجایی در Webflow بزرگ‌تر می‌شود Image fade in & get bigger on roll over in Webflow

• حرکت تصویر اسکرول پس زمینه اختلاف منظر در Webflow Parallax background scroll image move in Webflow

سئو سطح 1 SEO Level 1

• آیا جریان وب برای سئو خوب است؟ Is webflow good for SEO

• برچسب‌های عنوان توضیحات متا ربات‌ها و نقشه سایت Webflow را توضیح می‌دهند Meta description title tags robots & sitemap explained Webflow

• متن جایگزین تصویر در جریان وب چیست؟ What is Image Alt text in webflow

• کلمات کلیدی SEO در سرفصل ها و URL ها در جریان وب SEO Keywords in Headings & URLs in Webflow

انتشار سطح 2 Publishing Level 2

• آیا می توانید کدهای خود میزبانی وب را صادر کنید Can you export code self hosted Webflow

• پیوندهای فقط خواندنی در Webflow برای چه چیزی هستند What are read only links in Webflow for

• مدیر سبک و کلاس های تمیز کردن Style manager & cleaning up classes

• استفاده از نام دامنه وب سایت سفارشی خود در Webflow Using your own custom website domain name in Webflow

• اتصال دستی نام دامنه سفارشی خود در Webflow Manually connecting your own custom domain name in Webflow

• تست روی تلفن همراه واقعی شما Testing on your actual mobile phone

• پروژه کلاس 06 - نمونه کارها تکمیل شد Class project 06 - Portfolio Complete

• پروژه کلاس 06 - نمونه کارها تکمیل شد Class project 06 - Portfolio Complete

محتوای پویا/CMS/مجموعه ها Dynamic content / CMS / Collections

• Static vs Dynamic CMS Collection در Webflow چیست؟ What are Static vs Dynamic CMS Collection in Webflow

• ایجاد یک مجموعه CMS در Webflow Creating a CMS Collection in Webflow

• افزودن لیست مجموعه CMS از طریق CSV Webflow Adding the CMS collection list via CSV Webflow

• افزودن لیست مجموعه CMS به صفحه وب در Figma Adding the CMS Collection List to the webpage in Figma

• سازماندهی مجدد آنچه از لیست مجموعه Webflow نشان داده شده است Reorganizing what is shown from the Webflow collection list

• به لیست مجموعه خود با گرید و فلکس در Webflow حالت دهید Styling our collection list with grid & flex in Webflow

• پروژه کلاس 07 - مجموعه آشپزخانه Class project 07 - Kitchen Collection

• پروژه کلاس 07 - مجموعه آشپزخانه Class project 07 - Kitchen Collection

• به مشتری خود اجازه می دهید تا وب سایت را در ویرایشگر Webflow به روز کند Allowing your client to update the website in Webflow editor

• نحوه ایجاد وبلاگ با استفاده از صفحات مجموعه CMS در جریان وب How to create blog using CMS Collection Pages in Webflow

• پیوند دادن به یک صفحه مجموعه از صفحه اصلی در Webflow Linking to a collection page from the homepage in Webflow

• پیوند دستی به یک صفحه مجموعه در Webflow Manually linking to a collection page in Webflow

• چگونه مشتری من یک پست وبلاگ را در مجموعه CMS در Webflow اضافه می کند How does my client add a blog post in the CMS collection in Webflow

• نحوه استفاده از عناصر متن غنی در جریان وب How to use rich text elements in Webflow

• استایل دادن به متن غنی در یک CMS جریان وب Styling rich text in a Webflow CMS

• پروژه کلاس 08 - CMS وبلاگ Class project 08 - Blog CMS

• پروژه کلاس 08 - CMS وبلاگ Class project 08 - Blog CMS

کد تعبیه سفارشی Custom Embed Code

• کد جاسازی HTML از Calendly، Twitter و Castos HTML embed code from Calendly, Twitter & Castos

تجارت الکترونیک Ecommerce

• ایجاد فروشگاه تجارت الکترونیک در Webflow Creating an ecommerce store in Webflow

• چگونه در Webflow محصولات را به فروشگاه خود اضافه کنید How to add products to your store in Webflow

• افزودن محصول تجارت الکترونیک خود به صفحه ای در Webflow Adding your ecommerce product to a page in Webflow

• افزودن لیستی از محصولات خود به صفحه اصلی Adding a list of your products to the homepage

• تنظیمات پرداخت در Webflow Payment settings in Webflow

• بعد از خرید در فروشگاه Webflow چه اتفاقی می افتد What happens after a purchase in a Webflow store

• سفارشی کردن تنظیمات سبد خرید در Webflow Customizing the cart settings in Webflow

• نحوه اضافه کردن انواع در محصول تجارت الکترونیک Webflow How to add variants in Webflow ecommerce product

• افزودن دسته بندی برای محصولات مجموعه CMS با فیلتر Adding Categories for Products CMS Collection with filters

• وارد کردن CSV به تجارت الکترونیک محصول Webflow Importing a CSV to Webflow product ecommerce

• شناور و چرا دکمه سبد خرید در Nav در Webflow نمی رود Float & why the cart button won’t go in the Nav in Webflow

• با دن در ساخت فروشگاه چای کامل در Webflow همکاری کنید Work along with Dan building the full tea store in Webflow

• کلاس پروژه 09 - تجارت الکترونیک Class Project 09 - Ecommerce

• پروژه کلاس 08 - تجارت الکترونیک Class project 08 - Ecommerce

بعدش چی What next

• بعد از دوره آموزشی Webflow Essentials چه اتفاقی می افتد What next after your Webflow Essentials course