آموزش طراحی وب بدون کد - اصول جریان وب برای مبتدیان
No Code Web Design - Webflow Fundamentals for Beginners
ساخت وب‌سایت‌های منحصربه‌فرد بدون جریان وب ابزار No-Code
زمانی که برای توسعه وب‌سایت‌های خود باید یاد بگیرید چگونه کدنویسی کنید به پایان رسیده است. با استفاده از قدرت جریان وب ابزار No-Code، می‌توانیم وب‌سایت‌های سفارشی 100% را بدون نیاز به لمس ویرایشگر کد یا دانش عمیق HTML، CSS جاوا اسکریپت توسعه و طراحی کنیم.
در حالی که Webflow ممکن است در نگاه اول کمی ترسناک به نظر برسد، در واقع یادگیری آن بسیار آسان و سریع است. در طول این دوره، ما تمام اصول اساسی را که برای شروع ساختن وب‌سایت در جریان وب از ابتدا نیاز دارید، پوشش خواهیم داد.
ما مجموعه وسیعی از موضوعات را در این دوره پوشش خواهیم داد، مانند:
ایجاد مدیریت صفحات جدید و موجود
رابط کاربر
نحوه کار با چندین عنصر مانند بخش‌ها، کانتینرها، سرفصل‌ها و دکمه‌ها
نحوه ایجاد کلاس‌ها و کلاس‌های ترکیبی
نحوه ایجاد جلوه های شناور خیره کننده
نحوه ایجاد انیمیشن های تعاملی
نحوه ایجاد فرم های تماس
نحوه ایجاد طرح‌بندی با استفاده از Grid Flexbox
و خیلی بیشتر...
این یک دوره آموزشی مبتنی بر پروژه است. در حالی که همه اصول جریان وب را یاد می گیریم، یک صفحه فرود کاملاً پاسخگو می سازیم. ما با یک Hero Area ساده ایجاد خواهیم کرد که در آن همه چیز را در مورد اجزای بخش و کانتینر و همچنین نحوه اضافه کردن Type و نحوه استایل دادن به آن یاد خواهیم گرفت. ما همچنین تصاویر را بهینه سازی و وارد می کنیم و آنها را به پس زمینه بخش خود اضافه می کنیم. البته، هر وب‌سایتی به یک CTA، یک Call-To-Action نیاز دارد، بنابراین ما آن را به شکل یک دکمه با جلوه شناور زیبا و روان ایجاد می‌کنیم.
ما همچنین یاد خواهیم گرفت که چگونه با استفاده از Grid Component، 2 3 ستون بندی ایجاد کنیم. ما این کار را با ساخت بخش‌های ویژگی سرویس انجام خواهیم داد. در این بخش ها نحوه کار با Flexbox را یاد می گیریم که به ما امکان می دهد عناصر خود را بهتر تراز کنیم. همچنین یاد خواهیم گرفت که چگونه نمادها را به صفحه وب خود اضافه کنیم.
البته ما همچنین در حال ساخت یک Layout پیچیده تر خواهیم بود، در مورد ما که بخش قیمت گذاری خواهد بود. و پس از آن همه نحوه ساخت یک فرم تماس کامل را یاد خواهیم گرفت.
با استفاده از آنچه آموختیم، ناوبری و پاورقی خود را می سازیم و سپس همه دکمه ها را به بخش های مربوطه پیوند می دهیم.
بنابراین، علاقه مند به ساخت اولین وب سایت خود در جریان وب هستید؟ اگر چنین است، من شما را در داخل دوره می بینم!
پروژه کلاس ما
در این کلاس ما یک وب‌سایت کامل را از ابتدا می‌سازیم و در عین حال در مورد همه اصول جریان وب می‌آموزیم.
دو راه برای ایجاد این پروژه وجود دارد.
اگر می‌خواهید قبل از ایجاد پروژه‌ای با طراحی خود، به کار در جریان وب عادت کنید، به سادگی آن را دنبال کنید و پروژه نمونه‌ای را که ما خواهیم ساخت.
با این حال، چیزی که من شخصاً توصیه می‌کنم این است که طراحی منحصربه‌فرد خود را بسازید، یا گونه‌ای از آنچه که با هم خواهیم ساخت. هیچ راهی برای یادگیری بهتر از ایجاد یک پروژه وجود ندارد.
اگر گیر کرده اید، به راحتی به من پیام بفرستید یا در برگه بحث بپرسید. همچنین می‌توانید پیوند فقط خواندنی پروژه خود را به اشتراک بگذارید تا من و سایر دانش‌آموزان بتوانیم فایل شما را بررسی کنیم تا حتی بهتر به شما کمک کنیم.
هنگامی که پروژه خود را به پایان رساندید، مطمئن شوید که آن را در برگه پروژه به اشتراک بگذارید. شما می توانید آن را به سادگی با ایجاد یک اسکرین شات از صفحه خود به اشتراک بگذارید، یا حتی بهتر است، پیوند پروژه خود را به اشتراک بگذارید تا بتوانیم آن را در عمل مشاهده کنیم! می‌توانید پروژه‌های خود را با کلیک کردن روی دکمه سبز رنگ «ایجاد پروژه» در برگه پروژه‌های این کلاس به اشتراک بگذارید.
من مشتاقانه منتظر دیدن کار شما هستم!
درس ها Lessons
-
اضافه کردن فونت های سفارشی Adding custom Fonts
-
انتشار وب سایت Publishing the Website
-
ساخت ناوبری موبایل Making the Mobile Navigation
-
کار با لیست ها - لیست های نامرتب و مرتب Working with Lists - Unordered & Ordered Lists
-
ساخت یک ناوبری Building a Navigation
-
بهینه سازی و آپلود تصاویر - اضافه کردن تصاویر به پس زمینه شما Optimizing & Uploading Images - Adding Images to your Background
-
ساخت اولین بخش - کار با بخش ها و کانتینرها Building the first Section - Working with Sections & Containers
-
Webflow چیست؟ What is Webflow?
-
کلاس های ترکیبی - برای عناصر مختلف تغییرات ایجاد کنید Combo Classes - Make Variations for different Elements
-
ساخت پاورقی Building the Footer
-
ریسپانسیو کردن وب سایت ما Making our Website responsive
-
افزودن انیمیشن های پایه - تب تعاملات Adding Basic Animations - The Interactions Tab
-
ساخت یک چیدمان 2 ستونی با استفاده از Grids Building a 2 Column Layout using Grids
-
ایجاد و مدیریت سایت ها Creating and Managing Sites
-
ساخت فرم تماس Building a Contact Form
-
کار با گرید Working with Grids
-
ایجاد یک عنصر دکمه Creating a Button Element
-
نتیجه Conclusion
-
واسط The Interface
-
ویدیوی معرفی Intro Video
-
پیوندهای یک ظاهر طراحی شده Styling Links
-
چیدمان های پیچیده - ایجاد یک بخش قیمت گذاری Complex Layouts - Creating a Pricing Section
-
ایجاد و ویرایش کامپوننت ها Creating & Editing Components
-
پروژه کلاس Class Project
-
پیوند دادن دکمه های ما به صفحات و بخش های مختلف Linking our Buttons to different Pages & Sections
Kai Pruin
نمایش نظرات