آموزش جامع Framer در سال 2026: ساخت و راه‌اندازی وب‌سایت‌های No-Code - آخرین آپدیت

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

مقدمه Introduction

• سلام به یادگیرندگان عزیز 👋 Hola Learners ??

• چگونه بیشترین بهره را از این دوره ببریم؟ How to get best out of this course?

• من کی هستم؟ (معرفی مدرس) Who am I? (Instructor Introduction)

آشنایی با فریمور Framer Introduction

• درک داشبورد Framer و سازماندهی فایل‌ها Understanding the Framer Dashboard & File Organization

• وب‌سایت Framer و نحوه ساخت حساب رایگان Framer Website & How to create a free account?

• بررسی پنل سمت چپ: پروژه Framer Decoding the Left panel: Framer Project

• بررسی پنل سمت راست: پروژه Framer Decoding the Right Panel: Framer Project

• آشنایی با المان متن (Text) Understanding the Text Element

• مینی پروژه: کارت «درباره من» Mini Project: About me card

کالبدشکافی چیدمان (Layout) Decoding The Layout

• تفاوت Frame در مقابل Stack Frame Vs Stack

• چیدمان شبکه‌ای (Grid Layout) The Grid Layout

• جای‌گذاری (Positioning) و انواع آن Positioning and it's types

• سایزدهی (Sizing) و انواع آن Sizing and it's types

• تمرین: بیایید یک بخش Hero بسازیم Exercise: Let's create a hero section

• ناوبری: جابجایی بین صفحات Navigation: Go from one page to another

• مینی پروژه: ساخت یک وب‌سایت پایه و منوی ناوبری Mini Project: Create a basic website & navigation

طراحی وب‌سایت تمیز و ساختاربندی سایت Clean Website Designing & Website Structuring

• اصول UI برای یک صفحه وب بی‌نقص UI Principles behind a perfect webpage

• قوانین UX برای درک روانشناسی صفحه وب UX Laws to understand webpage psychology

• تمرین: به‌کارگیری دانش UI/UX Exercise: Use UI/UX Knowledge

• ساختاربندی وب‌سایت در Framer Website Structuring in Framer

• تمرین: ساختاردهی به این وب‌سایت Exercise: Structure this website

• وایر‌فریم‌ها چیستند؟ What are wireframes?

• تمرین: ایجاد یک وایر‌فریم سنتی Exercise: Create a traditional wireframe

پروژه: ساخت یک صفحه وب در Framer Project: Create a web page in Framer

• ساخت هدر پویا و بخش Hero Creating Dynamic Header & Hero Section

• ساخت بخش ویژگی‌ها و نظرات مشتریان Create Features and Review Section

• ساخت CTA و فوتر Create CTA and Footer

کامپوننت‌ها و قالب‌ها Components & Templates

• مقدمه‌ای بر کامپوننت‌ها Introduction to Components

• کامپوننت‌ها: انیمیشن و متغیرها Components: Animation and Variables

• مقدمه‌ای بر قالب‌ها (Templates) Introduction to Templates

• قالب‌ها: استفاده از متغیرها Templates: Use Variables

• تمرین: قالب‌ها و کامپوننت‌ها Exercise: Templates & Components

• مینی پروژه: قالب‌ها و کامپوننت‌ها Mini Project: Templates & Components

تسلط بر ریسپانسیو سازی Responsiveness Mastery

• مقدمه‌ای بر ریسپانسیو سازی (Responsive) Introduction to Responsiveness

• ریسپانسیو سازی مولکولی Molecular Responsiveness

• ریسپانسیو سازی اتمی Atomic Responsiveness

• تمرین: بخش ریسپانسیو و هدر پویا Exercise: Responsive Section & Dynamic Header

• مینی پروژه: ساخت یک بخش Hero ریسپانسیو ساده Mini Project: Create a simple responsive hero section

انیمیشن‌های وب‌سایت Website Animation

• مقدمه‌ای بر انیمیشن Introduction to Animation

• افکت‌های Hover و Pressed Hover & Pressed Effects

• تمرین: افکت‌های Hover و Pressed Exercise: Hover & Pressed Effects

• افکت‌های Loop و Drag Loop & Drag Effects

• تمرین: افکت‌های Loop و Drag Exercise: Loop & Drag Effects

• افکت ظهور (Appear Effect) Appear Effect

• افکت‌های متنی Text Effect

• افکت پارالاکس (Parallax) Parallax Effect

• مینی پروژه: انیمیشن‌ها و افکت‌ها Mini Project: Animation & Effects

سیستم مدیریت محتوا (CMS) CMS: Content Management System

• مقدمه‌ای بر CMS Introduction to CMS

• مفاهیم اصلی: کالکشن‌ها، فیلدها و آیتم‌ها Core Concepts: Collections, Fields & Items

• نحوه برنامه‌ریزی، استایل‌دهی و اتصال المان‌ها به داده‌ها How to Plan, Style and Connect Elements with Data.

• تمرین: ایجاد یک CMS پایه Exercise: Create a basic CMS

• پروژه: بیایید چیزی خلق کنیم Project: Let's create something

• پروژه: آماده‌سازی داده‌ها Project: Prepare the data

• پروژه: ساخت هدر و بخش Hero Project: Create Header & Hero Section

• پروژه: تکمیل نهایی وب‌سایت Project: Let's complete the website

• مینی پروژه: ساخت یک وب‌سایت وبلاگ شخصی با CMS Mini Project: Create a personal blog CMS website

فرم‌های فریمور (جدید ✨) Framer Forms (Newly Added ✨)

• آشنایی با فرم‌های Framer Framer Forms Introduction

• کالبدشکافی فرم‌ها Form Dissection

• نحوه ذخیره‌سازی داده‌های فرم How to store form data

• اعتبارسنجی فرم‌ها (Validation) Form Validation

• فرم‌ها: سرویس‌های شخص ثالث Forms: Third Party Services

• مینی پروژه: ساخت یک بخش فرم Mini Project: Create a form section