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

Webflow Essentials: Beginner's Guide to Building Beautiful Websites

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

سلام، نام من دن اسکات است و من و شما با هم می خواهیم Webflow را یاد بگیریم. Webflow شما را قادر می سازد تا با استفاده از تکنیک های طراحی بصری و بدون نیاز به کدنویسی پیچیده، وب سایت های پاسخگو و قابل دسترس ایجاد کنید.

این دوره برای افرادی است که تازه با Webflow و به طور کلی طراحی وب هستند.

ما با ایجاد یک سایت تک صفحه ای ساده، یادگیری تکنیک های چیدمان اولیه و استفاده از انیمیشن های ساده شروع خواهیم کرد.

نرم افزار Webflow بصری است و نیازی به یادگیری کدنویسی ندارد. شما یاد خواهید گرفت که چگونه از سازگاری وب سایت خود در دستگاه های دسکتاپ، لپ تاپ و تلفن همراه اطمینان حاصل کنید. ما در مورد کلاس‌های CSS برای طرح‌بندی و استایل قلم و همچنین اهمیت قراردادهای نام‌گذاری کلاس‌ها آشنا می‌شویم.

اگر قبلاً استفاده از Webflow را امتحان کرده‌اید و اکنون به این فکر می‌کنید که آیا باید از شبکه‌ها، flex، ستون‌ها یا divs استفاده کنید و چرا... نترسید. در پایان این دوره خواهید دانست که از کدام و چرا استفاده کنید!

ما یاد می‌گیریم که چگونه وب‌سایت نمونه کار خود را بسازیم و چند انیمیشن هیجان‌انگیز را نیز به کار خواهیم برد.

با هم یاد می‌گیریم که فرم‌ها را ایجاد کرده و سبک‌دهی کنیم و آن‌ها را در وب‌سایت شما بگنجانیم.

ممکن است برخی از شما قبلاً شروع به استفاده از Figma یا Adobe XD کرده باشید. من به شما نشان خواهم داد که چگونه می‌توانید فایل‌هایی را که ایجاد کرده‌اید تبدیل کنید و آنها را در یک سایت Webflow ترکیب کنید.

تجربه قبلی با استفاده از Figma یا Adobe XD هنگام استفاده از Webflow ضروری نیست.

درباره Sticky Navs، SEO، Symbols، REM، Floats، Gradients و Fonts خواهیم آموخت.

ما یک وب سایت و یک وبلاگ CMS ایجاد خواهیم کرد و یاد خواهیم گرفت که چگونه مسئولیت این موارد را به مشتریان یا همکاران واگذار کنیم، سایت را تحویل دهیم تا شخص دیگری غیر از شما بتواند وارد سیستم شود و خودش همه محتوا را مدیریت کند.

ما به یک سایت تجارت الکترونیک نگاه می کنیم، ایجاد می کنیم و سبک می کنیم، سبدهای خرید، فرم های سفارش و دروازه های خرید را ایجاد و طراحی می کنیم. ما یاد خواهیم گرفت که چگونه محصولات و خدمات دیجیتال و فیزیکی را بفروشیم.

اگر برخی از اصطلاحات مانند Global، Flex، Grid، Nav همگی خیلی سخت به نظر می رسند - به یاد داشته باشید که از ابتدا شروع می کنیم و تکنیک ها را گام به گام کار می کنیم. هدف این دوره برای هر کسی است که می خواهد با استفاده از Webflow وب سایت بسازد.

شما ممکن است فقط نیاز به طراحی یک وب سایت برای خود داشته باشید، ممکن است بخواهید یک طراح وب تمام وقت شوید، ممکن است قبلاً یک فریلنسر باشید و بخواهید نوع کاری را که می توانید به مشتریان خود ارائه دهید گسترش دهید. این دوره برای شماست!

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

شما در شرف رفتن از Website Zero به Webflow Hero هستید!


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

درس ها Lessons

  • چگونه اولین وب سایت خود را در جریان وب بسازیم How to Build Your First Website in Webflow

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

  • تصاویر پس‌زمینه نحوه پوشش متن روی جریان وب تصویر Background Images How to Overlay Text on Image Webflow

  • کار همراه با Dan Building فروشگاه چای کامل در Webflow قسمت 1 Work Along With Dan Building the Full Tea Store in Webflow Part 1

  • افزودن و اتصال صفحات در جریان وب Adding & Connecting Pages in Webflow

  • چگونه Client من یک پست وبلاگ را در مجموعه CMS در Webflow اضافه می کند How Does My Client Add a Blog Post in the CMS Collection in Webflow

  • افزودن محصول تجارت الکترونیک خود به یک صفحه در جریان وب Adding Your Ecommerce Product to a Page in Webflow

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

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

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

  • طراحی ریسپانسیو در جریان وب چیست؟ What is Responsive Design in Webflow

  • نحوه ایجاد یک انیمیشن بارگذاری صفحه در جریان وب How to Create a Page Load Animation in Webflow

  • کلاس پروژه 05 - صفحه اصلی نمونه کارها - راه حل قسمت 1 Class Project 05 - Portfolio Homepage - Solution Part 1

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

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

  • استفاده از نام دامنه وب سایت سفارشی خود در جریان وب Using Your Own Custom Website Domain Name in Webflow

  • تصاویر Hi-DPI و پاسخگو در جریان وب چیست؟ What are Hi-DPI & Responsive Images in Webflow

  • پروژه کلاس 01 - خلاصه جریان وب خود را ایجاد کنید Class project 01 - Create Your Own Webflow Brief

  • Webflow چیست What is Webflow

  • انیمیشن شناور دکمه جریان وب با استفاده از تریگر عنصر Webflow Button Hover Animation Using Element Trigger

  • کارت های قد مساوی با دکمه در پایین در جریان وب Equal Height Cards With Button on the Bottom in Webflow

  • کلاس پروژه 05 - صفحه اصلی نمونه کارها - راه حل قسمت 2 Class Project 05 - Portfolio Homepage - Solution Part 2

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

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

  • تنظیمات پرداخت در جریان وب Payment Settings in Webflow

  • نحوه اضافه کردن انواع در محصول تجارت الکترونیک Webflow How to Add Variants in Webflow Ecommerce Product

  • آموزش شروع به کار با جریان وب Getting Started with Webflow Tutorial

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

  • مقدمه ای بر دوره آموزشی Webflow Introduction to Webflow Training Course

  • سبک کردن لیست مجموعه ما با Grid & Flex در Webflow Styling our Collection List With Grid & Flex in Webflow

  • پیوند دستی به یک صفحه مجموعه در جریان وب Manually Linking to a Collection Page in Webflow

  • موقعیت مطلق و نسبی در Webflow توضیح داده شده است Position Absolute & Relative Explained in Webflow

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

  • با Dan Building Full Tea kStore در Webflow قسمت 2 کار کنید Work Along with Dan Building the Full Tea kStore in Webflow Part 2

  • محو شدن در اسکرول در جریان وب Fade in on Scroll in Webflow

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

  • پروژه کلاس 03 - شبکه و وب سایت پاسخگو پروژه کلاس 03 - وب سایت گرید و واکنش گرا Class project 03 - Grid & Responsive WebsiteClass project 03 - Grid & Responsive Website

  • همراه با Dan Building the Full Tea Store در Webflow قسمت 3 کار کنید Work Along with Dan Building the Full Tea Store in Webflow Part 3

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

  • نحوه ایجاد کلاس های CSS در جریان وب How to Create CSS Classes in Webflow

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

  • Float & Why the Cart Button در Nav in Webflow قرار نمی گیرد Float & Why the Cart Button Won’t go in the Nav in Webflow

  • ساخت ناو سفارشی خودمان در جریان وب Making Our Own Custom Nav in Webflow

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

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

  • نحوه استفاده از Style Manager Webflow How to use Style Manager Webflow

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

  • فاصله ارتفاع خط بعد از فاصله حروف در جریان وب Line Height Space After Letter Spacing in Webflow

  • مدیر سبک و کلاس های تمیز کردن Style Manager & Cleaning Up Classes

  • اتصال دستی نام دامنه سفارشی خود در جریان وب Manually Connecting Your Own Custom Domain Name in Webflow

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

  • چگونه در Webflow محصولات را به فروشگاه خود اضافه کنید How to Add Products to Your Store in Webflow

  • دکمه هایی با رنگ شناور در جریان وب Buttons with a Hover Color in Webflow

  • محو شدن تصویر و بزرگتر شدن هنگام چرخش در جریان وب Image Fade In & Get Bigger On Roll Over in Webflow

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

  • حرکت تصویر پس‌زمینه اختلاف منظر در جریان وب Parallax Background Scroll Image Move in Webflow

  • همراه با Dan Building the Full Tea Store در Webflow قسمت 4 کار کنید Work Along with Dan Building the Full Tea Store in Webflow Part 4

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

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

  • چگونه Webflow را واکنش گرا کنیم How to Make Webflow Responsive

  • اشتراک گذاری با طرح خود با مشتری Sharing With Your Design With Your Client

  • وب سایت میزبانی وب در مقابل فضای کاری چقدر است How Much Is Webflow Hosting Site vs Workspace

  • نحوه تغییر سبک های پیش فرض در جریان وب How To Change the Default Styles in Webflow

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

  • نحوه برش تصاویر در جریان وب با استفاده از Object Fit How Crop Images in Webflow Using Object Fit

  • بهترین میانبرهای جریان وب و نکات و ترفندهای سرعت The Best Webflow Shortcuts & Speed Tips & Tricks

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

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

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

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

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

  • Image Alt Text در جریان وب چیست؟ What is Image Alt Text in webflow

  • طرح بندی جعبه فلکس با مثال هایی در جریان وب Flex Box Layout With Examples in Webflow

  • چه اتفاقی پس از خرید در یک فروشگاه وب جریان می افتد What Happens After a Purchase in a Webflow Store

  • توضیحات متا برچسب‌های عنوان Robots & Sitemap Explained Webflow Meta Description Title Tags Robots & Sitemap Explained Webflow

  • نحوه ایجاد لینک تصویر در Webflow How to Make an Image Link in Webflow

  • به مشتری خود اجازه می دهید تا وب سایت را در ویرایشگر Webflow به روز کند Allowing Your Client to Update the Website in Webflow Editor

  • نحوه استفاده از VH Viewport Height در Webflow How to use VH viewport Height in Webflow

  • نحوه استفاده از عناصر متن غنی در جریان وب How To Use Rich Text Elements in Webflow

  • پیوند پیوند به بخش صفحه دیگر در جریان وب Anchor Link to Another Page Section in Webflow

  • بعد از دوره ضروری Webflow شما چه می شود؟ What Next After Your Webflow Essentials Course

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

  • آیا می توانید کد خود میزبانی وب را صادر کنید Can You Export Code Self Hosted Webflow

  • پاورقی نوار ناوبر چسبنده موقعیت جریان وب چسبنده کار نمی کند Sticky Navbar Footer Webflow Position Sticky Not Working

  • افزودن لیستی از محصولات خود به صفحه اصلی Adding a List of Your Products to the Homepage

  • تست روی تلفن همراه واقعی شما Testing on Your Actual Mobile Phone

  • پیوند دادن به صفحه مجموعه از صفحه اصلی در جریان وب Linking to a Collection Page From the Homepage in Webflow

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

  • نحوه استایل کردن کامپوننت نوار نوار در جریان وب How to Style the Navbar Component in Webflow

  • نحوه ایجاد یک نوار ناوبری منو برگر دوستانه برای موبایل در Webflow How to Make a Mobile Friendly Burger Menu Nav Bar in Webflow

  • Webflow Layout Flex vs Grid که باید از آن استفاده کنم Webflow Layout Flex vs Grid which should I use

  • نسبت کنتراست رنگ در جریان وب چیست؟ What is Color Contrast Ratio in Webflow

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

  • نحوه اضافه کردن تصاویر با حاشیه در جریان وب How to add Images with Margin in Webflow

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

  • سوالات متداول Webflow - قسمت 3 Webflow چقدر است Webflow FAQs - How Much is Webflow Part 3

  • نحوه ایجاد نمونه های جهانی در جریان وب How to Create Global Swatches in Webflow

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

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

  • نحوه تغییر فاویکون در جریان وب How to Change Favicon in Webflow

  • نحوه ایجاد فرم تماس در Webflow How to Make a Contact Form in Webflow

  • یک نماد و لغو در جریان وب ایجاد کنید Create a Symbol & Overrides in Webflow

  • Lazy Load در Webflow چیست؟ What is Lazy Load in Webflow

  • نحوه اضافه کردن فونت به جریان وب How to Add Fonts to Webflow

  • پاورقی در Webflow به پایین بچسبید Footer Stick to Bottom in Webflow

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

  • کد جاسازی HTML از Calendly، Twitter و Castos HTML Embed Code From Calendly, Twitter & Castos

  • سازماندهی مجدد آنچه از لیست مجموعه جریان وب نشان داده شده است Reorganizing What is Shown From the Webflow Collection List

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

  • سوالات متداول Webflow - قسمت 2 Webflow چقدر است Webflow FAQs - How Much is Webflow Part 2

  • کانتینر با عرض کامل نوار نوار در جریان وب Navbar Full Width Container in Webflow

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

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

  • پس زمینه گرادیان در جریان وب Gradient Background in Webflow

  • پیوندهای فقط خواندنی در جریان وب برای چه مواردی هستند What Are Read Only Links in Webflow For

  • هایپرلینک ها و زیرخط و رنگ را از پیوند در جریان وب حذف کنید Hyperlinks & Remove Underline & Color From Link in Webflow

  • آیا Webflow برای سئو خوب است؟ Is Webflow Good For SEO

نمایش نظرات

آموزش ضروریات جریان وب: راهنمای مبتدیان برای ساختن وب سایت های زیبا
جزییات دوره
17h 11m
117
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
1,728
4 از 5
ندارد
دارد
دارد
Daniel Scott
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Daniel Scott Daniel Scott

مربی معتبر Adobe

من معلم طراح دیجیتال در BYOL International هستم. به اشتراک گذاشتن چیزی است که من هستم، و تدریس جایی است که در بهترین حالتم هستم، زیرا من در هر دو طرف این معادله بوده ام، و دریافت آموزش های مفید راه معنادار من برای عضویت در جامعه خلاق است.

من مدت زیادی را صرف تماشای یادگیری و آموزش دیگران کرده ام تا نحوه کارم با شما را اصلاح کنم تا کارآمد، مفید و مهمتر از همه به یاد ماندنی باشم. من می خواهم آنچه را که به شما نشان داده ام به آینده ای روشن منتقل کنید.

من یک همسر (یک دختر دوست داشتنی ایرلندی) و بچه دارم. من در بسیاری از مکان‌ها زندگی و کار کرده‌ام (همانطور که کیوی‌ها تمایل دارند) - اما بیشتر 14 سال خلق و تدریس من یک موضوع مهم داشته است: همراهی دیگران برای سوار شدن در حالی که همه ما سعی می‌کنیم دنیا را با داستان‌هایمان تغییر دهیم. ، کار عشق و هنر ما.

من یک مربی معتبر Adobe (ACI) در ایرلند هستم. من همچنین یک متخصص Adobe Certified (ACE) هستم و دوره آموزشی Adobe Certified Associate (ACA) را گذرانده ام. و من فقط Adobe کار نمی کنم. به یاد داشته باشید، رسانه یک اصطلاح بسیار گسترده است - دیجیتال مرزها را شکست، بنابراین همه ما دائماً در حال یادگیری هستیم.

من بیش از 14 سال است که تدریس می کنم. من از یک طراح رسانه و تولید کننده محتوا آمده ام - بنابراین می دانم که شما در حال حاضر دقیقا در کجا هستید. من اونجا بودم. من عاشق این چیزها هستم چاپ، نشر دیجیتال، وب و ویدئو. من می توانم ببینم که چگونه همه چیز به هم وصل می شود. و من می‌توانم ببینم چگونه می‌توانیم آن اتصالات را به اشتراک بگذاریم.

من لپ تاپ Bring Your Own را در نیوزیلند آنلاین ساختم. من یک تیم عالی دارم که با من کار می کند تا BYOL را در راس آموزش Adobe و رسانه های دیجیتال نگه دارم. من کسب و کار را درک می کنم، من یکی از آن ها را دارم - بنابراین می دانم که چقدر مهم است که آن را به درستی انجام دهم و کاری کنم که برای شما کار کند.

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