با Kotlin و Jetpack Compose یک وب سایت از ابتدا بسازید

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

مقدمه Introduction

• مقدمه Introduction

• معرفی با Compose for Web Introducing with Compose for Web

• Kobweb VS Compose for Web Kobweb VS Compose for Web

راه اندازی Setup

• محیط توسعه (Intelij IDEA) Development Environment (Intelij IDEA)

• Kobweb Binary را نصب کنید Install the Kobweb Binary

• پروژه را ایجاد کنید Create the Project

• یک صفحه فهرست ایجاد کنید Create an Index Page

• کد منبع پروژه Project Source Code

بخش اصلی Main Section

• پس زمینه MainSection را اضافه کنید Add the MainSection Background

• یک کامپوننت هدر ایجاد کنید Create a Header Component

• Style و Hover Animations بر روی کامپوننت Header Style and Hover Animations on a Header component

• هدر را پاسخگو کنید Make Header Responsive

• کامپوننت SocialBar را ایجاد کنید Create SocialBar Component

• اجرای محتوای اصلی Implement Main Content

• دکمه و تصویر اصلی را متحرک کنید Animate the Button & Main Image

درباره بخش About Section

• کامپوننت SkillBar را ایجاد کنید Create SkillBar component

• مؤلفه SectionTitle را ایجاد کنید Create SectionTitle component

• محتوای بخش About را پیاده سازی کنید Implement About Section content

• یک Viewport را مشاهده کنید و مولفه SkillBar را متحرک کنید Observe a Viewport & Animate the SkillBar component

بخش خدمات Service Section

• مؤلفه ServiceCard را ایجاد کنید Create ServiceCard component

• متحرک سازی مؤلفه ServiceCard Animate ServiceCard component

بخش نمونه کارها Portfolio Section

• کامپوننت PortfolioCard را ایجاد کنید Create PortfolioCard component

• انیمیشن Hover را در PortfolioCard اضافه کنید Add Hover Animations on PortfolioCard

• پیاده سازی Portfolio Navigation Implement Portfolio Navigation

بخش دستاوردها Achievements Section

• کامپوننت AchievementCard را ایجاد کنید Create AchievementCard component

• بخش دستاوردهای متحرک Animate Achievement Section

بخش گواهینامه Testimonial Section

• کامپوننت TestimonialCard و RatingBar را ایجاد کنید Create TestimonialCard & RatingBar component

• پیاده سازی گواهینامه ناوبری Implement Testimonial Navigation

• Rating Bar را اصلاح کنید Fix the RatingBar

بخش تجربه Experience Section

• کامپوننت ExperienceCard را ایجاد کنید Create ExperienceCard component

• Animate ExperienceCard جزء Animate ExperienceCard component

بخش تماس Contact Section

• ایجاد فرم تماس با من Create Contact me Form

• یک ایمیل ارسال کنید Submit an Email

پاورقی Footer

• بخش پاورقی را اجرا کنید Implement the Footer Section

دکمه بازگشت به بالا Back to Top Button

• دکمه بازگشت به بالا را اجرا کنید Implement Back to Top Button

منوی ناوبری جانبی/موبایل Side/Mobile Navigation Menu

• یک منوی سرریز را اجرا کنید Implement an Overflow Menu

بخش عنوان انیمیشن ها SectionTitle Animations

• بیایید مولفه SectionTitle را متحرک کنیم Let's Animate the SectionTitle component

لمس نهایی Final Touch

• لمس نهایی Final Touch

استقرار وب سایت Website Deployment

• وب سایت را صادر کنید Export the Website

• وب سایت را روی سرور مستقر کنید Deploy the website on the Server

به روز رسانی دوره Course Updates

• Kobweb 0.18+، پاکسازی کد/مهاجرت Kobweb 0.18+, Code cleanup/migration